Reactjs 当将redux与不可变js一起使用时,是否在选择器上调用toJS()?或者在渲染函数中使用.get(';prop';)吗?
现在,我正在使用Reactjs 当将redux与不可变js一起使用时,是否在选择器上调用toJS()?或者在渲染函数中使用.get(';prop';)吗?,reactjs,optimization,redux,immutable.js,reselect,Reactjs,Optimization,Redux,Immutable.js,Reselect,现在,我正在使用reselect创建选择器,从存储中提取数据,并通过connect将其传递给道具。 为简单起见,我的选择器的结果总是一个JS对象(在选择器的末尾调用toJS()),如下所示: const selector = state => state.get('data').toJS(); <ChildComponent totalItems={10} /> const unwrap = obj => obj && obj.toJS ? obj.t
reselect
创建选择器,从存储中提取数据,并通过connect
将其传递给道具。
为简单起见,我的选择器的结果总是一个JS对象(在选择器的末尾调用toJS()
),如下所示:
const selector = state => state.get('data').toJS();
<ChildComponent totalItems={10} />
const unwrap = obj => obj && obj.toJS ? obj.toJS() : obj;
现在我正试图提高一些性能,我意识到shouldComponentUpdate
浅层比较失去了不变性的优势,因为我从选择器返回的方式
另一方面,在我的html中使用.get('prop')
似乎非常烦人:
<div>{this.props.data.get('prop')}</div>
但我真的不喜欢这个解决方案。。我真的不喜欢这些方法中的任何一种
对于干净的代码和性能,您使用了什么?将道具传递给组件,以将键下的所有数据收集为不可变数据
<MyComponent propsKey={Immutable.fromJS({someData: {key: "value"}})} />
要使用Immutable的优点,应该避免使用toJS()。这是非常昂贵的,您不能使用有用的不可变函数。在达到“value”之前,应该使用Immutable.get()。一开始它很烦人,但是,你可以及时看到它是多么有用和易于使用。(使用getIn()获取内部键可能比使用chain get函数更麻烦)。通过这种方式,您的代码可以更高效地工作,并且不需要使用展开函数,在组件中,您可以保证this.props.propsKey下的数据始终不可变。您应该将表示组件包装在一个简单的高阶组件中,该组件对传递给它的任何不可变的.js对象props调用toJS()
<MyComponent propsKey={Immutable.fromJS({someData: {key: "value"}})} />
这将使您在保持Immutable.js的性能优势的同时,避免容器组件重新呈现过多内容,以及保持呈现组件无依赖性,因此易于重用和测试之间取得最佳平衡
Redux文档有很多选择,尤其是,和。一年半后回到我的问题,并给出我自己的答案:
如果可能,始终传递不可变对象。如果它不是不可变的,就按原样传递它。
我认为性能比代码的美观更重要
如果一个值是不可变的或可变的,我会按原样传递它,如果不需要,我永远不会调用toJS
。如果可变值没有存储在redux存储中,我也不会用fromJS
包装它们
我只需要在子组件中意识到,有些道具是不可变的,有些则不可变——事实上这很简单,因为几乎所有的复杂对象都是不可变的。我同意你回答的第二部分。但是,在我的标记中使用Immutable.fromJS
的例子比混合使用可变/不可变的道具更令人不安。你的道具数据总是不可变的,但是如果你的组件中有新数据,需要将其传递到子组件中,那么Immutable.fromJS()将所有道具作为不可变道具传递给我是一种很好的方法,使用不可变道具的真正价值只有在您一直使用不可变道具的情况下才能体现出来。这就是允许您在所有组件中使用shouldComponentUpdate的简单实现的原因。我觉得打电话给toJS是个可怕的主意。您会在选择器中调用JSON.stringify/JSON.parse吗?
<MyComponent propsKey={Immutable.fromJS({someData: {key: "value"}})} />