Redux中useSelector两种取值方式的性能影响与最佳实践

问题背景 #

在React+Redux应用中，使用useSelector提取状态时有两种常见写法：

方式1：单独选取状态属性 #

const username = useSelector((state) => state.user.username);
const userCart = useSelector((state) => state.user.cart);

方式2：选取整个状态片段后解构 #

const { username, cart } = useSelector((state) => state.user);

结合以下user切片示例，关注两种方式的性能影响：

const initialState = {
  username: '',
  cart: [],
  phoneNumber: '',
  address: ''
};

const userSlice = createSlice({
  name: 'user',
  initialState,
  reducers: {
    // 状态更新逻辑
  }
});

核心疑问：

• 若修改user切片中无关属性（如phoneNumber），两种方式下组件是否会重渲染？
• 哪种方式更适合优化性能，减少不必要的重渲染？

性能表现分析 #

1. 修改无关属性时的重渲染情况 #

• 方式1（单独选取属性）：不会触发重渲染。
  Redux的useSelector默认使用浅比较判断前后返回值是否变化。当修改phoneNumber时，state.user会生成新的对象引用，但username和cart的实际值/引用并未改变，因此useSelector会判定两次返回的结果一致，组件不会重渲染。只有当username或cart的实际值发生变化时，才会触发重渲染。

• 方式2（解构整个user切片）：会触发重渲染。
  这种方式下useSelector返回的是整个state.user对象。由于Redux采用不可变更新，只要user切片中任意属性被修改，整个state.user都会生成新的对象引用。浅比较会判定前后返回的对象引用不同，因此无论组件是否用到该属性，都会触发重渲染。

2. 性能优化对比 #

方式1更适合优化性能，能有效减少不必要的重渲染。它仅关注组件实际依赖的状态属性，只有当这些属性变化时才会触发组件更新，避免了因切片中其他属性变更导致的无意义重渲染。

最佳实践 #

1. 精准选取所需状态：优先使用方式1，只提取组件实际需要的单个属性，避免获取整个切片或多余的状态片段，从根源上减少重渲染触发的可能。
2. 避免返回新的引用类型：如果需要同时提取多个属性，不要直接在useSelector中返回新对象（如return { username: state.user.username, cart: state.user.cart }），因为每次渲染都会生成新对象，会被浅比较判定为变化，触发重渲染。这种场景下，分开写多个useSelector是更稳妥的选择。
3. 利用浅比较特性：牢记useSelector默认的浅比较逻辑，对于引用类型的状态（如数组、对象），确保只有当实际数据变化时才生成新引用（Redux Toolkit的createSlice已经帮你处理了不可变更新，无需手动操作）。

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