Question

我是新来的反应/ redux。我正在使用带有redux存储的容器模式（存储不可变的对象，如Map / Set ...）。

据我所知，React组件有一个名为shouldComponentUpdate的方法，用于道具阴影比较。不变量将有助于此计算。所以我的问题是我应该如下所示在redux容器中进行序列算法吗？

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

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

中更好

Answer 1

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

将逻辑保留在mapStateToProps中的另一个好处是，您的组件可以扩展PureComponent（class MyComponent extends React.PureComponent）以获得带有浅支柱检查的免费shouldComponentUpdate！

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

编辑：On ImmutableJS

与Immutable JS完美配合。只需要===比较来确定深层嵌套对象是否已更改（任何更改创建一个全新对象的规则都可以实现）。

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

在你的例子中：

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

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

这假设您的连接看起来像这样（请注意，这可能不是100％正确的语法）。

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

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

1 个答案: