Common usage of hook in react

1. What is a hook?

React hook is a method introduced in react 16.8, which enables functional components to have state, ref, lifecycle and other properties like class components.

2. Why does hook appear?

A functional component is an ordinary function in the global world. In non-strict mode, this points to window, but strict mode is turned on inside react. At this time, this points to undefined, and it cannot use state and ref like class components. The variables defined by functional components are local, and they will be redefined when the component is updated, and they cannot be stored. Therefore, before the appearance of hooks, functional components have great limitations, and class components are usually used to write code.

3. What are the commonly used hooks?

(1) useState

A hook that enables functional components to save states. The input parameter of this hook is the initial value of the state, and the return value is an array. The first parameter in the array is the value of the state, and the second parameter is the method to modify the state.

// Initialize const [ count, setCount ] = useState(0)
// Update setCount(count+1)

(2) useEffect

Functional components are used to simulate the hook of the life cycle. They can simulate the three stages of component mounting, updating, and uninstallation, namely componentDidMount, componentDidUpdate, and componentWillUnmount.

One of the parameters of useEffect is a function, which represents the content executed when the component is mounted and updated. Another function is returned in the function, which represents the function called when the component is about to be uninstalled.

The second parameter is optional and can be passed into an array. The array can be empty, which means that it does not depend on any state changes. That is, it is only executed when the component is about to be mounted. This hook will not be called if any subsequent state changes. One or more states can also be defined in the array, which means that this hook will be executed every time the state changes.

useEffect(()=>{
  // This simulates componentDidMount
}, [])

useEffect(()=>{
  // This simulates componentDidMount and executes componentDidUpdate when count changes
}, [count])

useEffect(()=>{
  return ()=>{
  // This simulates componentWillUnmount
  }
}, [])

(3) useContext

Before hook, we usually pass and get context values ​​through xxxContext.Provider and xxxContext.Consumer. After hook, the way of passing context remains unchanged, but the way of child elements getting context becomes simpler.

// Previous definition const CountContext = React.createContext()
 <CountContext.Provider value={{ count: 10 }}>
     <...customized components>
 </CountContext.Provider>

// Child element <CountContext.Consumer>
    { value => { console.log(value.count) }} //10
</CountContext.Consumer>

//Use context to obtain the method const countObj = useContext(CountContext)
console.log(countObj.count) // 10

(4) useRef

The usage of useRef is similar to createRef in class components. It returns a ref object, which remains unchanged throughout the life cycle of the function. Based on this feature, there are two common usages.

① Used on DOM elements or components, the instance object of the DOM element or class component can be obtained through the current attribute. It should be noted that whether it is useRef or createRef or ref in callback form or string form, it cannot be directly defined for functional components, because the this of functional components points to undefined and there is no instance object. It can only be defined to a DOM element in the functional component through forwardRef.

// This will bind the ref passed to the functional component to the input tag inside the functional component import React, { useRef, forwardRef } from 'react'

// Define a functional component using function expression const InputCom = forwardRef((props, ref) => {
    return <input ref={ref}/>
 })

export default function refDemo(){
    const comRef = useRef()
    return(<div>
       <InputCom ref={comRef}/>
         </div>)
  }

② Save a piece of data that will remain unchanged throughout its life cycle unless it is manually modified

const [ count, setCount ] = useState(0)
const prevCount = useState(count)
// When count changes, the component updates and saves the previous data of countuseEffect(()=>{
  prevCount.current = count
}, [count])

(5) useReducer

useReducer is equivalent to an upgraded version of useState. Its function is similar to useState, both of which are used to save state, but its difference is that you can define a pure function of reducer to process complex data.

// Define a pure reducer function to process data function reducer(prevState, action){
  switch(action.type){
    case 'increment':
      return {...prevState, count: prevState.count + 1 }
    case 'decrement':
      return {...prevState, count: prevState.count - 1 }
    default:
      return prevState
  }
}

// Initialize state const [ count, dispatch ] = useReducer(reducer, { count: 0 })
// Modify the state. The modification at this time requires dispatching an action so that the incoming reducer function can handle it dispatch({ type: 'increment' })

(6) useCallback

In functional components, each time the state is updated, the custom function must be re-declared and redefined. If the function is passed as props to the child component, it will cause unnecessary re-rendering of the child component. Sometimes the child component does not use the changed state of the parent component. At this time, useCallback can be used for performance optimization. It will return a memorized value for the function. If the dependent state has not changed, the function will not be recreated, and unnecessary re-rendering of the child component will not be caused.

import React, { useState, useCallback, memo } from 'react'
const AddBtn = memo((props)=>{ // Define a functional component using function expression return<button onClick={props.increment}>+1</button>
})

export default function CallBackPerformance(){
    const [ count, setCount ] = useState(0)
    const [ show, setShow ] = useState(true)
    const increment1 = () => {
        console.log('increment1 is called')
        setCount(count+1)
    }

   const increment2 = useCallback(()=>{ // Function optimized using useCallback console.log('increment2 is called')
         setCount(count+1)
    },[count])

    return(<div>
            <div>Current count: {count}</div>
            <AddBtn increment={increment1} name="1"/>
            <AddBtn increment={increment2} name="2"/>
            <button onClick={e => setShow(!show)}>Switch show</button>
        </div>)
}
// When the show state changes, the subcomponent increment1 will be re-rendered, but increment2 will not be re-rendered

(7) useMemo

useMemo also returns a memorized value. If the dependent content does not change, this value will not change. The difference between useMemo and useCallback is that useMemo needs to return a value in the passed function. This value can be an object or a function. The format is as follows.

useMemo(()=>{
  return { count }
}, [count])

// When using useCallback
   const increment2 = useCallback(()=>{
    setCount(count+1)
},[count])

//Use useMemo to simulate useCallback
const increment2 = useCallback(()=>{
    return ()=>{
        setCount(count+1)
    }
},[count])

// The application scenario of useMemo is when some complex calculations need to be performed.
//The calculated value has not changed, and does not need to be recalculated for every update import React, { useState, useMemo } from 'react'
const calculateNum = (count) => {
    console.log('total recalculated')
    let total = 0
    for(let i = 0; i <= count; i++){
        total += i
    }
    return total
}

export default function ComplexUseMemo(){
    const [ count, setCount ] = useState(10)
    const [ show, setShow ] = useState(true)
    const total = useMemo(()=>{
        return calculateNum(count)
    }, [count])
    return(<div>
        <div>{total}</div>
        <button onClick={e=>setCount(count+1)}>+1</button>
        <button onClick={e=>setShow(!show)}>Switch show</button>
    </div>)
}

(8) useImperativeHandle

This is used in conjunction with forwardRef. When we use forwardRef to specify the DOM element for the functional component, the parent component can arbitrarily operate the specified DOM element. The use of useImperativeHandle is to control such a behavior and specify the method of the child element that the parent element can operate.

import React, { useRef, useImperativeHandle, forwardRef } from 'react'
const InputComp = forwardRef((props, ref)=>{
  const childInputRef = useRef()
  useImperativeHandle(ref, ()=>({
    focus: ()=>{
      childInputRef.current.focus()
    }
  }), [childInputRef.current])

  return <input ref={childInputRef}></input>
})

export default function ImperativeHookDemo() {
  const inputRef = useRef()
  return(<div>
      <InputComp ref={inputRef}/>
      <button onClick={e=>inputRef.current.focus()}>Focus</button>
    </div>)
}

(9) useLayoutEffect

This method is similar to useEffect, but the order of execution is slightly different. useEffect is after the component is rendered and drawn to the screen, and useLayoutEffect is between render and drawing to the screen.

4. How to customize hook?

Hooks can only be defined in functional components and cannot be used in ordinary functions. If we want to use the above hook to encapsulate some methods for multiple components to call, we need to customize the hook. The name of the custom hook is to add "use" before the function name, and change the function name from saveInfo to useSaveInfo.

The above is the detailed usage of common hooks in react. For more information on the use of react hooks, please pay attention to other related articles on 123WORDPRESS.COM!