What is a hook? Let’s talk about two commonly used Hooks in React

How to quickly get started with VUE3.0: Before you start learning,

let’s first introduce what a 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 actual work. .

Why is it recommended to use hooks for development?

Hooks are specially used to cooperate with the development of functional components. They can be used to replace some of the life cycles of class components to avoid confusion caused by a large number of this. Therefore, hooks are convenient for development and easier for developers to understand the code.

The above is A brief personal summary. For more reasons, please refer to the react official website:

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

useState

In the code:

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

variable to state is equivalent to this.state in the class component. The value of the variable

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

import React, (useState) from 'react'
export default function useState_Demo() {
    const [variable, setVariable] = useState(0);//Through destructuring assignment, we get the variable and setVariable
    function changeVariable(){
        setVariable((variable) => variable +1) //The parameter passed in the callback of setVariable is variable
    }
    render (
        <div> 
            <button onclick = {change}>Click me to make variable+1</button>
        </div>
    )
}

useEffect

code:

As can be seen from the following code, the use of useEffect replaces the use of componentDidMoun, componentDidUpdate, and componentWillUnmount in the class component.

import React, (useState, useEffect) from 'react'
export default function useState_Demo() {
   const [variable, setVariable] = useState(0);//Through destructuring assignment, we get the variable and setVariable
    
    useEffect(() => {
        //This return is called when the data monitored by the component changes or when it is uninstalled. When being uninstalled, calling it can be equivalent to componentWillUnmount hook return () => {
            console.log('The component has been uninstalled')
        }
    }, [variable])//The second parameter is passed [variable], which means that the update change of the variable is detected. Once the variable changes, the useEffect callback will be executed again //The second parameter is passed [], which means that no one The detection only executes the useEffect callback once, which is equivalent to the componentDidMount hook //The second parameter does not pass parameters. As long as the component has a state change, the useEffect callback will be executed, which is equivalent to the componentDidUpdate hook function changeVariable(){
        setVariable((variable) => variable +1) //The parameter passed in the callback of setVariable is variable
    }
    render (
        <div> 
            <button onclick = {change}>Click me to make variable+1</button>
        </div>
    )
}

Things to note when using hooks

: 1. Only use Hooks in the outermost layer of component functions. Do not call Hooks in loops, conditions or nested functions.

import React, (useEffect) from 'react'
export default function useState_Demo() {
   //This is the correct useEffect(() => {})
    
   //Error 1, using conditional judgment if(true) {
        useEffect(() => {})
   }
   //Error 2, using loop while(true) {
        useEffect(() => {})
   }
  //Error 3, using nested useEffect(() => {
      useEffect(() => {})
  })
}

import React, (useState, useEffect) from 'react'

cannot be used outside the component's function.

//Error 1, useState is used outside the component function
const [variable, setVariable] = useState(0);
//Error 2, useEffect is used outside the component function
useEffect(() => {})
export default function useState_Demo() {
   //It is correct to use it in the component function const [variable, setVariable] = useState(0);
}

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

Custom hooks

A hook is a function. Custom hooks are to facilitate sharing logic between components, which is actually reuse. The function is encapsulated, and the custom hook also calls the hook that comes with react. The name must start with use

// Custom hook
function useHook(initState) {
  const [variable, setVariable] = useState(initState)
  return variable;
}
//Use custom hook
export default function useState_Demo() {
    const variableState = useHook(0)
}

You may be wondering, will using the same Hook in multiple components share state?

The answer is: no. Because each call to the hook that comes with react is independent and does not affect each other, so the custom hook is independent and does not affect each other if it is called multiple times.