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

This article will take you through hooks, talk about why it is recommended to use hooks for development, and introduce the two most commonly used Hooks in React. I hope it will be helpful to everyone!

Let me 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 react in class components. Other features are commonly used in actual work. [Related recommendations: Redis Video Tutorial]

Why is it recommended to use hooks for development

Hooks are specially used to develop functional components and can be used to replace class components. Some life cycles to avoid confusion caused by a large number of this, so hooks facilitate development and make it easier for developers to understand the code

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

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

useState

In code:

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

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

setVariable can be used to modify the variable The value 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);//通过解构赋值，我们拿到的variable、setVariable
    function changeVariable(){
        setVariable((variable) => variable +1) //setVariable的回调中传进来的参数是variable
    }
    render (
        <div> 
            <button onclick = {change}>点我会使variable+1</button>
        </div>
    )
}

useEffect

In the code:

As can be seen from the following code, useEffect is used instead of in the class component The use of componentDidMoun, componentDidUpdate, and componentWillUnmount

import React,(useState, useEffect) from 'react'
export default function useState_Demo() {
   const [variable, setVariable] = useState(0);//通过解构赋值，我们拿到的variable、setVariable
    
    useEffect(() => {
        //这个return是在该组件监测的数据变化时或者被卸载时调用的，被卸载时调用可以相当于componentWillUnmount钩子 
        return () => {
            console.log('该组件被卸载了')
        }
    }, [variable])//第二个参数传了[variable]，表示检测variable的更新变化，一旦variable变化就会再次执行useEffect的回调
                  //第二个参数传了[],表示谁都不检测只执行一次useEffect的回调，相当于componentDidMount钩子
                  //第二个参数不传参，只要该组件有state变化就会执行useEffect的回调，相当于componentDidUpdate钩子
    function changeVariable(){
        setVariable((variable) => variable +1) //setVariable的回调中传进来的参数是variable
    }
    render (
        <div> 
            <button onclick = {change}>点我会使variable+1</button>
        </div>
    )
}

What you need to pay attention to when using hooks

1. Only use Hooks in the outermost layer of component functions, and do not call them in loops, conditions or nested functions. Hook

import React,(useEffect) from 'react'
export default function useState_Demo() {
   //这里才是正确的
   useEffect(() => {})
    
   //错误1，使用了条件判断
   if(true) {
        useEffect(() => {})
   }
   //错误2，使用了循环
   while(true) {
        useEffect(() => {})
   }
  //错误3,使用了嵌套
  useEffect(() => {
      useEffect(() => {})
  })
}

2. Hook

import React,(useState, useEffect) from 'react'
//错误1，在组件函数外使用了useState
const [variable, setVariable] = useState(0);
//错误2，在组件函数外使用了useEffect
useEffect(() => {})
export default function useState_Demo() {
   //在组件函数里使用才是正确的
   const [variable, setVariable] = useState(0);
}

3 cannot be used outside the function of the component. In order to avoid the above errors, you can install eslint-plugin-react-hooks ESLint plug-in to check code errors

Custom hook

Hook is a function. Custom hook is to facilitate sharing logic between components. In fact, it is to reuse functions. Encapsulation, the custom hook also calls the hook that comes with react. The name should start with use

//自定义hook
function useHook(initState) {
  const [variable, setVariable] = useState(initState)
  return variable;
}
//使用自定义hook
export default function useState_Demo() {
    const variableState = useHook(0)
}

You may be wondering, will the same Hook be used in multiple components to 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 when called multiple times.

For more programming-related knowledge, please visit: Introduction to programming! !

The above is the detailed content of What is a hook? Let's talk about two commonly used Hooks in React. For more information, please follow other related articles on the PHP Chinese website!