React通过使用useState的函数变体来防止重新渲染

Question

我试图了解在使用普通setState V/s和使用功能状态更新的情况下如何重新呈现功能组件的确切差异

相关代码片段如下

情形1:导致组件重新呈现

const onRemove = useCallback(
tickerToRemove => {
setWatchlist(watchlist.filter(ticker => ticker !== tickerToRemove));
},
[watchlist]
);

情况2:不引起重新渲染

const onRemove = useCallback(tickerToRemove => {
setWatchlist(watchlist =>
watchlist.filter(ticker => ticker !== tickerToRemove)
);
}, []);

两个用例的完整示例可以在;

https://codesandbox.io/s/06c-usecallback-final-no-rerenders-bsm64?file=/src/watchlistComponent.js

https://codesandbox.io/s/06b-usecallback-usememo-ngwev?file=/src/watchlistComponent.js: 961 - 970

更新

全文链接https://medium.com/@guptagaruda反应- hook -理解-组件- re -显示- 9708 ddee9928 # 204 b

我对如何防止子组件的重新渲染有点困惑。

文章中说

"值得庆幸的是，useState钩子中的setter函数支持函数能拯救我们的变种。而不是调用setWatchlist对于更新后的监视列表数组，我们可以发送一个函数获取当前状态作为参数">

然而，我有点困惑是否因为我们使用空数组而阻止了子组件的重新渲染(因为[]不会在渲染之间改变)V/s因为使用useState钩子的setter变体而被阻止?

Answer 1

是否使用功能状态更新与您所询问的问题无关。你似乎在问为什么(1)带依赖的回调触发渲染器，而(2)带空依赖的回调。

答案其实非常简单。在版本(2)中，当组件挂载时，您提供了一个稳定的回调引用，该引用从不改变，而在版本(1)中，当依赖项发生变化时，回调引用会发生变化。记住，React组件在state或props时呈现。update (一个新的回调引用是一个新的prop引用)或当父组件呈现时。由于onRemove道具在(1)中更新，它触发了渲染。