ImmutableとReactの実践スキルを詳しく解説

Immutable は React アプリケーションに数十倍の改善をもたらすことができます。React は人気が高かったと同時にその光が見えなくなったため、Immutable の導入は最近の JavaScript における素晴らしい発明だと言う人もいます。この記事では主に Immutable と React の実践について紹介しますので、必要な方は参考にしてください

Immutable は React アプリケーションに何十倍もの改善をもたらすと言う人もいます。また、Immutable の導入は JavaScript における素晴らしい発明だと言う人もいます。最近では、React が非常に人気があったため、その光は覆い隠されていました。これらは、少なくとも Immutable が非常に価値があることを示しています。以下で調べてみましょう。

JavaScript のオブジェクトは一般に変更可能 (Mutable) です。参照割り当てが使用されるため、新しいオブジェクトは元のオブジェクトを参照するだけです。新しいオブジェクトを変更すると、元のオブジェクトに影響します。たとえば、 foo={a: 1}; bar=foo; bar.a=2 この時点で foo.a も 2 に変更されていることがわかります。これによりメモリは節約できますが、アプリケーションが複雑になると非常に大きな隠れた危険が生じ、Mutable によってもたらされる利点は利益以上の価値があります。この問題を解決するには、shallowCopy（浅いコピー）やdeepCopy（深いコピー）を使って変更を避けるのが一般的ですが、これではCPUやメモリの無駄が発生します。
Immutable はこれらの問題をうまく解決できます。 foo={a: 1}; bar=foo; bar.a=2 你会发现此时 foo.a 也被改成了 2。虽然这样做可以节约内存，但当应用复杂后，这就造成了非常大的隐患，Mutable 带来的优点变得得不偿失。为了解决这个问题，一般的做法是使用 shallowCopy（浅拷贝）或 deepCopy（深拷贝）来避免被修改，但这样做造成了 CPU 和内存的浪费。
Immutable 可以很好地解决这些问题。

什么是 Immutable Data

Immutable Data 就是一旦创建，就不能再被更改的数据。对 Immutable 对象的任何修改或添加删除操作都会返回一个新的 Immutable 对象。Immutable 实现的原理是 Persistent Data Structure（持久化数据结构），也就是使用旧数据创建新数据时，要保证旧数据同时可用且不变。同时为了避免 deepCopy 把所有节点都复制一遍带来的性能损耗，Immutable 使用了 Structural Sharing（结构共享），即如果对象树中一个节点发生变化，只修改这个节点和受它影响的父节点，其它节点则进行共享。请看下面动画：

擦，费了好大劲做了个 Gif 动画，竟然被强制转成了静态图，请移步 http://img.alicdn.com/tps/i2/TB1zzi_KXXXXXctXFXXbrb8OVXX-613-575.gif 观看
目前流行的 Immutable 库有两个：

1.immutable.js

Facebook 工程师 Lee Byron 花费 3 年时间打造，与 React 同期出现，但没有被默认放到 React 工具集里（React 提供了简化的 Helper）。它内部实现了一套完整的 Persistent Data Structure，还有很多易用的数据类型。像 Collection、List、Map、Set、Record、Seq。有非常全面的map、filter、groupBy、reduce``find函数式操作方法。同时 API 也尽量与 Object 或 Array 类似。

其中有 3 种最重要的数据结构说明一下：（Java 程序员应该最熟悉了）

Map：键值对集合，对应于 Object，ES6 也有专门的 Map 对象
List：有序可重复的列表，对应于 Array
Set：无序且不可重复的列表

2.seamless-immutable

与 Immutable.js 学院派的风格不同，seamless-immutable

せっかく Gif アニメーションを作成しましたが、強制的に静止画像に変換されました。 http://img.alicdn.com/tps/ にアクセスしてください。 i2/TB1zzi_KXXXXXctXFXXbrb8OVXX-613- 575.gif 表示
現在、2 つの人気のある不変ライブラリがあります: 1.immutable.js

Facebook エンジニアの Lee Byron が 3 年をかけて構築しました。 React と同時に登場しましたが、採用されませんでした。デフォルトでは、React ツール セットに組み込まれています (React は簡略化されたヘルパーを提供します)。これは、内部的に永続データ構造の完全なセットと、多くの使いやすいデータ型を実装します。コレクション、リスト、マップ、セット、レコード、シーケンスなど。非常に包括的なマップ、フィルター、グループバイ、リデュース、および検索の機能的な操作メソッドがあります。同時に、API はオブジェクトまたは配列に可能な限り似ています。

2.simless-immutable

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

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 会被越来越多的项目使用。

上面是我整理给大家的，希望今后会对大家有帮助。

相关文章：

Javascript中prototype与__proto__的关系详解

js中document.write和document.writeln的区别

Javascript 编码约定(编码规范)

以上がImmutableとReactの実践スキルを詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。