Javascript 数组和对象会导致使用Redux和Immutable.js进行不必要的重新渲染

在我的React项目中，我的Redux状态的形状如下：

{
  items: [{ ... },  { ... }, { ... }, ...]
  form: { 
    searchField: '',
    filter1: '',
    filter2: '',
  }
}

在一个页面上有一个表单组件和项目列表组件。我使用的是Immutable.js，因此每当更新表单字段时，就会创建一个全新的

items

数组。由于数组引用现在不同，因此即使数组中的数据相同，也会重新呈现项目列表

在我的列表组件中，我使用

componentdiddupdate

控制台记录状态的变化，以确认更新的数组正在触发重新渲染：

componentDidUpdate(prevProps) {
  Object.keys(prevProps).forEach((key) => {
    if (prevProps[key] !== this.props[key]) {
      console.log('changed prop:', key, 'from', this.props[key], 'to', prevProps[key]);
    }
  });
}

记录的

from

和

to

数组包含完全相同的数据

如何防止这些不必要的重新渲染

我能想到的唯一一件事是，在列表组件的

shouldComponentUpdate

中，循环数组并将项目ID与

nextProps

进行比较。然而，这似乎效率低下

这是我的减速机

import Immutable from 'immutable';
import { types } from '../actions';

const initialState = {
  items: []
  form: { 
    searchField: '',
    filter1: '',
    filter2: '',
  }
}

export default function reducer(_state = initialState, action) {
  const state = Immutable.fromJS(_state);

  switch (action.type) {
    case types.HANDLE_FORM_CHANGE:
      return state.setIn(['form', action.field], action.value).toJS();
    default:
      return _state;
  }
}

---

shouldComponentUpdate

方法就是我处理这件事的方式/我看到其他人处理这件事的方式

请注意，您不需要手动循环您的集合并比较ID，因为不可变包含用于比较集合的：

语义类似于Object.is的值相等性检查，但处理 作为值的不可变集合，如果第二个集合 包括等效值

---

显然，这假设传递给组件的状态是不可变的对象，我认为这是一种最佳实践（请参阅）

你能分享你的redux减速机吗？这看起来可能会有问题。通常这不是你在redux周期中要阻止的事情。有时，有必要重新构造保存数据的数据结构，但这不是您应该直接使用的解决方案。向我们展示与此数据相关的组件