Reactjs 重复使用嵌套选择器和非嵌套选择器之间的差异

我看过许多redux的示例代码，发现我们主要以两种方式使用useSelector

嵌套

从“React”导入React
从“react redux”导入{useSelector}
导出常量UserComponent=（）=>{
const name=useSelector（（state）=>state.user.name）
const age=useSelector（（state）=>state.user.age）
返回{name}，{age}
}

非嵌套

从“React”导入React
从“react redux”导入{useSelector}
导出常量UserComponent=（）=>{
const user=useSelector（（state）=>state.user）
返回{user.name}，{user.age}
}

如您所见，使用方法2，我将最终节省大量代码重复，并且只需要创建一个选择器。

---

因此，我想知道这两种方法之间的区别、性能优势等。这两种方法之间存在差异，让我们深入研究

useSelector

钩子，看看它是如何工作的。假设你是这个钩子的创建者，你将它定义为：

//这是您的redux状态
const state={user:{name:'Haseeb'，年龄：10}}；
//定义我们自己的选择器挂钩
常量useSelector=（selectorFunction）=>{
const accessedProperty=选择器函数（状态）；
//accessedProperty将包含从Selector函数返回的任何内容
返回accessedProperty；
}

现在，让我们用我们的钩子

// nested, subscribe to just the name property in user
const name = useSelector((state) => state.user.name);

// non-nested, subscribe to the complete user object
const user = useSelector((state) => state.user);

谈到性能，在调度操作时，

useSelector（）

将对以前的选择器结果值和当前结果值进行参考比较。如果它们不同，组件将被迫重新渲染。如果它们相同，组件将不会重新渲染

因此，在嵌套方法中，

useSelector

只会对

name

值进行引用相等比较。在非嵌套方法中，

useSelector

将对完整的

user

对象进行引用相等比较。在这两种情况下，比较的结果决定组件是否应重新渲染。非嵌套方法很可能会导致比嵌套方法更多的重新渲染，因为非嵌套方法订阅的值比嵌套方法多

---

多次调用

useSelector（）

，每次调用返回一个字段值，但如果不需要进一步的性能优化，也可以使用一个

useSelector（）

，这取决于您需要的字段，如果您需要来自

user

的多个字段，您不希望为每个字段创建一个单独的

useSelector

，但是如果您只需要一个或两个字段，如

name

和

age

，那么最好使用2个

useSelector

，这样您就可以在组件中直接引用它。

    import React from 'react'
    import { useSelector } from 'react-redux'
    
    export const UserComponent = () => {
      const user = useSelector((state) => state.user)
      return <div>{user.name}, {user.age}</div>
    }

// nested, subscribe to just the name property in user
const name = useSelector((state) => state.user.name);

// non-nested, subscribe to the complete user object
const user = useSelector((state) => state.user);