reactjs - 当 React 中的父状态更改时停止重新渲染子组件

Question

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

我不要 DataTable重新渲染，因为没有任何改变。我尝试使用 React.memo我试过useEffect结合 useRef如果 Prop 相同，则在我的 DataTable 功能组件中不重新渲染。它不工作。当它的 Prop 都没有改变时，如何防止这个子组件重新渲染？

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 的每个渲染构建一个新函数，然后强制 child 重新渲染，因为它得到了新的 Prop 。这就是 useCallback 钩子(Hook)用于:

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>
   );
}