Question

我有一个无状态功能组件<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实际上正在创建一个全新的对象，因此即使是比较浅的比较也表明子级正在发生变化，因此Sidebar re -渲染。

如何使补充工具栏停止重新渲染？

Answer 1

来自React.memo文档

React.memo仅检查道具更改。如果您的功能组件包装在React.memo中，其包装盒中有一个useState或useContext Hook 实施时，状态或上下文更改时仍会重新呈现。

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

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

如何使React.memo功能与孩子一起使用？

1 个答案: