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

Redux状态更新导致React组件不必要地呈现

1 个答案: