搞定immutable.js詳細說明

2019-11-20 10:10:42

字體：大中小

來源：轉載

供稿：網友

什么是Immutable Data

Immutable Data是指一旦被創造后，就不可以被改變的數據。

通過使用Immutable Data，可以讓我們更容易的去處理緩存、回退、數據變化檢測等問題，簡化我們的開發。

js中的Immutable Data
在javascript中我們可以通過deep clone來模擬Immutable Data，就是每次對數據進行操作，新對數據進行deep clone出一個新數據。

deep clone

/** * learning-immutable - clone-deep.js * Created by mds on 15/6/6. */'use strict'; var cloneDeep = require('lodash.clonedeep');var data = {  id: 'data', author: {  name: 'mdemo',  github: 'https://github.com/demohi' }};var data1 = cloneDeep(data);console.log('equal:', data1===data); //falsedata1.id = 'data1'; data1.author.name = 'demohi';console.log(data.id);// data console.log(data1.id);// data1console.log(data.author.name);//mdemo console.log(data1.author.name);//demohi

當然你或許意識到了，這樣非常的慢。如下圖，確實很慢

主角immutable.js登場

immutable.js是由facebook開源的一個項目，主要是為了解決javascript Immutable Data的問題，通過參考hash maps tries 和 vector tries提供了一種更有效的方式。

簡單的來講，immutable.js通過structural sharing來解決的性能問題。我們先看一段視頻，看看immutable.js是如何做的

當我們發生一個set操作的時候，immutable.js會只clone它的父級別以上的部分，其他保持不變，這樣大家可以共享同樣的部分，可以大大提高性能。

為什么你要在React.js中使用Immutable Data

熟悉React.js的都應該知道，React.js是一個UI = f(states)的框架，為了解決更新的問題，React.js使用了virtual dom，virtual dom通過diff修改dom，來實現高效的dom更新。

聽起來很完美吧，但是有一個問題。當state更新時，如果數據沒變，你也會去做virtual dom的diff，這就產生了浪費。這種情況其實很常見，可以參考flummox這篇文章

當然你可能會說，你可以使用PureRenderMixin來解決呀，PureRenderMixin是個好東西，我們可以用它來解決一部分的上述問題，但是如果你留心的話，你可以在文檔中看到下面這段提示。

復制代碼代碼如下:

This only shallowly compares the objects. If these contain complex data structures, it may produce false-negatives for deeper differences. Only mix into components which have simple props and state, or use forceUpdate() when you know deep data structures have changed. Or, consider using immutable objects to facilitate fast comparisons of nested data.

PureRenderMixin只是簡單的淺比較，不使用于多層比較。那怎么辦？？自己去做復雜比較的話，性能又會非常差。

方案就是使用immutable.js可以解決這個問題。因為每一次state更新只要有數據改變，那么PureRenderMixin可以立刻判斷出數據改變，可以大大提升性能。這部分還可以參考官方文檔Immutability Helpers

總結就是：使用PureRenderMixin + immutable.js