Question

是否值得通过顶层组件上的useSelector钩子定义树中所有组件所需的所有必需的reducer实体，然后通过上下文api将它们传递到需要它们的地方？

正如我在useSelector钩子之前读过的那样，它将检查引用的相等性，但不会考虑父级重新呈现，因此，如果我在顶级组件中定义它们，然后通过上下文api传递它们，那么在性能方面会有所帮助吗？

有两种方法：

Products(){
<ProductsTable />
<ProductsSidebar />
}

ProductsTable(){
const data = useSelector...
const categories = useSelector...
}

ProductsSidebar(){
const anotherData = useSelector...
}

VS

Products(){
const data = useSelector...
const categories = useSelector...
const anotherData = useSelector...
return (
<Products.Provider value={data, categories, anotherData}>
<ProductsTable />
<ProductsSidebar />
</Products.Provider>
);
}

ProductsTable(){
const {data, categories} = React.useContext(ProductsContext);
}

ProductsSidebar(){
const {anotherData} = React.useContext(ProductsContext);
}

这只是一个简单的示例，但让我们考虑一下Products组件具有很多嵌套子组件的情况。

Answer 1

在第二个示例中，每次状态更改（data，categories，anotherData）时，所有组件都会重新呈现，因为重新呈现父组件时，它将创建一个新实例用于上下文的对象：

<Products.Provider value={{data, categories, anotherData}}>

在您的情况下，无需将状态提升到父组件并创建其他上下文，只需将其保留为选项1。在这种情况下，对存储进行更改时，只会更改相应的组件。

将useSelector挂钩与顶层上下文API结合使用可提高性能

1 个答案: