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

更新

全文link 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"

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

Answer 1

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

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

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

React prevent re-render by using functional variant of useState

javascript

reactjs

react-hooks

use-state

usecallback