我对将useEffect与useCallback

时间:2020-07-30 13:02:15

标签: javascript reactjs react-hooks eslint

假设我有一个函数,其行为不会随着时间而改变,并且我打算在useEffect钩子中使用此函数,因此我将其作为满足react-hooks/exhaustive-deps ESLint的依赖项规则:

const doSomething = useCallback((args) => {...}, []);
useEffect(() => {
  doSomething();
}, [doSomething]);

这是Dan Abramov在A Complete Guide to useEffect中建议的解决方案,目前可以正常工作,但是我对React文档中对useCallbackuseMemo的这些描述感到困惑: >

useCallback(fn, deps)等效于useMemo(() => fn, deps)

您可以依靠useMemo作为性能优化,而不是语义保证。将来,React可能会选择“忘记”一些以前记忆的值,并在下一次渲染时重新计算它们,例如释放屏幕外组件的内存。编写代码,使其在没有useMemo的情况下仍然可以工作,然后添加代码以优化性能。

阅读这些内容后,我的印象是,没有useMemo,以上代码将无法工作,因为useMemo(因此useCallback)是一种性能优化方法,并且不是语义保证,所以我用doSomething包装的useCallback函数等效于:

const doSomething = useMemo(() => (args) => {...}, []);

将来使用其记忆值“ React可能会忘记”,而我的useEffect回调将再次错误运行。

有时我会使用refs存储一个感觉安全但又不必要的函数:

const doSomething = useRef((args) => {...});
useEffect(() => {
  doSomething.current();
}, []);

这里有什么我想念的吗?

0 个答案:

没有答案