如何使用React.memo来防止重呈现？
我有两个功能部件。一个保持一个递增的数字作为状态，并显示它。它的子键是一个按钮，它接收increment函数作为道具，并在单击时调用它。
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>
);
};当App重新呈现时，我希望避免重新呈现IncrementButton。
文档建议使用React.memo来完成这个任务，但是当我尝试下面的示例时，它并没有帮助。
const IncrementButton = React.memo(props => {
return <button onClick={props.increment}>Increment</button>;
});我是不是遗漏了什么？什么是正确的方式回忆录一个组件，使它不重新呈现？
回答 1
Stack Overflow用户
发布于 2019-07-30 19:10:34
问题是，每次，它都会创建一个全新的增值功能。因此，每次添加按钮呈现时，它都有一个全新的props.increment。因此，React.memo实际上什么也不做，因为道具不断变化，所以没有呈现可以跳过。
这样做的修正是使增量函数不再每次都被重新创建。您可以使用useCallback来完成这一任务，因此第一次通过如下所示：
const increment = useCallback(
() => setCount(count + 1),
[count]
)这将只创建一次增量函数，然后回传结果，直到计数发生变化。不幸的是，计数是唯一可以真正改变的东西，所以我们不得不在大部分时间重新创建这个函数。因此，我们需要进行另一项修改: setCount允许您将一个函数传递给它，而不是将count +1传递给它。将使用前面的值调用此函数，以便您可以将新值建立在此基础上：
const increment = useCallback(
() => setCount(oldCount => oldCount + 1),
[]
);现在您有了一个只创建过一次的增量函数，它反过来使IncrementButton对其道具没有任何更改，因此React.memo可以完成它的工作并跳过重命名。
https://stackoverflow.com/questions/57278392
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号