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

我在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>;
};

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

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

更新：

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

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

---

您的纯组件正在使用状态中的

props.list

。在第一个reducer中，当代码到达该点时，您正在更新应用程序状态，如果组件从应用程序状态中获取

list

，那么如果props值已更改，则预期的行为将重新呈现组件

如果您不希望组件在每次状态更改时都重新渲染，则可以通过将组件升级到类来控制该状态，并控制组件何时不渲染<代码>应更新组件（下一步，下一步状态）

---

似乎每次reducer返回一个新状态时，它都会在使用整个对象的每个组件上触发重新渲染。也许我不理解你。您的对象是否比上面的一个/两个家伙复杂得多？它还有一些属性，但仅此而已。我认为问题是由对象指针的更改导致的，从而导致渲染。我想知道我是否应该执行检查以确保我应该返回一个新的/更新的状态副本，以及像Immutable.js这样的东西是否可以帮助实现这一点您的

mapState

函数是什么样子的？您可能正在处理正在更新的

PureComponent

状态的一部分，因此是的，它将重新呈现。我不太确定您的意思。我有一个部分映射到

Object.keys（props.list）

来呈现列表项（如我的问题中所示），但是我的列表项是一个类（因为它是一个PureComponent）。我的理解是PureComponents实现了自己的浅层属性和状态比较，因此没有理由使用

shouldComponentUpdate

react文档还提到：“考虑使用内置的PureComponent，而不是编写shouldComponentUpdate（）PureComponent会对道具和状态进行粗略的比较，并减少跳过必要更新的可能性。“您主要担心的是组件正在不必要地重新渲染，对吗？我看到的基本情况是：

案例更新\u列表\u项：

被调用，状态发生变化。MapStateTops正在更新``这将导致纯组件重新渲染。可能是您不必要地调度，导致了不必要的重新加载？

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