reactjs - React useSelector hook 是传播对象更好还是只指定需要的字段

Question

关闭。这个问题是opinion-based .它目前不接受答案。












想改善这个问题吗？更新问题，以便可以通过 editing this post 用事实和引文回答问题.

去年关闭。




Improve this question




如果我有一个巨大的对象，比如(40+ 个字段)，并且我在一个组件中调用 useSelector 但只需要此类对象的 3 个字段，那么只调用 3 个这样的字段是否会更好地提高性能:

const user = useSelector((state) => ({
    id: state.userReducer.id,
    name: state.userReducer.name,
    lastName: state.userReducer.lastName
  }));

在这种情况下还可以，因为我们只需要 3 个字段，但是如果我们需要 10 个以上的字段，事情就会变得非常冗长。在这种情况下 点差运算符 为我节省了很多代码，但这是一种不好的做法吗？由于代码、性能或其他一些原因的混淆？

const user = useSelector((state) => ({ ...state.userReducer }));

Answer 1

出于性能原因，您应该这样做:

const user = useSelector(state => state.userReducer);

每当一个 Action 被调度时，你的选择器就会运行。如果它返回不同的东西，那么在最后一次运行时它将强制组件重新渲染。通过传播到一个新对象，它将 总是 返回一个新对象。因此您的组件将重新渲染 在每个被分派(dispatch)的 Action 上 .
来自 react-redux docs :

useSelector() will also subscribe to the Redux store, and run yourselector whenever an action is dispatched.

[...]

• When an action is dispatched, useSelector() will do a referencecomparison of the previous selector result value and the currentresult value. If they are different, the component will be forced tore-render.

• [...]

• useSelector() uses strict === reference equality checks by default, not shallow equality

我也找到了 key userReducer有点尴尬。这只是 user不是用户的 reducer 。 reducer 是一个纯函数，它将 Action 转换为变化而不是数据对象。
编辑 :
正如@Adam 在评论中指出的那样，如果您想进一步减少重新渲染的数量，您可以使用内存选择器来仅选择您感兴趣的状态。创建此类选择器的好库是 reselect .

// example

import { createSelector } from 'reselect'; 

const basicUserDataSelector = createSelector(
    ({user}) => user.id,
    ({user}) => user.name,
    ({user}) => user.lastName,
    (id, name, lastName) => ({id, name, lastName})
);

// usage

const user = useSelector(basicUserDataSelector);

在您的情况下，仅选择所需状态的最简单方法是告诉 useSelector做一个浅等比较而不是引用等比较。 useSelector接受一个比较器函数作为第二个参数:

import { shallowEqual, useSelector } from 'react-redux'

const user = useSelector(
    ({user}) => ({
        id: user.id
        name: user.name
        lastName: user.lastName
    }),
    shallowEqual
);

最佳做法是仅从存储中获取所需的尽可能少的数据以限制重新渲染的数量。选择更多实际需要的数据的额外成本取决于组件和所选数据的更改频率。