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)

反應文檔