Immutable과 React의 실무 기술을 자세히 설명해주세요.

Immutable은 React 애플리케이션을 수십 배 향상시킬 수 있습니다. 어떤 사람들은 React가 그 빛을 모를 정도로 인기가 높았기 때문에 최근 JavaScript의 위대한 발명이라고 말합니다. 이 글은 주로 Immutable과 React의 실천을 소개합니다. 필요하신 분들은 참고하시면 됩니다

어떤 사람들은 Immutable이 React 애플리케이션을 수십 배 향상시킬 수 있다고 말합니다. 어떤 사람들은 Immutable의 도입이 JavaScript의 위대한 발명이라고 말합니다. 최근에는 React가 너무 인기가 많았기 때문에 그 빛이 가려졌습니다. 이는 적어도 Immutable이 매우 가치 있다는 것을 보여줍니다. 아래에서 알아보겠습니다.

JavaScript의 객체는 일반적으로 변경 가능(Mutable)합니다. 참조 할당이 사용되기 때문에 새 객체는 단순히 원래 객체를 참조합니다. 새 객체를 변경하면 원래 객체에 영향을 미칩니다. 예를 들어, foo={a: 1}; bar=foo; bar.a=2 이때 foo.a도 2로 변경되었음을 알 수 있습니다. 이렇게 하면 메모리를 절약할 수 있지만 응용 프로그램이 복잡해지면 매우 큰 숨겨진 위험이 발생하고 Mutable이 가져오는 이점은 그 이상의 가치가 있습니다. 이 문제를 해결하기 위한 일반적인 접근 방식은 수정을 피하기 위해shallowCopy(shallow copy)나 deepCopy(deep copy)를 사용하는 것이지만 이 방법은 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 보기
현재 두 가지 인기 있는 불변 라이브러리가 있습니다: 1.immutable.js

Facebook 엔지니어인 Lee Byron이 3년에 걸쳐 이를 구축했습니다. React와 동시에 등장했지만 채택되지는 않았으며 기본적으로 React 도구 세트에 배치되어 있습니다(React는 단순화된 Helper를 제공합니다). 내부적으로 영구 데이터 구조의 전체 세트와 사용하기 쉬운 다양한 데이터 유형을 구현합니다. Collection, List, Map, Set, Record, Seq와 같습니다. 매우 포괄적인 맵, 필터, 그룹별, 축소 및 기능적 작업 방법 찾기가 있습니다. 동시에 API는 객체 또는 배열과 최대한 유사합니다.

2.seamless-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 중국어 웹사이트의 기타 관련 기사를 참조하세요!