30 minutes to give you a comprehensive understanding of React Hooks

Overview

1. Hooks can only be used in function components;

2. Hooks are used to expand the functionality of function components so that function components can completely replace class components

React Hooks are all attached to the React object, so they are used in the form of React.useState(). If you find it troublesome, you can import them in advance, as follows:

import React, { useState } from "react"

React has many built-in Hooks. Here are some commonly used ones. See Hooks API for more details.

The first letter of the function component name that uses Hook must be capitalized, otherwise ESLint will report an error

1. useState

const [state, setState] = useState(initialState)

1.1 Three Concept Questions

What does calling useState do?

useState is used to declare a state variable and introduce state into a function component.

What are the parameters we pass to useState?

useState only receives one parameter, which can be any value such as a number, string, object, etc., which is used to initialize the declared state variable. It can also be a function that returns an initial value, preferably a function, which can reduce unnecessary calculations when rendering.

What does useState return?

It returns a read-write array of length 2. The first item of the array is the defined state variable itself, and the second item is a function used to update the state variable. The convention is the set prefix plus the state variable name. Like setState, the setState() function receives a parameter, which can be the specific value after the update or a function that returns the specific value after the update. If setState receives a function, the old state value will be passed as a parameter to the received function and then an updated specific state value will be obtained.

1.2 Example

function App(){
  const [n, setN] = useState(0)
  const [m, setM] = useState(() => 0)
  return (
    <div>
      n: {n}
      <button onClick={() => setN(n+1)}>+1</button>
      <br/>
      m: {m}
      <button onClick={() => setM(oldM => oldM+1)}>+1</button>
    </div>
  )
}

1.3 Notes

• The setState returned by the useState Hook does not automatically merge the properties of the object state for us
• If the address of the object parameter received in setState has not changed, React will consider it unchanged, so it will not cause the view to be updated.

2. useReducer

useReducer is an upgraded version of useState. In the write interface returned by useState, we can only pass the final result, and inside setN it is just a simple assignment operation.
In other words, the calculation process to get the result needs to be written in the callback function within the function component, which undoubtedly increases the size of the function component and does not conform to the idea of ​​Flux (whoever generates the state is responsible for various processing and exposes the processing interface for others to use)

Therefore, React provides a more advanced state management Hook than useState: useReducer, which is introduced as follows:

2.1 Usage

• Create an initial state value initialState
• Create a reducer(state, action) function that contains all operations, and each operation type returns a new state value
• Based on initialState and reducer, use const [state, dispatch] = useReducer(reducer, initialState) to get the read and write API
• Call the write interface, and the passed parameters are all hung on the action object

2.2 Example

import React, { useReducer } from 'react';
import ReactDOM from 'react-dom';

const initialState = {
  n: 0
}

const reducer = (state, action) => {
  switch(action.type){
    case 'addOne':
      return { n: state.n + 1 }
    case 'addTwo':
      return { n: state.n + 2 }
    case 'addX':
      return { n: state.n + action.x }
    default: {
      throw new Error('unknown type')
    }
  }
}

function App(){
  const [state, dispatch] = useReducer(reducer, initialState)
  return (
    <div>
      I am App
      {state.n}
      <button onClick={()=>dispatch({type: 'addOne'})}>+1</button>
      <button onClick={()=>dispatch({type: 'addTwo'})}>+2</button>
      <button onClick={()=>dispatch({type: 'addX', x: 5})}>+5</button>
    </div>
  )
}


ReactDOM.render(<App/>,document.getElementById('root'));

3. useContext

Context means context. Context is a local global variable. The local scope is specified by the developer himself.

3.1 Usage

The usage of useContext is divided into three steps:

• Use const x = createContext(null) to create a context. Usually no initial value is set when creating it, so it is null. It is usually initialized when the context scope is specified.
• Use <x.Provider value={}></x.Provider> to scope the context
• Use const value = useContext(x) in the scope to use context data

3.2 Example

import React, { useState, createContext, useContext } from 'react';
import ReactDOM from 'react-dom';

const Context = createContext(null)

function App(){
  const [n, setN] = useState(0)
  return (
    <Context.Provider value={{n, setN}}>
      <div>
        <Baba />
        <Uncle />
      </div>
    </Context.Provider>
  )
}

function Baba(){
  return (
    <div>
      I am a father<Child />
    </div>
  )
}

