React 中父状态发生变化时停止重新渲染子组件

Question

我有一个 React 组件 Activity，带有一个 DataTable 和一个 Drawer（来自 Material UI）。我根据isDrawerOpenActivity 组件状态的属性设置抽屉是否打开。然而，当isDrawerOpen更新时，Activity、Drawer、DataTable都会重新渲染。

我不想DataTable重新渲染，因为什么都没有改变。我尝试在 DataTable 功能组件中使用React.memo并尝试useEffect结合使用useRef，以便在 props 相同的情况下不重新渲染。它不起作用。当这个子组件的任何 props 都没有改变时，如何防止它重新渲染？

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

但实际上有些东西正在改变......它在每次渲染上构建一个新函数 for onRowClick，然后强制子进程重新渲染，因为它获得了新的道具。这就是useCallback钩子的用途：

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

   // Because `setIsDrawerOpen` never changes across renders, it's safe to
   // pass an empty deps array as the second argument.
   const onRowClick = useCallback(() => setIsDrawerOpen(true), []);

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