当使用带有immutable-js的redux时 - 你在选择器上调用了JS（）吗？或者你在渲染函数中使用.get（'prop'）？

Posted 2021-05-07

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

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

现在我正在努力提高一些性能，我意识到shouldComponentUpdate浅层比较失去了不变性的优势，因为我从选择器返回的方式。

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

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

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

<ChildComponent totalItems={10} />

然后在访问道具时没有一致性（一些是可变的，一些是不可变的）。

我想创建一个帮手unwrap函数，像这样：

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

但我真的不喜欢这个解决方案..我真的不喜欢这些方法。

你用什么清洁代码和性能？

答案

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

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

要使用Immutable的好处，你应该避免使用toJS（）。它非常昂贵，你不能使用有用的不可变函数。在达到“value”之前，您应该使用Immutable.get（）。一开始很讨厌，但是，你可以及时看到它是如何有用和易于使用的。 （使用getIn（）获取内部键可能比链获取函数更烦人）。通过这种方式，您的代码可以更高效地工作，并且您不需要使用展开函数，在您的组件中，您可以保证this.props.propsKey下的数据始终是不可变的。

另一答案

你应该将你的表示组件包装在一个简单的高阶组件中，该组件在传递给它的任何Immutable.js对象上调用toJS()。

这将为您提供最佳平衡，保持Immutable.js的性能优势，同时防止容器组件重新渲染太多，同时保持您的表示组件无依赖性，因此易于重用和可测试。

Redux文档有很好的选择best practises for using Immutable.js，特别是when not to use .toJS()，why your presentational components should be kept pure和how a "toJS" higher-order component might be defined and used。

另一答案

一年半后回到我的问题，回答我自己的问题：

如果可能，始终传递不可变对象。如果它不是不可变的，那就按原样传递它。

我认为性能比代码的漂亮程度要重要得多。

如果一个值是不可变的或可变的，我按原样传递它，如果不需要，就不要调用toJS。如果它们没有存储在redux存储中，我也不会用fromJS包装可变值。

我只需要知道子组件中的一些道具是不可变的而有些不是 - 而且实际上非常简单，因为几乎总是复杂的对象是不可变的。