function Uncle(){
  const {n, setN} = useContext(Context)
  return (
    <div>
      I am an uncle. The context data I got is {n}
    </div>
  )
}

function Child(){
  const {n, setN} = useContext(Context)
  return (
    <div>
      I am the son. The context data I got is {n}
      <button onClick={() => setN(n+5)}>
        Click to change context data</button>
    </div>
  )
}


ReactDOM.render(<App/>,document.getElementById('root'));

4. useEffect

Effect means side effect, and changes to the environment are side effects. Side effect seems to be a concept in functional programming. I won’t explain it in detail here, as I don’t quite understand it.
In React, useEffect is an operation performed after each render, which is equivalent to afterRender. The first parameter received is the callback function, and the second parameter is the callback timing. Can be used to simulate life cycle in function components.

If multiple useEffects appear at the same time, they will be executed in the order they appear.

4.1 Simulate componentDidMount

useEffect(()=>{
  console.log('Only executed after the first render')
},[])

4.2 Simulate componentDidMount + componentDidUpdate

useEffect(()=>{
   console.log('Execute after each render, including the first render')
})

4.3 Adding dependencies

useEffect(()=>{
    console.log('Only executed after x changes, including the first time x changes from undefined to initialValue')
},[x])
//If there are two dependencies, it will be executed when any of the two dependencies changes

4.4 Simulate componentWillUnmount

useEffect(()=>{
  console.log('Execute after each render, including the first render')
  return ()=>{
    console.log('The component is about to be destroyed')
  }
})
//Just return a function, which will be executed before the component is destroyed

5. useLayoutEffect

useEffect is always executed after the browser has rendered the view. If the callback function in useEffect operates on the DOM view, the view will be initialized at first, and then the callback in useEffect will be executed, which will immediately change a part of the view, resulting in a flickering state.
To avoid this flicker, the callback function of the side effect can be executed before the browser renders the view. If the callback function that operates the DOM in the Effect is executed before the DOM is mounted to the page for display, no flickering will occur after the browser renders the page.

layout means view, and useLayoutEffect is the side effect executed before the view is displayed.

The difference between useEffect and useLayoutEffect is the execution time. useLayoutEffect is executed before the browser renders, while useEffect is executed after the browser renders. But both are run during the execution of the render function. useEffect is executed after render is completed, and useLayoutEffect is executed before render is completed (the view has not been rendered to the browser page).

Therefore useLayoutEffect is always executed before useEffect.

Generally speaking, if the callback function in the Effect involves changes to the DOM view, useLayoutEffect should be used. If not, useEffect.

6. useRef

The useRef Hook is used to define a variable that remains unchanged when the component is continuously rendered.
Each time a component is rendered, a virtual DOM is returned, and the corresponding variables in the component belong only to the virtual DOM at that moment.
The useRef Hook provides a way to create global variables that are local to this component and persist throughout the entire virtual DOM update history.
In order to ensure that the variable obtained by using useRef after each render is the same variable as before, this can only be done by using references. Therefore, useRef stores the value of this local global variable in an object with the property name: current

useRef will not automatically render when current changes

useRef can reference the created Refs object to a DOM node or React instance through the ref attribute. This effect is introduced in React — ref attribute.

It can also be used as a local global variable of a component. The following example records the number of times the page is rendered.

function App(){
  const [state, dispatch] = useReducer(reducer, initialState)
  const count = useRef(0)
  useEffect(()=>{
    count.current++;
    console.log(`This is the ${count.current}th time the page is rendered`)
  })
  return (
    <div>
      I am App
      {state.n}
      <button onClick={()=>dispatch({type: 'addOne'})}>+1</button>
      <button onClick={()=>dispatch({type: 'addTwo'})}>+2</button>
      <button onClick={()=>dispatch({type: 'addX', x: 5})}>+5</button>
    </div>
  )
}

7. forwardRef (not a Hook)

forwardRef is mainly used to wrap native function components that do not support the ref attribute so that they can receive the ref attribute. For specific usage, please refer to React—ref attribute

forwardRef receives a function component and returns a function component that can receive the ref attribute

8. useMemo && useCallback

The React framework obtains different virtual DOMs by continuous rendering, and then performs DOM Diff to selectively update the page DOM. Therefore, after each render, there will be two new and old virtual DOMs for a short time.

