Reactjs 我应该在redux容器上执行不可变序列算法吗？

我是个新来的反应者。我将容器模式用于redux存储（它存储不可变的JS对象，如Map/Set…）

据我所知，React组件有一个名为shouldComponentUpdate的方法用于道具阴影比较。Immutable在这个计算上会有很大帮助。所以我的问题是我应该在redux容器中执行如下的序列算法吗

export default connect(
  (state) => ({
      data: state.getIn(['data', 'map'])
        .filter((obj, key) => state.getIn(['user', 'selectedDataSet']).has(key))
        .toSet(),
    }),
)(MyComponent);

---

或者最好将此逻辑放在componentWillReceiveProps（）中？

您应该将此功能保留在MapStateTopsFunction中（对于不知道的人，连接的第一个参数）。我喜欢尽可能限制传递给组件的道具。i、 e我只发送组件或其子组件所需的道具。这样，您的组件就不必知道如何处理额外的道具或有任何特殊的逻辑

将逻辑保留在mapStateToProps中的另一个好处是，您的组件可以扩展PureComponent（

类MyComponent extends React.PureComponent

），通过浅属性检查获得免费的shouldComponent更新

话虽如此，我相信还有其他原因您可能希望将其保留在子组件中

编辑：在ImmutableJS上

使用不可变JS可以很好地反应成对。仍然需要进行

=

比较来确定深度嵌套对象是否已更改（任何更改都会创建一个全新对象的规则使这成为可能）

您应该传递react组件需要的所有内容，以便进行渲染。例如，如果组件依赖于列表，请将整个列表传递到组件中，然后在渲染之前将其过滤掉

在您的示例中：

render() {
    const data = dataProp
        .filter((obj, key) => state.getIn(['user', 'selectedDataSet']).has(key))
        .toSet()

    return (
        <div>{data}</div>
    );
} 

---

正如我之前尝试过的，我发现map/filter-like函数将生成一个新对象，而不是使用相同的对象。请看下面<代码>常量列表=不可变的.list（[1,2,3]）当我们执行此检查时，它将显示false，而不是true，如下所示

list.map（data=>data*2）==list.map（data=>data*2）

这将使shouldComponentUpdate做出应该更新的决定。这正是让Immutable如此伟大的原因！对象中更改的任何数据都会创建一个全新的对象。这样，如果在对象的深层次发生更改，您仍然可以使用简单的比较（

===

）来检查是否应该更新组件。让我为我的帖子添加一个快速更新。我认为我们应该做的是将不可变的保留列表从容器传递到组件，以获得shouldComponentUpdate上的自由阴影比较。我同意。我个人认为这是使用ImmutableJS压缩React性能的一个很好的方法。对于这个主题，我有一个新问题。容器的用途之一是将组件与数据解耦。这样组件就可以很容易地重用。我发现的问题是，如果我们在组件中而不是在容器中执行许多seq算法，那么容器将更多地依赖于存储的结构。它将在可重用性之后重新启动。

export default connect(
  (state) => ({
      dataProp: state.getIn(['data', 'map'])
    }),
)(MyComponent);