我是否正确使用react.memo()

时间:2020-09-10 17:53:07

标签: javascript reactjs react-usememo

问题:

我正在编写一个通用的分页表组件。它由四个子组件组成,即TableToolbarTableHeadTableBodyTablePagination。在最初渲染这些组件时,它们会多次重新渲染。每当它们的同级组件之一更新共享父组件的状态时,它们也不必要地重新渲染。但是,当我用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()带来的优化权衡?

0 个答案:

没有答案