问题:
我正在编写一个通用的分页表组件。它由四个子组件组成,即TableToolbar
,TableHead
,TableBody
和TablePagination
。在最初渲染这些组件时,它们会多次重新渲染。每当它们的同级组件之一更新共享父组件的状态时,它们也不必要地重新渲染。但是,当我用React.memo(TableToolbar)
包装这些组件的export语句时,它们仅渲染一次,并且仅在其prop更改时才重新渲染。下面是一些代码来阐明我的意思:
const PaginatedTable: React.FC<PaginatedTableProps> = (props) => {
...
return (
<>
<TableToolBar
...
/>
<Table>
<EnhancedTableHead
...
/>
<TableBody
...
/>
</Table>
<TablePagination
...
/>
</>
);
}
例如,如果TablePagination
更新了任何PaginatedTable
状态,如果我在导出语句上不使用React.memo()
,其他三个组件也会重新呈现。
问题:
我使用React.memo()
是否合理?还是拥有不必要的初始渲染,并重新渲染兄弟组件而不是React.memo()
带来的优化权衡?