reactjs - 如何让 React.memo 功能与 child 一起工作？

Question

我有一个无状态功能组件 <Sidebar/>它只是在一个 div 中返回它的 child 。此组件由 <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 实际上是在创建一个全新的对象，因此即使是浅层比较也会显示子项发生了变化，因此 Sidebar 会重新呈现。

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

Answer 1

来自 React.memo文档

React.memo only checks for prop changes. If your function component wrapped in React.memo has a useState or useContext Hook in its implementation, it will still rerender when state or context change.

在你的例子中，children 是一个 Prop ，每次 counter 改变时都会重新渲染，所以没有内存。

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