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

Comments are closed.