react hooks

带use开头的react方法都是hook 例：useState、useEffect、useMemo、useRef等

useState

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

useState方法的第一个参数是count变量的初始值，setCount方法入参直接修改count的值,count值修改会引起页面组件重新渲染

useEffect

1. 第二个参数不传，监听所有useState定义的变量
2. 第二个参数为空数组，只在组件构建时执行一次
3. 第二个数组有值，初始化和数组对应的变量更新的时候都会执行
4. 第一个参数返回一个函数，会在组件销毁时/父组件state变化时执行

import { useEffect, useState } from 'react'
function Child () {
    const [count, setCount] = useState(0)
    // 第二个参数不传
    useEffect(()=>{
    })

    const [name, setName] = useState('鲨鱼')
    // 第二个参数为空数组
    useEffect(()=>{
    }, [])

    const [age, setAge] = useState(18)
    // 第二个数组有值
    useEffect(()=>{
    }, [age])
}

import { useEffect, useState } from 'react'

function Farter () {
    const [count, setCount] = useState(0)
}
function Child () {
    useEffect(()=>{
        // 销毁Child组件和Farter组件count变更时都会执行
        return () => {
            console.log('被执行了')
        }
    })
}

useMemo

用法和useEffect一样，不可以在useMemo修改useState的值会导致死循环

import { useMemo, useEffect, useState } from 'react'
function Child () {
    const [count, setCount] = useState(0)
    // useMemo在组件渲染时执行第一次，useEffect在组件挂载后执行第一次
    useEffect(()=>{
        console.log('useEffect')
    }, [])
    useMemo(()=>{
        console.log('useMemo')
    }, []
    return <div>useMemo比useEffect先打印</div>
}

useRef

// useRef返会的是对象current属性为初始化传入的参数
// 对象在组件的整个生命周期内保持不变
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>
}

// 操控ReactDOM动作
function TestUseRef() {
    const inputRef = useRef()
    input = inputRef
    function getFocus() {
        inputRef.current.focus()
    }
    return (
        <>
            <input type="text" ref={inputRef} />
            <button onClick={getFocus}>获得焦点</button>
        </>
    )
}

useImperativeMethods

子组件主动暴露方法给父组件调用

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 () {
        // 有效
        parentRef.current.focus()
    }
    function setValue(){
        // 无效
        parentRef.current.value = 22
        // 无效并且报错
        parentRef.current.setValue()
    }
    return 
    <>
        <Child ref={parentRef}></Child>
        <button onClick={getFocus}>让输入框获取焦点</button>
        <button onClick={setValue}>设置输入框的值为33</button>
    </>
}

useMutationEffect

useLayoutEffect

useContext createContext

const MyContext = createContext()

useReducer

useCallback