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

Question

我试图了解在一种情况下使用普通 setState V/s 导致功能组件重新渲染的确切差异，另一种情况使用功能状态更新

相关代码sn-p如下

案例 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/react-hooks-understanding-component-re-renders-9708ddee9928#204b

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

文章里说

"谢天谢地，useState 钩子中的 setter 函数支持函数 变体来拯救我们。而不是调用 setWatchlist 使用更新的监视列表数组，我们可以改为发送一个函数 获取当前状态作为参数"

但是，我有点困惑是否因为我们使用空数组（因为 [] 在渲染之间没有变化）而阻止了子组件的重新渲染，因为使用了 useState 钩子的 setter 变体而阻止了 V/s？

Answer 1

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

答案非常简单。在版本 (2) 中，您提供了从组件挂载时开始的稳定回调引用永不改变，而在 (1) 中，回调引用在依赖项发生时改变。请记住，当状态或 props 更新时 React 组件会重新渲染（新的回调引用是新的 prop 引用）或 当父组件重新渲染时。由于 onRemove 属性在 (1) 中更新，它会触发重新渲染。