javascript - 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/react-hooks-understanding-component-re-renders-9708ddee9928#204b
我对如何防止重新渲染子组件感到有些困惑。
文章里说

"Thankfully, setter function from useState hook supports a functional variant which comes to our rescue. Instead of calling setWatchlist with the updated watchlist array, we can instead send a function that gets the current state as an argument"

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

Answer 1

是否使用功能状态更新与您所问的问题无关。您似乎在问为什么 (1) 具有依赖项的回调会触发重新渲染，而 (2) 具有空依赖项的回调。
答案非常简单。在版本 (2) 中，您从组件挂载时提供了一个稳定的回调引用，从不改变，而在 (1) 中，回调引用在依赖项发生变化时发生变化。请记住 React 组件在 state 或 时重新渲染 Prop 更新(新的回调引用是新的 Prop 引用)或 当父组件重新渲染时。自 onRemove prop 在 (1) 中更新它会触发重新渲染。