Redux 状态更新导致 React 组件不必要地渲染

Question

我在我的 react/redux 应用中遇到了一些性能问题。

我正在我的一个减速器中处理一个非常深的对象。它包含一个名为list 的对象，其中包含一个对象集合。

const state = {
  list: {
    one: {
      id: 'one',
      name: 'One',
      active: false
    },
    two: {
      id: 'two',
      name: 'Two',
      active: false
    }
  }
}

对象中的每个项目都用于渲染一个组件。该组件将访问项目的属性，如下所示：

const List = (props) => {
  const listItems = Object.keys(props.list).map((key) => {
    const item = props.list[key];
    return (
      <Item key={item.id} active={item.active}>
        {item.name}
      </Item>
    );
  });

  return <ul>{listItems}</ul>;
};

但是，每次我运行以下代码时，我的组件（它是一个 PureComponent）都会呈现。

case UPDATE_LIST_ITEM:
  return {
    ...state,
    list: {
      ...state.list,
      [payload.itemId]: {
        ...state.list[payload.itemId],
      },
    },
  };

Redux 文档提到“必须适当地复制和更新每一层嵌套”，然而，我什至没有更新任何值，而只是复制了对象。

我不确定这里可以做什么。现在是实现像 Immutable.js 这样的库的好时机吗？

更新：

另外（我不太确定这是否有帮助），以下 redux 更新不会导致我的组件呈现：

case UPDATE_LIST_ITEM:
  return {
    ...state,
    list: {
      ...state.list,
      [payload.itemId]: state.list[payload.itemId],
    },
  };

Answer 1

您的纯组件正在使用状态中的props.list。在您的第一个 reducer 中，当您的代码到达该点时，您正在更新应用程序状态，并且如果您的组件从应用程序状态获取 list，那么如果 props 值发生更改，则重新渲染组件的预期行为。

如果您不希望组件在每次状态更改时重新渲染，您可以通过将组件升级到类并控制何时以及何时不渲染来控制它。 shouldComponentUpdate(nextProps, nextState)

React docs