This is the 23rd day of my participation in Gwen Challenge

1, useImperativeHandle

1, use

useImperativeHandle(ref, createHandle, [deps])
Copy the code

UseImperativeHandle allows you to customize the instance value exposed to the parent component when using a ref. In most cases, imperative code like ref should be avoided. UseImperativeHandle should be used with the forwardRef:

UseImperativeHandle (ref(passed), ()=>{}, [])Copy the code

2, for example,

import './App.css'; import React , { useRef, forwardRef , useImperativeHandle, useState } from 'react' const ForWard = forwardRef((props, ref) => { return ( <> <h2 ref={ref}>12345</h2> <h2>JamieDawn</h2> </> ) }) const Imperative = forwardRef((props, ref) => { const inputRef = useRef(null) const [count, setCount] = useState(0) const [num, setNum] = useState(0) useImperativeHandle(ref, ()=> { console.log('useImperativeHandle') return ({ name: 'zlm', focus: ()=> { inputRef.current.focus() } }) }, [num]) return ( <> <h2>count{count}</h2> <h2>num{num}</h2> <input type="text" ref={inputRef} /> <button onClick={()=>{setCount(count + 1)}}>setCount</button> <button onClick={()=>{setNum(num + 1)}}>setNum</button> </> ) }) function App() { const hRef = useRef(null) const el = useRef(null) return ( <> <ForWard ref={hRef}/> <Imperative <button onClick={()=> {forWardRef</button> <button onClick={()=> {forWardRef</button> <button onClick={()=> { Console. log(el.current) el.current. Focus ()}}> Obtain Imperative</button> </>; } export default App;Copy the code

2, useLayoutEffect

1, use

Its function signature is the same as useEffect, but it calls Effect synchronously after all DOM changes. You can use it to read DOM layouts and trigger rerenders synchronously. The update schedule inside useLayoutEffect is refreshed synchronously before the browser performs the drawing.

Use standard Useeffects whenever possible to avoid blocking visual updates.

UseEffect is executed after componentDidMount. UseLayoutEffect is executed before the browser draws. It blocks component mounting

2, for example,

import './App.css';
import React , { useEffect, useLayoutEffect } from 'react'



function App() {
    useEffect(() => {
        console.log('useEffect')
        return ()=> {
            console.log('useEffect-return')
        }
    })
    useLayoutEffect(() => {
        console.log('useLayoutEffect')
        return () => {
            return () => {
                console.log('useLayoutEffect-return')
            }
        }
    })
  return (
    <>
      <h2>useLayoutEffect</h2>
     </>
  );
}

export default App;
Copy the code

3, the implementation of

UseLayoutEffect: useLayoutEffect: useLayoutEffect: useLayoutEffect: useLayoutEffect: useLayoutEffect: useLayoutEffect Useeffect-return Last: useEffect is executedCopy the code

3, useReducer

1, use

const [state, dispatch] = useReducer(reducer, initialArg, init);
Copy the code

An alternative to useState. It receives a Reducer of the form (state, action) => newState and returns the current state and its accompanying dispatch method. (If you’re familiar with Redux, you already know how it works.)

UseReducer can be more useful than useState in some situations, such as when the state logic is complex and contains multiple subvalues, or when the next state depends on the previous state. Also, using useReducer can improve performance for components that trigger deep updates

Because you can pass dispatches to child components instead of callback functions.

2,

Reducer is a function 2, and useReducer() is a function with three parameters. The first parameter is Reducer, the second parameter is initial value, and the third parameter is Reducer. Init 3, useReducer() returns an array (state, dispatch), const [state, dispatch] = useReducer(reducer, initial)Copy the code

3, for example,

import './App.css'; import React , { useReducer } from 'react' function App() { const [state, dispatch] = useReducer((state, action)=> { switch(action.type) { case 'setname': return {... state, name: action.name} case 'setage': return {... State, age: action.age} default: return state}}, {name: 'ZLM ', age: 19}) return (<> <h2> name: {state.name}, age: {state.age}</h2> <button onClick={ ()=> { dispatch({ type: 'setname', name: 'Jamied' }) }}>setName</button> <button onClick={()=> { dispatch({ type: 'setage', age: '30' }) }}>setAge</button> </> ); } export default App;Copy the code

Note:

UseReducer, useContext, createContext = redux Enables the redux functionCopy the code