搜尋
首頁web前端js教程詳細為你講解Immutable及 React 中實作技巧

詳細為你講解Immutable及 React 中實作技巧

Jun 02, 2018 am 11:40 AM
Immutablereact講解

Immutable 可以為 React 應用程式帶來數十倍的提升,也有人說 Immutable 的引入是近期 JavaScript 中偉大的發明,因為同期 React 太火,它的光芒被掩蓋了。這篇文章主要介紹了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 可以很好地解決這些問題。

什麼是 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 並沒有實現完整的Persistent Data Structure,而是使用Object.defineProperty(因此只能在IE9 及以上使用)擴展了JavaScript 的Array 和Object 物件來實現,只支援Array 和Object 兩種資料類型,API 是基於與Array 和Object 操持不變。程式碼庫非常小,壓縮後下載只有 2K。而 Immutable.js 壓縮後下載有 16K。

下面上程式碼來感受一下兩者的不同:

// 原来的写法
let foo = {a: {b: 1}};
let bar = foo;
bar.a.b = 2;
console.log(foo.a.b); // 打印 2
console.log(foo === bar); // 打印 true
// 使用 immutable.js 后
import Immutable from ‘immutable';
foo = Immutable.fromJS({a: {b: 1}});
bar = foo.setIn([‘a', ‘b'], 2);  // 使用 setIn 赋值
console.log(foo.getIn([‘a', ‘b'])); // 使用 getIn 取值,打印 1
console.log(foo === bar); // 打印 false
// 使用 seamless-immutable.js 后
import SImmutable from ‘seamless-immutable';
foo = SImmutable({a: {b: 1}})
bar = foo.merge({a: { b: 2}})  // 使用 merge 赋值
console.log(foo.a.b); // 像原生 Object 一样取值,打印 1
console.log(foo === bar); // 打印 false

Immutable 優點

##1 . Immutable 降低了Mutable 帶來的複雜度

可變(Mutable)資料耦合了Time 和Value 的概念,造成了資料很難被回溯。

例如下面一段程式碼:

