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

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了当使用带有immutable-js的redux时 - 你在选择器上调用了JS()吗?或者你在渲染函数中使用.get('prop')?相关的知识,希望对你有一定的参考价值。

现在我正在使用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 purehow a "toJS" higher-order component might be defined and used

另一答案

一年半后回到我的问题,回答我自己的问题:

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

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

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

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

以上是关于当使用带有immutable-js的redux时 - 你在选择器上调用了JS()吗?或者你在渲染函数中使用.get('prop')?的主要内容,如果未能解决你的问题,请参考以下文章

插入并放入nodeJs + express api时,带有Redux Saga的Axios不发送表单数据

当其中一个获取延迟响应时,如何在 Redux 中通过多个获取进行操作?

immutable-js基础

使用 Redux 添加更多数据时,带有分页结果的平面列表会导致重新渲染

Redux:如何在另一个值更改时更新一个值?

使用 JWT Token、React Native 和 Redux 检索用户信息