react hooks

• useState

import { useState } from 'react'
function Child () {
    const [count, setCount] = useState(0)
    const changeCount => {
        setCount(count+1)}return (<button onClick={changeCount}></button>)}Copy the code

The first argument to the useState method is the initial value of the count variable. The setCount method directly changes the value of count, which causes the page component to re-render

• useEffect

import { useEffect, useState } from 'react'
function Child () {
    const [count, setCount] = useState(0)
    // The second parameter is not passed
    useEffect(() = >{})const [name, setName] = useState('shark')
    The second argument is an empty array
    useEffect(() = >{}, [])const [age, setAge] = useState(18)
    // The second array has values
    useEffect(() = >{
    }, [age])
}
Copy the code

1. The second argument is not passed, listening for all variables defined by useState
2. The second argument is an empty array and is executed only once when the component is built
3. The second array has a value, which is executed when the array is initialized and the corresponding variable is updated

• useMemo

The value of useState cannot be modified on useMemo, which will cause an infinite loop

import { useMemo, useEffect, useState } from 'react'
function Child () {
    const [count, setCount] = useState(0)
    // useMemo executes first when the component is rendering, useEffect executes first when the component is mounted
    useEffect(() = >{
        console.log('useEffect')
    }, [])
    useMemo(() = >{
        console.log('useMemo')}, []return <div>UseMemo prints before useEffect</div>
}
Copy the code

• useRef

// useRef returns the object's current attribute as a parameter passed in for initialization
// Objects remain constant throughout the life of the component
function TestUseRef() {
    const [count, setCount] = useState(0)
    const refTest = useRef(8)
    // refTest.current 8
    const refCount = useRef()
    // refCount.current undefined
    if(! refCount.current) { refCount.current = count; }return <button onClick={()= > setCount(count+1)}>add</button>
}
Copy the code

// Control the ReactDOM action
function TestUseRef() {
    const inputRef = useRef()
    input = inputRef
    function getFocus() {
        inputRef.current.focus()
    }
    return (
        <>
            <input type="text" ref={inputRef} />
            <button onClick={getFocus}>Get focus</button>
        </>)}Copy the code

• useImperativeMethods

Child components actively expose methods to parent component calls

function Child (props, parentRef){
    const childRef = useRef()
    useImperativeHandle(parentRef, () = > {
        return {
            / / focus
            focus(){
                childRef.current.focus()
            }
        }
    })
    function setValue (){
        childRef.current.value = 33
    }
    return <input ref={childRef} />
}
Child = forwardRef(Child);
function Parent (){
    const parentRef = useRef()
    function getFocus () {
        / / effective
        parentRef.current.focus()
    }
    function setValue(){
        / / is invalid
        parentRef.current.value = 22
        // Invalid and an error is reported
        parentRef.current.setValue()
    }
    return 
    <>
        <Child ref={parentRef}></Child>
        <button onClick={getFocus}>Let the input box get focus</button>
        <button onClick={setValue}>Set the input field to 33</button>
    </>
}
Copy the code

• useMutationEffect

• useLayoutEffect

• useContext createContext

const MyContext = createContext()
Copy the code

• useReducer

• useCallback