useSelector 导致多次重新渲染答案

【问题标题】：useSelector causes multiple re-rendersuseSelector 导致多次重新渲染
【发布时间】：2020-10-02 21:47:04
【问题描述】：

当使用 react-devtools 时，它告诉我我的根组件重新渲染的原因是因为钩子发生了变化？

当我删除任何 useSelectors 时，我的根组件只呈现一次，启用后它会呈现 6 次。

关于为什么会发生这种情况的一些猜测是什么？

import {
  /// Data State Constants...
  SET_USER_DATA,
  SET_BADGE_COUNT,
} from "../Actions/gameState";

const initialState = {
  /// Data state...
  userData: [],
  badgeCount: 0,
};

export default function gameState(state = initialState, action) {
  const { type, payload } = action || {};
  switch (type) {
    /////////////////////////
    /// Data state Reducers...
    /////////////////////////
    case SET_USER_DATA: {
      return { ...state, userData: payload };
    }
    case SET_BADGE_COUNT: {
      return { ...state, badgeCount: payload };
    }

    default:
      return state;
  }
}

【问题讨论】：

不看代码我们无法知道发生了什么，我的建议是尝试在snacks.expo.io上重现问题
也许您在每次渲染后更改/重新分配使用 useSelectors 选择的属性，并且更改导致组件重新渲染。不幸的是，没有看到任何代码 sn-ps，我无法为您提供适当的帮助。
我正在使用记录器，所以我会看到这些变化，但没有任何属性发生变化。
列出你的组件和reducer，我们可以看一下代码。如果不至少看到减速器，很难猜出它会做什么。
就组件而言。没有什么特别的事情发生。我像这样 { someState } = useSelector(state=>state.myState) 从 redux 中获取状态。对于减速器，它看起来像这样：（我刚刚将其发布在 OP 上）

标签： react-native redux reducers

【解决方案1】：

好的，事情是：useSelector 将新值与旧值与严格的=== 进行比较。您可以为每个字段调用一个 useSelector，也可以从 react-redux 实现 shallowEqual：

const someState = useSelector(state=>state.myState.someState, shallowEqual)

这里的文档： https://react-redux.js.org/next/api/hooks#equality-comparisons-and-updates

【讨论】：