我有一个React组件Activity，带有一个DataTable和一个Drawer（来自Material UI）。我根据isDrawerOpen活动组件的状态属性设置是否打开抽屉。但是，isDrawerOpen更新后，Activity，Drawer和DataTable都将重新呈现。
我不想DataTable投降，因为什么都没有改变。我尝试使用，React.memo并且尝试useEffect在useRefDataTable功能组件中结合使用，以在道具相同时不重新呈现。没用 当其所有道具都没有变化时，如何防止该子组件重新呈现？
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>
)
}
实际情况正在发生变化...它正在为的每个渲染上构造一个新函数，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>
);
}
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句