불변성과 반응성을 사용하는 방법

이번에는 Immutable과 React를 어떻게 사용하는지, 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

불변 데이터는 한번 생성되면 변경할 수 없는 데이터입니다. Immutable 객체를 수정, 추가 또는 삭제하면 새로운 Immutable 객체가 반환됩니다. Immutable의 구현 원칙은 영구 데이터 구조입니다. 즉, 이전 데이터를 사용하여 새 데이터를 생성할 때 이전 데이터가 사용 가능하고 동시에 변경되지 않도록 보장해야 합니다. 동시에, deepCopy가 모든 노드를 복사하여 발생하는 성능 손실을 방지하기 위해 Immutable은 구조적 공유(구조적 공유)를 사용합니다. 즉, 객체 트리의 노드가 변경되면 해당 노드와 상위 노드만 영향을 받습니다. 수정되고 다른 노드도 수정되어 공유됩니다. 아래 애니메이션을 봐주세요:

Gif 애니메이션을 만들려고 노력을 많이 했는데 강제로 정적 이미지로 변환되었습니다. http://img .alicdn.com/tps/i2/TB1zzi_KXXXXXctXFXXbrb8OVXX-613-575.gif 시청
현재 널리 사용되는 두 가지 불변 라이브러리가 있습니다:

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;
 }

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);
}
}

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() {
 this.setState(({data}) => ({
 data: data.update(‘times', v => v + 1) })
});
}

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();
}
});

怎样实现微信web端后退强制刷新

设置cookie过期自动更新和自动获取

위 내용은 불변성과 반응성을 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!