import { is } from ‘immutable'; shouldComponentUpdate: (nextProps = {}, nextState = {}) => { const thisProps = this.props || {}, thisState = this.state || {}; if (Object.keys(thisProps).length !== Object.keys(nextProps).length || Object.keys(thisState).length !== Object.keys(nextState).length) { return true; } for (const key in nextProps) { if (thisProps[key] !== nextProps[key] || ！is(thisProps[key], nextProps[key])) { return true; } } for (const key in nextState) { if (thisState[key] !== nextState[key] || ！is(thisState[key], nextState[key])) { return true; } } return false; }
使用 Immutable 后，如下图，当红色节点的 state 变化后，不会再渲染树中的所有节点，而是只渲染图中绿色的部分：
你也可以借助 React.addons.PureRenderMixin 或支持 class 语法的pure-render-decorator 来实现。
setState 的一个技巧
React 建议把 this.state 当作 Immutable 的，因此修改前需要做一个 deepCopy，显得麻烦：
import ‘_' from ‘lodash'; const Component = React.createClass({ getInitialState() { return { data: { times: 0 } } }, handleAdd() { let data = _.cloneDeep(this.state.data); data.times = data.times + 1; this.setState({ data: data }); // 如果上面不做 cloneDeep，下面打印的结果会是已经加 1 后的值。 console.log(this.state.data.times); } }
使用 Immutable 后：
getInitialState() { return { data: Map({ times: 0 }) } }, handleAdd() { this.setState({ data: this.state.data.update(‘times', v => v + 1) }); // 这时的 times 并不会改变 console.log(this.state.data.get(‘times')); }
上面的 `handleAdd` 可以简写成：
handleAdd() { this.setState(({data}) => ({ data: data.update(‘times', v => v + 1) }) }); }
2 . 与 Flux 搭配使用
由于 Flux 并没有限定 Store 中数据的类型，使用 Immutable 非常简单。
现在是实现一个类似带有添加和撤销功能的 Store：
import { Map, OrderedMap } from ‘immutable'; let todos = OrderedMap(); let history = []; // 普通数组，存放每次操作后产生的数据 let TodoStore = createStore({ getAll() { return todos; } }); Dispatcher.register(action => { if (action.actionType === ‘create') { let id = createGUID(); history.push(todos); // 记录当前操作前的数据，便于撤销 todos = todos.set(id, Map({ id: id, complete: false, text: action.text.trim() })); TodoStore.emitChange(); } else if (action.actionType === ‘undo') { // 这里是撤销功能实现， // 只需从 history 数组中取前一次 todos 即可 if (history.length > 0) { todos = history.pop(); } TodoStore.emitChange(); } });
3 . 与 Redux 搭配使用
Redux 是目前流行的 Flux 衍生库。它简化了 Flux 中多个 Store 的概念，只有一个 Store，数据操作通过 Reducer 中实现；同时它提供更简洁和清晰的单向数据流（View -> Action -> Middleware -> Reducer），也更易于开发同构应用。目前已经在我们项目中大规模使用。
由于 Redux 中内置的 combineReducers 和 reducer 中的 initialState 都为原生的 Object 对象，所以不能和 Immutable 原生搭配使用。
幸运的是，Redux 并不排斥使用 Immutable，可以自己重写 combineReducers 或使用 redux-immutablejs 来提供支持。
上面我们提到 Cursor 可以方便检索和 update 层级比较深的数据，但因为 Redux 中已经有了 select 来做检索，Action 来更新数据，因此 Cursor 在这里就没有用武之地了。
总结
Immutable 可以给应用带来极大的性能提升，但是否使用还要看项目情况。由于侵入性较强，新项目引入比较容易，老项目迁移需要评估迁移。对于一些提供给外部使用的公共组件，最好不要把 Immutable 对象直接暴露在对外接口中。
如果 JS 原生 Immutable 类型会不会太美，被称为 React API 终结者的 Sebastian Markbåge 有一个这样的提案，能否通过现在还不确定。不过可以肯定的是 Immutable 会被越来越多的项目使用。
您可能感兴趣的文章: