简易总结react-hook三大进阶

react-hook最重要的三大进阶

import { useCallback, useMemo, useReducer } from "react"

1、每个的一句话简单总结

useCallback    // 限制函数每次都刷新的方法,优化性能等
useMemo    // 限制参数每次都刷新的方法,优化性能等
useReducer    // 自定义方法的创建值和修改值

2、useCallback（函数相关）

const test = useCallback(() => {
     return (
         <React.Fragment>
             {test2 + test1}
         </React.Fragment>
     )
}, [test1])　　// 只有在test1发生变化的时候才真正发生变化

2　useMemo（参数相关）

const test3 = useMemo(() => {
     return test1 + test2
}, [test1])   // 只有在test1发生变化的时候才真正发生变化

3、useReducer

//  首先定义内置方法         
const test4 = (n: number, p: number) => {
    return n + p
}

// 10是初始值，代表test4里的p参数   
const [num, fun] = useReducer(test4, 10)

// 调用
<div onClick={() => { fun(5) }}>
    {num}
</div>