immutable学习

React 做性能优化时有一个避免重复渲染的大招,就是使用 shouldComponentUpdate(),但它默认返回 true,即始终会执行 render() 方法,然后做 Virtual DOM 比较,并得出是否需要做真实 DOM 更新,这里往往会带来很多无必要的渲染并成为性能瓶颈。

当然我们也可以在 shouldComponentUpdate() 中使用使用 deepCopy 和 deepCompare 来避免无必要的 render(),但 deepCopy 和 deepCompare 一般都是非常耗性能的。

Immutable 则提供了简洁高效的判断数据是否变化的方法,只需 === 和 is 比较就能知道是否需要执行 render()
而这个操作几乎 0 成本,所以可以极大提高性能。修改后的 shouldComponentUpdate 是这样的:

import { is } from 'immutable'; shouldComponentUpdate: (nextProps, nextState) => { return !(this.props === nextProps || is(this.props, nextProps)) || !(this.state === nextState || is(this.state, nextState)); }

最近才开始学习immutable,还没有详细的学习笔记 ,现在这里先记下几个网址,方便后面仔细的看

深拷贝和immutable的区别是:深拷贝是将原数据完全复制一份,各是各的,而immutable是新的数据是保留了变化的,共用没有变化的数据

搞定immutable.js:http://boke.io/immutable-js/

Immutable 详解及 React 中实践:https://www.w3ctech.com/topic/1595

React + Redux + Immutablejs开发总结

详细学习:http://www.tuicool.com/articles/YBbEJzJ

还可以学习;http://www.cnblogs.com/samwu/p/5457031.html

原文地址:https://www.cnblogs.com/fireporsche/p/6422973.html