React 常用 Hook 汇总参考

in 前端React with 0 comment

useEffect 副作用

不带参数的情况下，每次更更新都会触发执行

useEffect(() => {})

不带参数返回值


useEffect(() => { return () => {
    // 组件挂载完成时执行
}})

带的情况下，只会执行第一次渲染

useEffect(() => {}, [])

带参数返回值


useEffect(() => { return () => {
    // 组件销毁时执行  
}}，[count])

React.memo

一般来说，当 useState 更新时，会触发所有当前组件下所有组件的渲染，包括子组件。

当有些子组件，没有任何 props 参数 或者 没有涉及到 useState 数据修改的值，他们是不希望更新的

所以可以

function Child({seconds}){
    console.log('只要不是 seconds 变化，我都不会render');
    return (
        <div>I am update every {seconds} seconds</div>
    )
};
export default React.memo(Child)

也支持传递 第二个参数 控制是否刷新

function Child({seconds, age}){
    console.log('就算 seconds 变了，age 没变的情况下，我都不会render');
    return (
        <div>I am update every {seconds} seconds</div>
    )
};
function areEqual(prevProps, nextProps) {
    if(prevProps.age === nextProps.age){
        return true
    }else {
        return false
    }

}
export default React.memo(Child, areEqual)

useCallback 依赖项缓存

useCallback(回调函数，[依赖值])

会根据依赖项目的变化而自动缓存。 第一次执行的时候，会缓存当前的执行计算结果。除非依赖项发生变化，不然如下情况，无论执行多少次

handleClick1 ，都不会发生变化

const [value, setValue] = useState(0)
const [message, setMessage] = useState("第一次执行")
const handleClick1 = useCallback(()=> {
    console.log(message)
    setMessage("你好")
}, [value]);

当依赖项修改为 messsage ，会相应的重新缓存计算结果

handleClick1 执行得到的永远的是 message 的结果

...
const handleClick1 = useCallback(()=> {
    console.log(message)
    setMessage("你好")
}, [message]);

useMemo：性能优化

useMemo(回调函数，[依赖值])

有点像 React.memo

默认情况下，只要数据发生变化，就会触发更新，使用 useMemo 包裹函数

const getDoubleCount = useMemo(() => {
    console.log('我只会渲染一次');
    return count * 2;
}, []);
return (
    <div>
        <h2>value: {value}</h2>
        <h2>doubleCount: {getDoubleCount()}</h2>
        <button onClick={() => setValue(value + 1)}>value+1</button>
    </div>
);

useRef

const user = useRef({})
user.current = {
    name: ""
}

任何地方使用，user.current

他的修改 无法触发组件的修改

使用场景：适用于某项变量 不涉及到ui变化的基础数据

useReducer

useState 的替代方案

https://zhuanlan.zhihu.com/p/343298490

本文由 邓尘锋 创作，采用 知识共享署名4.0 国际许可协议进行许可
本站文章除注明转载/出处外，均为本站原创或翻译，转载前请务必署名
最后编辑时间为: Feb 17, 2023 at 04:22 pm

← → ↓ ↑
Comments are closed.