TL; DR;
useMemo
用来记住函数调用之间以及渲染之间的计算结果useCallback
是要记住渲染之间的回调本身(引用相等)useRef
是为了在渲染之间保留数据(更新不会触发重新渲染)useState
是在渲染之间保留数据(更新将触发重新渲染)
长版:
useMemo着重避免繁重的计算。
useCallback着重于另一件事:修复内联事件处理程序(如
onClick={() => { doSomething(...);}引起PureComponent子项重新呈现)时的性能问题(因为函数表达式每次都有参照性的不同)
也就是说,
useCallback它更接近
useRef,而不是一种记忆计算结果的方法。
查看文档,我确实同意它看起来令人困惑。
useCallback会返回一个已记忆的回调版本,仅当输入之一发生更改时才会更改。 当将回调传递给依赖于引用相等性的优化子组件以防止不必要的渲染
(例如,shouldComponentUpdate) 时, 此方法很有用。
例
假设我们有一个
PureComponent基于子对象的子对象
<Pure />,该子对象只有
props在更改后才会重新渲染。
每次重新渲染父级时,此代码都会重新渲染子级,因为内联函数每次都在引用方面有所不同:
function Parent({ ... }) { const [a, setA] = useState(0); ... return ( ... <Pure onChange={() => { doSomething(a); }} /> );}我们可以借助
useCallback:
function Parent({ ... }) { const [a, setA] = useState(0); const onPureChange = useCallback(() => {doSomething(a);}, []); ... return ( ... <Pure onChange={onPureChange} /> );}但是一旦
a更改,我们发现
onPureChange我们创建的处理程序函数以及为我们记住的React仍然指向旧
a值!我们有一个错误而不是性能问题!这是因为
onPureChange使用闭包来访问
a变量,该变量是在
onPureChange声明时捕获的。为了解决这个问题,我们需要让React知道在哪里删除
onPureChange并重新创建/记住(记忆)指向正确数据的新版本。为此,我们在
useCallback的第二个参数中添加a`了一个
依赖 项:
const [a, setA] = useState(0);const onPureChange = useCallback(() => {doSomething(a);}, [a]);现在,如果
a已更改,React将重新渲染组件。在重新渲染期间,它会发现的依赖关系
onPureChange有所不同,因此需要重新创建/存储新版本的回调。终于一切正常!



