自定义hook：useUpdate 强制刷新

useUpdate 会返回一个函数，调用该函数会强制组件重新渲染。

import {useCallback, useState} from "react";

const useUpdate = () => {
    const [_, setState] = useState({})
    return useCallback(() => setState({}), []);
}
export default useUpdate;

为什么使用useCallback

使用useCallback是为了缓存函数，不使用useCallback也是可以实现的。使用useCallback的好处在哪？我们通过以下代码测试一下

首先在增加一个useEffect，点击刷新按钮，监听update如果发生变化的时候打印一个输出：update change

...
 function App() {
    const update = useUpdate();
    const time = new Date().getTime();

    useEffect(() => {
        console.log('update change')
    }, [update])

    return (
        <div className="App">
            {time}
            <div onClick={update}>刷新</div>
        </div>
    );
}

export default App;
...

使用useCallback的时候我们发现，只有首次的时候会输出：“update change”，说明后续改变的时候，虽然重新render但是update的函数引用是不变的。

• 首次进来
• 调用刷新

然后我们修改一下代码，不使用useCallback

const useUpdate = () => {
    const [_, setState] = useState({})
    return  ()=>setState({});
    // return useCallback(() => setState({}), []);
}
export default useUpdate;

• 我们点击的时候发现触发了update change，每点击一次就触发一次“update change”的输出。