如何让React.memo功能与孩子一起工作？
如何让React.memo功能与孩子一起工作？
提问于 2020-05-26 04:37:01
我有一个无状态的函数组件<Sidebar/>，它只是在div中返回它的子组件。这个组件是由<App/>呈现的，它维护自己的状态，并将该状态的一个元素传递到它的一个子级中。
const Sidebar = React.memo(({children}) => {
return <div className='sidebar'>{children}</div>
})
const App = (props) => {
const [counter, setCounter] = useState(0);
setInterval(() => {setCounter(counter => counter+1}), 1000)
return (
<Sidebar>
<ChildOne counter={counter}/>
</Sidebar>
)
}尽管在<Sidebar>上使用了React.memo，但每次状态改变时它都会重新呈现。我做了一些阅读和实验，问题似乎是当<ChildOne/>更新它的状态时，React实际上正在创建一个全新的对象，所以即使是简单的比较也会显示子对象在变化，因此边栏重新呈现。
如何让边栏停止重新渲染？
回答 1
Stack Overflow用户
发布于 2020-05-26 05:54:05
来自React.memo文档
React.memo仅检查属性更改。如果包装在React.memo中的函数组件在其实现中具有useState或useContext钩子，那么当状态或上下文发生变化时，它仍然会重新呈现。
在您的示例中，子对象是一个道具，每次counter更改时都会重新呈现，因此没有记忆。
我看到的唯一解决方案是不将状态值传递给侧边栏的子级。如果只需要第一次插值一个值，则使用refs，而不是状态值。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/62010396
复制相关文章
相似问题
腾讯云开发者
