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

lindroid 發布于2019-08-23 17:19 / 2805人閱讀

摘要：為什么你要在中使用熟悉的都應該知道，是一個的框架，為了解決更新的問題，使用了，通過修改，來實現高效的更新?？偨Y就是使用通過使用，可以讓我們更容易的去處理緩存回退數據變化檢測等問題，簡化我們的開發。

簡單的來講，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是個好東西，我們可以用它來解決一部分的上述問題，但是如果你留心的話，你可以在文檔中看到下面這段提示：
PureRenderMixin只是簡單的淺比較，不使用于多層比較。那怎么辦？？
自己去做復雜比較的話，性能又會非常差。
方案就是使用immutable.js可以解決這個問題。因為每一次state更新只要有數據改變，那么PureRenderMixin可以立刻判斷出數據改變，可以大大提升性能。
總結就是：使用PureRenderMixin + immutable.js
通過使用Immutable Data，可以讓我們更容易的去處理緩存、回退、數據變化檢測等問題，簡化我們的開發。

mutable data structure做diff需要遍歷
immutable只要對比一下reference是不是一個就行了

react做virtual dom的diff會快

首先，我們有必要來劃分一下邊界，哪些數據需要使用不可變數據，哪些數據要使用原生js數據結構，哪些地方需要做互相轉換？

云服務器 GPU云服務器大數據數據很多你要什么為什么網站托管要在云服務器上為什么要在阿里云買服務器搭建 React.js

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

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

React.js 最佳實踐（2016）_鏈接修正版

摘要：譯者按最近依舊如火如荼相信大家都躍躍欲試我們團隊也開始在領域有所嘗試年應該是逐漸走向成熟的一年讓我們一起來看看國外的開發者們都總結了哪些最佳實踐年在全世界都有很多關于新的更新和開發者大會的討論關于去年的重要事件請參考那么年最有趣的問題來了我譯者按：最近React(web/native)依舊如火如荼,相信大家都躍躍欲試,我們團隊也開始在React領域有所嘗試. 2016年應該是Reac...

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

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

csRyan 2019-08-22 10:50 評論0 收藏0
【譯】JavaScript 框架的探索與變遷（下）

摘要：對此沒有任何限制，它不關心這個。一種控制變化的辦法是不可改變的，持久化的數據結構。總結檢測變化時開發中的核心問題，而框架們以各種方式解決這個問題。因為組件內的變化是不被允許的。 AngularJS：臟檢查我不知道什么更新了，所以當更新的時候，我只能檢查所有的東西。 AngularJS 類似于 Ember，當狀態改變的時候，必須人工去處理。但不同的是，AngularJS 從不同的角度來...

CollinPeng 2019-08-21 17:53 評論0 收藏0
深入理解js

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

caikeal 2019-08-26 11:39 評論0 收藏0
[譯] 前端攻略-從路人甲到英雄無敵二：JavaScript 與不斷演化的框架

摘要：一般來說，聲明式編程關注于發生了啥，而命令式則同時關注與咋發生的。聲明式編程可以較好地解決這個問題，剛才提到的比較麻煩的元素選擇這個動作可以交托給框架或者庫區處理，這樣就能讓開發者專注于發生了啥，這里推薦一波與。本文翻譯自FreeCodeCamp的from-zero-to-front-end-hero-part。繼續譯者的廢話，這篇文章是前端攻略-從路人甲到英雄無敵的下半部分，在...

roadtogeek 2019-08-19 18:25 評論0 收藏0