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>