假设我有一个函数,其行为不会随着时间而改变,并且我打算在useEffect
钩子中使用此函数,因此我将其作为满足react-hooks/exhaustive-deps
ESLint的依赖项规则:
const doSomething = useCallback((args) => {...}, []);
useEffect(() => {
doSomething();
}, [doSomething]);
这是Dan Abramov在A Complete Guide to useEffect中建议的解决方案,目前可以正常工作,但是我对React文档中对useCallback
和useMemo
的这些描述感到困惑: >
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();
}, []);
这里有什么我想念的吗?