如何让 React.memo 功能与孩子一起工作？答案

【问题标题】：How to get React.memo functionality to work with children?如何让 React.memo 功能与孩子一起工作？
【发布时间】：2020-05-25 20: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实际上是在创建一个全新的对象，所以即使是浅层的比较也会显示孩子们在变化，因此侧边栏会重新渲染.

如何让边栏停止重新渲染？

【问题讨论】：

您是否尝试过使用memo，您可以向我们展示该代码吗？
我已经编辑了代码以使其更加明确。
如果不查看您的实现，很难说出哪里出了问题。我尝试使用ChildOne 中的内部状态重新创建问题，并记住Sidebar。这是实现codesandbox。看看控制台，在我的情况下 Sidebar 从未呈现。您可以编辑沙箱以使用您的实施重新创建问题。
我意识到我把场景过于简单化了。我已编辑 - 希望对您有所帮助。

标签： reactjs

【解决方案1】：

来自React.memo docs

React.memo 仅检查 prop 更改。如果你的函数组件包裹在 React.memo 里面有一个 useState 或者 useContext Hook 实现，它仍然会在状态或上下文发生变化时重新渲染。

在您的情况下，作为道具的 children 每次 counter 更改时都会重新渲染，因此没有记忆。

我看到的唯一解决方案是不将状态值传递给侧边栏子项。如果您只需要在第一次插入一个值，则使用 refs，而不是 state 值。

【讨论】：

孩子之间的肤浅比较怎么能准确地显示孩子在道具上的变化？