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

The purpose of this article is to share with you what are the two commonly used Hook in React. The editor thinks it is very practical, so share it with you as a reference and follow the editor to have a look.

Let's introduce what hook is.

Hook is a new feature of React 16.8.It is specially used in functional components. It can replace other features of react in class components and is commonly used in practical work.

Why hook is recommended for development

Hook is specially used for functional component development. It can be used to replace some life cycles of class components to avoid confusion caused by a large number of this. Therefore, hook is convenient for development and easier for developers to understand the code.

The above is a simple summary of the individual. For more reasons, please refer to react's official website:

Https://react.docschina.org/docs/hooks-intro.html#motivation

UseState

In the code:

React.useState (0) is equivalent to adding an attribute value to this.state in the class component

Variable is equivalent to this.state in class components. The value of variable

SetVariable can be used to modify the value of variable, which can be equivalent to this.setState in class components.

Import React, (useState) from 'react'export default function useState_Demo () {const [variable, setVariable] = useState (0); / / through deconstruction assignment, the parameter passed in the callback of variable and setVariable function changeVariable () {setVariable ((variable) = > variable+1) / / setVariable is variable} render (click variable+1)} useEffect

In the code:

As you can see in the following code, the use of useEffect replaces the use of componentDidMoun, componentDidUpdate, and componentWillUnmount in class components

Import React, (useState, useEffect) from 'react'export default function useState_Demo () {const [variable, setVariable] = useState (0) / / by deconstructing the assignment, the variable and setVariable useEffect (() = > {/ / this return is called when the data monitored by the component changes or is unloaded. When it is unloaded, the call can be equivalent to the componentWillUnmount hook return () = > {console.log ('the component is uninstalled')}}, [variable]) / / the second parameter passed [variable] Indicates that the updated change of variable is detected. Once the variable changes, the callback / / of useEffect will be executed again. The second parameter [] means that no one detects the callback of useEffect only once, which means that the second parameter of componentDidMount hook / / does not pass parameters. As long as the component has state changes, the callback of useEffect will be executed. The parameter passed in in the callback equivalent to componentDidUpdate hook function changeVariable () {setVariable ((variable) = > variable+1) / / setVariable is variable} render (click I will make variable+1)} what you need to pay attention to when using hook

1. Use Hook only on the outermost layer of component functions, and do not call Hook in loops, conditions, or nested functions

Import React, (useEffect) from 'react'export default function useState_Demo () {/ / here is the correct useEffect (() = > {}) / / error 1, using conditional judgment if (true) {useEffect (() = > {})} / / error 2 Cyclic while (true) {useEffect (() = > {})} / / error 3 is used, and nested useEffect (() = > {useEffect (() = > {})})} is used.

2. You cannot use Hook outside the function of a component.

Import React, (useState, useEffect) from 'react'// error 1, used useStateconst [variable, setVariable] = useState (0) outside the component function; / / error 2, used useEffectuseEffect (() = > {}) export default function useState_Demo () {/ / the correct const [variable, setVariable] = useState (0) is used in the component function

3. To avoid the above errors, you can install the eslint-plugin-react-hooks ESLint plug-in to check for errors in the code

Custom hook

Hook is a function. The custom hook is to facilitate the sharing of logic among components. In fact, it encapsulates the reuse function. The hook of react is also called inside the custom hook, and the name should start with use.

/ / Custom hookfunction useHook (initState) {const [variable, setVariable] = useState (initState) return variable;} / / use Custom hookexport default function useState_Demo () {const variableState = useHook (0)}

You may wonder whether using the same Hook in multiple components will share state?

The answer is: no. Because each call to the hook that comes with react is independent of each other, the repeated invocation of the custom hook is independent of each other.

Thank you for reading! This is the end of this article on "what are the two Hook commonly used in React?". I hope the above content can be of some help to you, so that 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.