For the case where a component contains child components, when the parent component triggers render, even if the props that the child component depends on have not changed, the child component will be rendered again because of the re-rendering of the parent component. This results in unnecessary rendering.

To solve unnecessary render, React provides the React.memo() interface to encapsulate subcomponents. as follows:

function App(){
  const [n, setN] = useState(0)
  const [m, setM] = useState(0)
  return (
    <div>
      I am the parent component n: {n}
      <button onClick={()=>setN(n+1)}>n+1</button>
      <button onClick={()=>setM(m+1)}>m+1</button>
      <Child value={m}/> // In this way, when the m value that the child component depends on does not change, the child component will not be re-rendered
    </div>
  )
}

const Child = React.memo((props)=>{
  useEffect(()=>{
    console.log('subcomponent rendered')
  })
  return (
  <div>I am a child component, and the value I receive from the parent component is: m {props.value}</div>
  )
})

However, there is a bug in the above method, because React.memo only compares the previous and next values ​​to see if the properties of the child component's dependencies have changed. If the dependency received by the child component from the parent component is an object, the comparison will be the address of the object, not the content inside the object. Therefore, each time the parent component is re-rendered, an object with a different address will be obtained. Although the value in the object has not been updated, the child component will re-render if it finds that the address has changed.

To solve this problem, the useMemo() Hook was introduced. useMemo is used to cache and reuse a function or an object when switching between old and new components, and regenerate it only when a dependency changes again.

The useMemo Hook takes a function that returns a function (or object) with no arguments. And useMemo must have a dependency to tell it when to recalculate. It is somewhat similar to the principle of Vue's calculated properties. as follows:

function App(){
  const [n, setN] = useState(0)
  const [m, setM] = useState(0)
  const onClickChild = useMemo(()=>{
    return () => {
      console.log(m)
    }
  },[m])  
  return (
    <div>
      I am the parent component n: {n}
      <button onClick={()=>setN(n+1)}>n+1</button>
      <button onClick={()=>setM(m+1)}>m+1</button>
      <Child value={m} onClick = {onClickChild}/>
    </div>
  )
}

const Child = React.memo((props)=>{
  useEffect(()=>{
    console.log('subcomponent rendered')
  })
  return (
    <div>
      I am a child component and I receive the value from the parent component as: m {props.value}
      <br/>
      <button onClick={props.onClick}>click</button>
    </div>
  )
})

useCallback() is the syntax sugar of useMemo. Because useMemo receives a function that returns a function (or object) without parameters, it would be a bit strange, so useCallback is provided to directly receive functions or objects.

const onClickChild = useMemo(() => {
      console.log(m)
  },[m])

9. useInperativeHandle

useInperativeHandel is a Hook related to ref.

We know that the ref attribute will directly assign the current component instance or native DOM to the current property of the passed in Ref object, and function components cannot receive the ref attribute because function components have no instances. But if the function component can receive ref after being encapsulated by React.forwardRef(), in general, this ref accesses the native DOM after being forwarded by the function component. But what if you want the external ref to point to more than just a native DOM in the function component? Is it possible to make the ref of a function component have more controllable operations like the ref in a class component pointing to an instance? React provides a way for function components to encapsulate the object pointed to by the returned ref, which is the useInteractiveHandle Hook.

9.1 An example

function App(){
  const myRef = useRef(null)
  useEffect(()=>{
    console.log(myRef.current.real)
    console.log(myRef.current.getParent())
  }, [])
  return (
    <div>
      I am the parent component <Child ref={myRef}/>
    </div>
  )
}

const Child = forwardRef((props, ref)=>{
  const childRef = useRef(null)
  useImperativeHandle(ref, ()=>{
    return {
      real: childRef.current,
      getParent(){
        return childRef.current.parentNode
      }
    }
  })
  return (
    <div>
      I am a child component and I have a child DOM
      <button ref={childRef}>button</button>
    </div>
  )
})

10. Custom Hooks

A custom Hook is a custom function. This function must start with use, and native Ract Hooks must be used in the function. The return value is generally an array or an object, which is used to expose the read and write interface of the Hooks.

Custom Hooks usually integrate the hooks used multiple times in function components. Try not to have multiple hook operations in function components.

The above is the detailed content of 30 minutes to fully understand React Hooks. For more information about fully understanding React Hooks, please pay attention to other related articles on 123WORDPRESS.COM!