如何讓 React.memo 功能與孩子一起工作？

Question

我有一個無狀態的功能組件<Sidebar/> ，它只是在一個 div 中返回它的孩子。 此組件由<App/>呈現，該組件維護自己的 state，並將該 state 的元素“越過”側邊欄的“頂部”傳遞給它的一個子項。

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，但它會在每次 state 更改時重新渲染。 我做了一些閱讀和實驗，問題似乎是當<ChildOne/>更新它的 state 時，React 實際上是在創建一個全新的 object，所以即使是淺表的比較也顯示孩子們在變化，因此側邊欄重新呈現。

如何讓側邊欄停止重新渲染？

Answer 1

來自React.memo文檔

React.memo 僅檢查 prop 更改。 如果包裝在 React.memo 中的 function 組件在其實現中具有 useState 或 useContext Hook，它仍會在 state 或上下文更改時重新呈現。

在您的情況下，作為道具的 children 每次counter更改時都會重新渲染，因此沒有記憶。

我看到的唯一解決方案是不將 state 值傳遞給側邊欄子項。 如果您只需要第一次插入一個值，則使用 refs，而不是 state 值。