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

IT技术 reactjs
2021-05-07 15:20:44

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

我不想DataTable重新渲染，因为什么都没有改变。如果props相同React.memo，我已经尝试使用并且我已经尝试useEffect在useRef我的 DataTable 功能组件中结合使用不重新渲染。它不工作。当它的 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>
   )
}
1个回答

但是实际上有些事情正在发生变化......它在每次渲染上构建一个新函数 for onRowClick，然后强制孩子重新渲染，因为它获得了新的props。这就是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>
   );
}
其它你可能感兴趣的问题
上一篇将动态生成的复选框添加到react表并捕获行数据 下一篇React Native TextInput setState() 问题