React Hooks依赖数组中能否指定useSelector返回值的属性？

完全可以直接在useEffect的依赖数组中指定useSelector返回状态对象的具体属性，不需要强制将整个状态对象放入依赖列表，两种写法的差异和适用场景如下：

• useEffect对依赖项的对比规则是逐一对数组内的每个值做Object.is浅比较，只要你在依赖数组中列出的foo.name、foo.title值没有发生变化，effect就不会重复执行，这种写法本身完全符合React Hooks的规则，不存在语法或逻辑问题。
• 如果你在effect逻辑中只用到了foo下的name、title两个字段，直接将这两个属性写入依赖数组是更优的选择：哪怕foo对象下的其他属性发生更新，只要name和title不变，effect就不会无意义重跑，能减少不必要的性能开销。
• 如果你在effect中会用到foo对象的大部分/全部动态属性，再考虑将整个foo对象放入依赖数组。这里需要注意：如果你当前的useSelector写法是直接返回整个state.foo，Redux默认的浅比较逻辑会在foo下任意字段更新时返回新的foo引用，此时将foo整体作为依赖，会导致foo下任何字段变化都触发effect重跑，不管你的逻辑里有没有用到那些变化的字段。

注意事项 #

• 依赖数组的核心原则是：effect回调中用到的所有响应式值（props、state、组件内派生的可变值等），都必须完整列在依赖数组中，不要为了阻止effect重跑故意省略实际用到的依赖，否则会出现闭包捕获旧值的问题。
• 如果你写入依赖的属性本身是引用类型（对象、数组等），需要保证值更新时引用会同步更新，否则会出现依赖对比不符合预期的问题，这是React Hooks依赖对比的通用规则，和是否写对象属性路径无关。
• 如果逻辑只需要用到foo下的少数几个字段，更推荐直接在useSelector阶段就选中需要的字段，避免返回整个大对象，参考写法：

// 写法1：单独选中需要的基础类型字段，不需要额外配置比较函数
const name = useSelector((state: RootState) => state.foo.name);
const title = useSelector((state: RootState) => state.foo.title);

useEffect(() => {
  // 业务逻辑
}, [name, title]);

// 写法2：如果要一次性返回多个字段组成的对象，需要引入shallowEqual做浅比较，避免不必要的重渲染
import { shallowEqual, useSelector } from 'react-redux';
const { name, title } = useSelector((state: RootState) => ({
  name: state.foo.name,
  title: state.foo.title
}), shallowEqual);

内容的提问来源于stack exchange，提问作者Eloff