reactjs - 当使用 redux 和 immutable-js 时 - 你会在选择器上调用 toJS() 吗？或者您在渲染函数中使用 .get ('prop' )吗？

Question

现在，我正在使用 reselect 创建选择器，以从存储中提取数据并通过 connect 将其传递给 props。为简单起见，我的选择器的结果始终是一个 JS 对象(在选择器末尾调用 toJS())，如下所示:

const selector = state => state.get('data').toJS();

现在我正在尝试提高一些性能，并且我意识到 shouldComponentUpdate 浅比较会因为我从选择器返回的方式而失去不变性的优势。

另一方面，在我的 html 中使用 .get('prop') 似乎非常烦人:

<div>{this.props.data.get('prop')}</div>

特别是如果我将一个简单的 JS 对象传递给一个可变的子组件，如下所示:

<ChildComponent totalItems={10} />

然后访问 props 时就没有一致性(有些是可变的，有些是不可变的)。

我想创建一个辅助unwrap函数，如下所示:

const unwrap = obj => obj && obj.toJS ? obj.toJS() : obj;

但我不太喜欢这个解决方案。我不太喜欢这些方法。

您使用什么来实现干净的代码和性能？

Answer 1

将 props 传递给组件，收集键下的所有数据作为不可变的。

<MyComponent propsKey={Immutable.fromJS({someData: {key: "value"}})} />

要利用 Immutable 的优点，您应该避免使用 toJS()。这是非常昂贵的，并且你不能使用有用的不可变函数。在达到“值”之前，您应该使用 Immutable.get()。一开始这很烦人，但随着时间的推移，您会发​​现它是多么有用且易于使用。 (使用 getIn() 获取内部键可能比链 get 函数更烦人)。这样你的代码可以更高效地工作，并且你不需要使用 unwrap 函数，在你的组件中你可以保证 this.props.propsKey 下的数据始终不可变。