immutable.js初識

AdolphLWQ 發布于2019-08-21 16:50 / 2296人閱讀

摘要：介紹按照官網的定義是指一旦被創造后，就不可以被改變的數據。很多場景下，對于屬性相同的對象，我們希望相等性判斷為。和都有一個名為方法，用來處理深度對象的比較。之于的好處眾所周知，性能優化的核心在于處理方法來避免不必要的渲染。

介紹

按照官網的定義, Immutable Data是指一旦被創造后，就不可以被改變的數據。

相等性判斷

JavaScript提供三種不同的值比較操作：

嚴格相等 ("triple equals" 或 "identity")，使用?===?

寬松相等 ("double equals")?，使用?==

Object.is（ ECMAScript 2015/ ES6 新特性）

三者區別如下：

那么，javascript是怎么對兩個對象進行比較的呢？

var person1 = {
  age: 27, 
  gender: "male",
  education: {major:"math",school:"Harvard"}
};

var person2 = {
  age: 27, 
  gender: "male",
  education: {major:"math",school:"Harvard"}
};

console.log(person1 == person2); //false
console.log(person1 === person2); //false
console.log(Object.is(person1,person2)); //false

雖然，person1和person2的屬性是完全一樣的，但是person1和person2相等性判斷為false。因為對象是通過指針指向的內存中的地址來比較的。

很多場景下，對于屬性相同的對象，我們希望相等性判斷為true。Underscore.js和Lodash都有一個名為_.isEqual()方法，用來處理深度對象的比較。大致思路是遞歸查找對象的屬性進行值比較（具體實現推薦這篇文章：https://github.com/hanzichi/u...）。當然了，對象層級越深，比較越耗時。

相比之下，immutable.js使用了 Structural Sharing（結構共享），特別擅長處理對象的比較，性能非常好。上面的代碼，讓我們換成immutable.js來表達：

const person1 = Immutable.Map( {
      age: 27, 
      gender: "male",
      education: Immutable.Map({
        major:"math",
        school:"Harvard"
      })
});

const person2 = Immutable.Map( {
      age: 27, 
      gender: "male",
      education: Immutable.Map({
        major:"math",
        school:"Harvard"
      })
});

const person3 = person1.setIn(["education","major"], "english"); //person3專業為english

console.log(Immutable.is(person1, person2));//true
console.log(Immutable.is(person1, person3));//false

恩，達到了我們想要的效果。

immutable.js之于react的好處

眾所周知，react性能優化的核心在于處理shouldComponentUpdate方法來避免不必要的渲染。雖然react提供了PureComponent，但它實質只是淺比較，無法很好地處理對象的比較，所以還是不能解決重復渲染的問題。

這個時候，immutable.js應運而生，它可以完美地解決這個問題，極大地提高react應用的性能。

GPU云服務器云服務器 docker初識初識關系數據庫

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/88789.html

Immutable.js 初識

摘要：文章博客地址所創建的數據有一個迷人的特性數據創建后不會被改變。是的基類，使用該類時需要至少繼承其子類中的一個。總結所提供的和固有的各有優勢，未來有可能制定一套原生的規范，在這之前，是一個不錯的選擇。參考資料官方文檔文章博客地址：http://pinggod.com/2016/Immutable/ Immutable.js 所創建的數據有一個迷人的特性：數據創建后不會被改變。我們使用 ...

Olivia 2019-08-19 18:45 評論0 收藏0
SegmentFault 技術周刊 Vol.16 - 淺入淺出 JavaScript 函數式編程

摘要：函數式編程，一看這個詞，簡直就是學院派的典范。所以這期周刊，我們就重點引入的函數式編程，淺入淺出，一窺函數式編程的思想，可能讓你對編程語言的理解更加融會貫通一些。但從根本上來說，函數式編程就是關于如使用通用的可復用函數進行組合編程。 showImg(https://segmentfault.com/img/bVGQuc); 函數式編程（Functional Programming），一...

csRyan 2019-08-22 10:50 評論0 收藏0
深入理解js

摘要：詳解十大常用設計模式力薦深度好文深入理解大設計模式收集各種疑難雜癥的問題集錦關于，工作和學習過程中遇到過許多問題，也解答過許多別人的問題。介紹了的內存管理。延遲加載 (Lazyload) 三種實現方式延遲加載也稱為惰性加載，即在長網頁中延遲加載圖像。用戶滾動到它們之前，視口外的圖像不會加載。本文詳細介紹了三種延遲加載的實現方式。詳解 Javascript十大常用設計模式力薦~ ...

caikeal 2019-08-26 11:39 評論0 收藏0