function touchAndLog(touchFn) {
  let data = { key: ‘value' };
  touchFn(data);
  console.log(data.key); // 猜猜会打印什么?
}

#在不檢視touchFn 的程式碼的情況下,因為不確定它對data 做了什麼,你是不可能知道會印什麼(這不是廢話嗎)。但如果 data 是 Immutable 的呢,你可以很肯定的知道印製的是 value。

2 . 節省記憶體

Immutable.js 使用了 Structure Sharing 會盡量重複使用記憶體。沒有被引用的物件會被垃圾回收。

import { Map} from ‘immutable';
 let a = Map({
 select: ‘users',
 filter: Map({ name: ‘Cam' })
})
let b = a.set(‘select', ‘people');
a === b; // false
a.get(‘filter') === b.get(‘filter'); // true

上面 a 和 b 共享了沒有變化的 `filter` 節點。

3 . Undo/Redo,Copy/Paste,甚至時間旅行這些功能做起來小菜一碟

因為每次資料都是不一樣的,只要把這些資料放到一個陣列裡儲存起來,想回退到哪裡就拿出對應資料即可,很容易開發出撤銷重做這種功能。

後面我會提供 Flux 做 Undo 的範例。

4 . 並發安全性

传统的并发非常难做,因为要处理各种数据不一致问题,因此『聪明人』发明了各种锁来解决。但使用了 Immutable 之后,数据天生是不可变的,并发锁就不需要了。

然而现在并没什么卵用,因为 JavaScript 还是单线程运行的啊。但未来可能会加入,提前解决未来的问题不也挺好吗?

拥抱函数式编程

Immutable 本身就是函数式编程中的概念,纯函数式编程比面向对象更适用于前端开发。因为只要输入一致,输出必然一致,这样开发的组件更易于调试和组装。

像 ClojureScript,Elm 等函数式编程语言中的数据类型天生都是 Immutable 的,这也是为什么 ClojureScript 基于 React 的框架 — Om 性能比 React 还要好的原因。

使用 Immutable 的缺点

需要学习新的 API

No Comments

增加了资源文件大小

No Comments

容易与原生对象混淆

这点是我们使用 Immutable.js 过程中遇到最大的问题。写代码要做思维上的转变。

虽然 Immutable.js 尽量尝试把 API 设计的原生对象类似,有的时候还是很难区别到底是 Immutable 对象还是原生对象,容易混淆操作。

Immutable 中的 Map 和 List 虽对应原生 Object 和 Array,但操作非常不同,比如你要用 map.get(‘key') 而不是 map.key,array.get(0) 而不是 array[0]。另外 Immutable 每次修改都会返回新对象,也很容易忘记赋值。

当使用外部库的时候,一般需要使用原生对象,也很容易忘记转换。

下面给出一些办法来避免类似问题发生:

使用 Flow 或 TypeScript 这类有静态类型检查的工具

约定变量命名规则:如所有 Immutable 类型对象以 $$ 开头。

使用 Immutable.fromJS 而不是 Immutable.Map 或 Immutable.List 来创建对象,这样可以避免 Immutable 和原生对象间的混用。

更多认识

1 . Immutable.is

两个 immutable 对象可以使用 === 来比较,这样是直接比较内存地址,性能最好。但即使两个对象的值是一样的,也会返回 false:

let map1 = Immutable.Map({a:1, b:1, c:1});
let map2 = Immutable.Map({a:1, b:1, c:1});
map1 === map2;       // false

为了直接比较对象的值,immutable.js 提供了 Immutable.is 来做『值比较』,结果如下:

Immutable.is(map1, map2); // true

Immutable.is 比较的是两个对象的 hashCode 或 valueOf(对于 JavaScript 对象)。由于 immutable 内部使用了 Trie 数据结构来存储,只要两个对象的 hashCode 相等,值就是一样的。这样的算法避免了深度遍历比较,性能非常好。

后面会使用 Immutable.is 来减少 React 重复渲染,提高性能。

另外,还有 mori、cortex 等,因为类似就不再介绍。

2 . 与 Object.freeze、const 区别

Object.freeze 和 ES6 中新加入的 const 都可以达到防止对象被篡改的功能,但它们是 shallowCopy 的。对象层级一深就要特殊处理了。

3 . Cursor 的概念

这个 Cursor 和数据库中的游标是完全不同的概念。

由于 Immutable 数据一般嵌套非常深,为了便于访问深层数据,Cursor 提供了可以直接访问这个深层数据的引用。

import Immutable from ‘immutable';
import Cursor from ‘immutable/contrib/cursor';
let data = Immutable.fromJS({ a: { b: { c: 1 } } });
// 让 cursor 指向 { c: 1 }
let cursor = Cursor.from(data, [‘a', ‘b'], newData => {
// 当 cursor 或其子 cursor 执行 update 时调用
console.log(newData);
});
cursor.get(‘c'); // 1
cursor = cursor.update(‘c', x => x + 1);
cursor.get(‘c'); // 2

实践

与 React 搭配使用,Pure Render

熟悉 React 的都知道,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 = {}) => {
  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中文網其他相關文章!

陳述
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
JavaScript的角色:使網絡交互和動態JavaScript的角色:使網絡交互和動態Apr 24, 2025 am 12:12 AM

JavaScript是現代網站的核心,因為它增強了網頁的交互性和動態性。 1)它允許在不刷新頁面的情況下改變內容,2)通過DOMAPI操作網頁,3)支持複雜的交互效果如動畫和拖放,4)優化性能和最佳實踐提高用戶體驗。

C和JavaScript:連接解釋C和JavaScript:連接解釋Apr 23, 2025 am 12:07 AM

C 和JavaScript通過WebAssembly實現互操作性。 1)C 代碼編譯成WebAssembly模塊,引入到JavaScript環境中,增強計算能力。 2)在遊戲開發中,C 處理物理引擎和圖形渲染,JavaScript負責遊戲邏輯和用戶界面。

從網站到應用程序:JavaScript的不同應用從網站到應用程序:JavaScript的不同應用Apr 22, 2025 am 12:02 AM

JavaScript在網站、移動應用、桌面應用和服務器端編程中均有廣泛應用。 1)在網站開發中,JavaScript與HTML、CSS一起操作DOM,實現動態效果,並支持如jQuery、React等框架。 2)通過ReactNative和Ionic,JavaScript用於開發跨平台移動應用。 3)Electron框架使JavaScript能構建桌面應用。 4)Node.js讓JavaScript在服務器端運行,支持高並發請求。

