react组件内部使用Immutable 的意义是什么?

苏三
  • 513

代码是 react+redux+Immutable

        this.state = {
            data: fromJS({
                input1: '',
                input2: ''
            })
        }

比如说一开始写了这个,但是组件内部,比如说某一input输入了内容,state跟着变化,那么还是触发了shouldComponentUpdate然后进行了render。

那么这时组件内部进行 Immutable 的意义是什么?
是说能保证只渲染变化的局部?

那么是否意味着react的 diff算法,是根据shouldComponentUpdate来的,不用 Immutable 就无法精确定位吗?还是说只是因为js的数据mutable 的问题。
那么diff是发生在哪的?
是与shouldComponentUpdate相互依存,还是发生在render或是其他过程?

回复
阅读 2.5k
2 个回答

除了带来几种操作方便的数据结构和API,我再详细说一下可维护性和性能上的提升:
在按引用来传递数据的场景中,存在因修改数据而带来影响范围不可控的副作用,因为你不知道谁还引用着这份数据,不知道你的修改会影响到谁,而Immutable.js能解决这个问题,能控制修改带来的影响范围,因为它每次修改都会创建一个新的对象,原对象不变。

比如,调用函数func(objData),如果objData是Immutable.js包装过的,func内部在修改objData时不必担心会影响func调用者所拥有的数据,同样,func调用者也可以在调用func之后随意修改objData,不必担心会影响func内部所拥有的数据。

举个反例,Backbone.js中的不少方法的最后一个参数都是options对象,用来支持对方法内部操作进行一些配置,但Backbone.js会在方法内部修改这个options对象,甚至作为事件回调函数的参数传递出去,一个对象在Backbone.js框架内部外部传进传出,修改这个对象时由于影响范围不可控,很可能会惊呼“我cao~谁改了我的数据?”。

类似地,Flux架构中数据也会经过多层的传递,component=>actions(其中可能有多层middleware)=>store,而多个component组成的树状结构也需要将数据一层层往子component传递。这种按引用传递数据,数据流经多层的场景,如果没有将引用类型的数据Immutable化,拿到一份引用类型的数据,修改起来心里总是不踏实。

这是Immutable.js在代码可维护性上带来的提升。

facebook immutable.js 意义何在,使用场景?

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
你知道吗?

宣传栏