我是否正确使用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 (将#修改为@）