如何解决我是否正确使用react.memo
问题:
我正在编写一个通用的分页表组件。它由四个子组件组成,即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()
带来的优化权衡?
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。