Python vs. JavaScript:比較用例和應用程序Python vs. JavaScript:比較用例和應用程序Apr 21, 2025 am 12:01 AM

Python更適合數據科學和自動化,JavaScript更適合前端和全棧開發。 1.Python在數據科學和機器學習中表現出色,使用NumPy、Pandas等庫進行數據處理和建模。 2.Python在自動化和腳本編寫方面簡潔高效。 3.JavaScript在前端開發中不可或缺,用於構建動態網頁和單頁面應用。 4.JavaScript通過Node.js在後端開發中發揮作用,支持全棧開發。

C/C在JavaScript口譯員和編譯器中的作用C/C在JavaScript口譯員和編譯器中的作用Apr 20, 2025 am 12:01 AM

C和C 在JavaScript引擎中扮演了至关重要的角色,主要用于实现解释器和JIT编译器。1)C 用于解析JavaScript源码并生成抽象语法树。2)C 负责生成和执行字节码。3)C 实现JIT编译器,在运行时优化和编译热点代码,显著提高JavaScript的执行效率。

JavaScript在行動中:現實世界中的示例和項目JavaScript在行動中:現實世界中的示例和項目Apr 19, 2025 am 12:13 AM

JavaScript在現實世界中的應用包括前端和後端開發。 1)通過構建TODO列表應用展示前端應用,涉及DOM操作和事件處理。 2)通過Node.js和Express構建RESTfulAPI展示後端應用。

JavaScript和Web:核心功能和用例JavaScript和Web:核心功能和用例Apr 18, 2025 am 12:19 AM

JavaScript在Web開發中的主要用途包括客戶端交互、表單驗證和異步通信。 1)通過DOM操作實現動態內容更新和用戶交互;2)在用戶提交數據前進行客戶端驗證,提高用戶體驗;3)通過AJAX技術實現與服務器的無刷新通信。

了解JavaScript引擎:實施詳細信息了解JavaScript引擎:實施詳細信息Apr 17, 2025 am 12:05 AM

理解JavaScript引擎內部工作原理對開發者重要,因為它能幫助編寫更高效的代碼並理解性能瓶頸和優化策略。 1)引擎的工作流程包括解析、編譯和執行三個階段;2)執行過程中,引擎會進行動態優化,如內聯緩存和隱藏類;3)最佳實踐包括避免全局變量、優化循環、使用const和let,以及避免過度使用閉包。

See all articles

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱工具

VSCode Windows 64位元 下載

VSCode Windows 64位元 下載

微軟推出的免費、功能強大的一款IDE編輯器

ZendStudio 13.5.1 Mac

ZendStudio 13.5.1 Mac

強大的PHP整合開發環境

MantisBT

MantisBT

Mantis是一個易於部署的基於Web的缺陷追蹤工具,用於幫助產品缺陷追蹤。它需要PHP、MySQL和一個Web伺服器。請查看我們的演示和託管服務。

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

mPDF

mPDF

mPDF是一個PHP庫,可以從UTF-8編碼的HTML產生PDF檔案。原作者Ian Back編寫mPDF以從他的網站上「即時」輸出PDF文件,並處理不同的語言。與原始腳本如HTML2FPDF相比,它的速度較慢,並且在使用Unicode字體時產生的檔案較大,但支援CSS樣式等,並進行了大量增強。支援幾乎所有語言,包括RTL(阿拉伯語和希伯來語)和CJK(中日韓)。支援嵌套的區塊級元素(如P、DIV),