React中父状态更改时停止渲染子组件

Question

我有一个React组件，Activity，带有一个DataTable和一个Drawer（来自Material UI）。我根据Activity组件的状态isDrawerOpen属性设置是否打开抽屉。但是，当更新isDrawerOpen时，Activity，Drawer和DataTable都将重新呈现。

我不希望重新提交DataTable，因为没有任何变化。我尝试使用React.memo，并且尝试在DataTable功能组件中将useEffect与useRef结合使用，以在道具相同时不重新呈现。没用当其所有道具均未更改时，如何防止该子组件重新呈现？

const Activity = props => {
   const [isDrawerOpen, setIsDrawerOpen] = useState(false);
   const [tableData, setTableData] = useState(["banana", "orange", "apple"]);

   return (
      <div>
        <DataTable data={tableData} onRowClick={() => setIsDrawerOpen(true) } />
        <Drawer open={isDrawerOpen}>Some Drawer Content </Drawer>
      </div>
   )
}

Answer 1

尽管实际情况正在发生变化，但是……它正在onRowClick的每个渲染上构造一个新函数，由于它获得了新的道具，因此它迫使孩子重新渲染。这是useCallback挂钩的用途：

useCallback