Reactjs 如何使用React.memo防止重新渲染？

我有两个功能组件。一个保持递增的数字作为状态并显示它。它的子项是一个按钮，它接收作为道具的

增量

函数，并在单击时调用它

const IncrementButton = props => {
  return <button onClick={props.increment}>Increment</button>;
};

const App = () => {
  const [count, setCount] = React.useState(0);
  const increment = () => setCount(count + 1);

  return (
    <div className="App">
      <h1>{count}</h1>
      <IncrementButton increment={increment} />
    </div>
  );
};

---

我错过什么了吗？如何正确地记忆组件，使其不会重新渲染？

问题是，每次应用程序重新渲染时，它都会创建一个全新的增量函数。因此，每次呈现Incrementbutton时，它都会有一个全新的props.increment。因此，React.memo实际上什么都不做，因为道具不断变化，因此不能跳过任何渲染

解决方法是使它不会每次都重新创建增量函数。您可以使用useCallback执行此操作，因此第一次传递可能如下所示：

const increment = useCallback(
  () => setCount(count + 1), 
  [count]
)

这将只创建一次增量函数，然后记录结果，直到计数发生变化。不幸的是，计数是唯一可以真正改变的东西，所以我们最终不得不在大部分时间重新创建这个函数。因此，我们需要做另一个修改：setCount允许您将函数传递给它，而不是将count+1传递给setCount。此函数将使用上一个值调用，以便您可以基于此值创建新值：

const increment = useCallback(
  () => setCount(oldCount => oldCount + 1),
  []
);

---

现在您有了一个只创建过一次的增量函数，它反过来让IncrementButton对其道具不做任何更改，从而做出反应。memo可以完成它的工作并跳过重新渲染。

感谢您的解释！这真的让我明白了发生的一切。我不知道useState设置函数也接受函数参数，这就解决了这个问题。

const increment = useCallback(
  () => setCount(oldCount => oldCount + 1),
  []
);