Shulou(Shulou.com)06/03 Report--

This article introduces that mastering React requires mastering the concept of JavaScript. The content is very detailed. Interested friends can use it for reference. I hope it will be helpful to you.

To determine whether a person has mastered React, test his latest JavaScript grammar. The JavaScript syntax is critical to understanding React, making it easier to read logs and write more concise React code.

Once you have mastered some new JavaScript syntax, it becomes easy to write React code. Take a look at the key concepts that are indispensable to proficiency in React!

Arrowhead function

The arrowhead feature is very important, it makes the functionality shorter, cleaner, and you don't have to worry about this. Now that React has hooks API, you can use arrowheads anywhere.

For example, you can use the arrow function with hooks API, as follows:

ImportReact from "react"; const App = () = > {return foo;}; export default App

In the above code, a very simple React component is defined using the arrow function. This code displays only static text, but it can be easily extended through dynamic functionality.

You can also write the following code to add hooks to the application part:

ImportReact, {useState} from "react"; const App = () = > {const [count, setCount] = useState (0); return (setCount (count = > count + 1)} > increment

{count}

);}; export default App

In the above code, useState is used as a hooks to update the count status.

In onClick prop. Use this code in the. Then you pass in an arrow function that invokes the setCount function. In this code, there is another arrow function to update the existing count status.

The author thinks that it is not necessary to use this. Traditional functions or bind functions can rely on hooks API anytime, anywhere. Hooks API is just getting simpler, saving us a lot of trouble using the arrowhead feature.

The simplification of hooks API with arrowheads makes React transition from class-based components to function-based components.

The arrowhead function is useful for manipulating arrays because array methods are usually passed in callbacks, and an excellent way to pass callbacks is to use arrowhead functions. For example, if you want to filter items and display them in React, you can use filter and map as follows:

ImportReact from "react"; const users = [{user: "foo", active: true}, {user: "bar", active: false}, {user: "baz", active: false}]; const App = () = > {return ({users .filter (u = > u.active) .map (u, I) = > ({u.user})

)});}; export default App

In the above code, there is an array of user, and the application sets active to true by calling filter with the arrow function. Then, through map, map the user internal properties on the array returned by filter to render the user name in the array. Then you can see "foo" on the screen.

The arrow function makes the code short and clear, and you can never have to write the word function or deal with the value this in the code.

Default parameter

The default parameter can be added to the function using the default value in the code. In React code, default parameters and deconstruction syntax with object parameters are mostly used, which can decompose attributes into variables and use them selectively.

For example, you can write default parameters into your code, as follows:

ImportReact from "react"; const Greeting = ({greeting = "hello", firstName = "jane", lastName = "smith"}) = > (

{greeting} {firstName} {lastName}

); const App = () = > {return;}; export default App

Arrow functions, deconstruction and default parameters are the two most useful features in the JavaScript feature. You can see that the React code has been greatly simplified and readability has been enhanced. Have you learned it?

About mastering React needs to master the concept of JavaScript is shared here, I hope the above content can be of some help to you, can learn more knowledge. If you think the article is good, you can share it for more people to see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.