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 。 在第一个化简器中，到代码到达该点时，您正在更新应用程序状态，并且如果组件正在从应用程序状态获取list ，则在props值已更改的情况下重新呈现组件的预期行为。

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

反应文档