前言

有些需求需要展示長列表，無限下拉都會一直顯示出更多的數據。但是當一個頁面展示的DOM節點過多的時候，會造成小程序頁面的卡頓嚴重的會直接白屏。

原因有以下幾點：

• 列表數據很大，不斷獲取下一屏的數據，setData的數據越來越多的時候耗時高
• 渲染DOM 結構多，每次setData 都需要創建新的虛擬- 樹、和舊樹diff 操作耗時都比較高
• DOM 結構多，佔用的內存高，造成頁面被系統回收的概率變大，會白屏

針對這個場景，小程序官方已經有一個解決方案recycle-view：但是使用之後，我發現了很多問題，比如下一頁的頁面渲染不完整，或者拉取下一頁的數據會閃屏。

這些問題都已經反饋給相關開發，但是還沒有得到回复，所以我也不確定是不是我沒有用對，萬一等了半個月最後得到的結論是，官方組件不能滿足我們的場景，那就GG了。所以我只能暫時先追求另外一種解決方案了。

通過查看官方文檔跟組件代碼，可以看到他們的實現思路是這樣的：

由此我猜想，為什麼會出現渲染不完的情況，應該是由於它需要靠著用戶提供的item的高度來算哪些item需要渲染，然後來計算應該渲染出來的屏幕高度。那如果這個計算渲染屏幕高度偏少，就會有渲染不完的情況，計算的高度偏多，又會有渲染出空白的情況。當然我沒有去調試它的代碼，畢竟看別人的代碼是痛苦的，只是瞎猜一通而已。

既然我猜他是因為高度的問題，才出現那麼多問題，同時依賴用戶提供高度我覺得總是不靠譜，萬一他給錯了，就會使得渲染有問題。可不可以不要知道item的高度也可以知道哪些元素被渲染出來呢？

答案是可以的。

我們可以以一屏為一個單位，而不是以一個item為一個單位，這樣我無需開發者給我提供他的高度。我自己去記錄每一屏的高度，然後onscroll的時候，根據scollTop來計算當前應該渲染哪一屏，我把它首尾兩屏的元素也一起加起來算是我總的需要渲染元素。

這一套方案我已經用在了自己的項目：公眾號視頻頻道上。有興趣的小伙伴可以體驗一下，入口是：微信->訂閱號助手->常讀的訂閱號第一個入口點入即可。 （不過該功能還在灰度中，灰度到的朋友歡迎反饋～沒有被灰度到的朋友再等等）

有人可能會說：如果我是一屏拉取所有的數據而不是分屏，那你這個方法就不可行了。確實是這樣的，但是我覺得應該沒有什麼場景需要一次性拉取所有的數據。原因如下：
1、一屏你拉取所有節點，用戶根本看不完，所以意義不大
2、數據太大，造成網絡傳輸慢
3、setState也慢造成首屏慢我感覺沒啥好處，壞處倒是挺多的。所以不太建議一屏直接返回所有數據。

實現思路：

這裡我們通過改造一個通過分屏無限下拉長列表來說一下整個的實現思路。 https:// developers.weixin.qq.com /s/I9KsIKmo7yhz

這是一個長列表，它一屏獲取20個數據，由於元素都長的一樣，所以我用文案標明當前渲染的第幾個元素。特別說明一下：由於我每一個item只渲染一個元素，並且渲染的數據也很簡單，所以不會有我說的那些卡頓，白屏的問題。但是後面的實踐可以用戶複雜的項目中。

我的實現方案分為下面兩步：
1、將渲染列表的數組list改成二維數組。
2、只渲染當然可視區域的那一屏以及它前後一屏的元素。其他用空白div佔位要做到第二步，我們還需要分成三小步

• 需要知道每一屏的高度，這樣我們才能給這個佔位的空白div元素設置高度。
• 渲染下一屏last的數據，除了保留last，以及last-1那一屏的渲染，其他節點應該為空。
• 如果是獲取非最後一屏幕的，通過監聽onscrollTop 獲取到scrollTop的值，算取當前應該渲染哪一屏，在重新組裝數據setState

第一步

1、將渲染列表的數組list改成二維數組

為什麼要改成二維數組：

• 因為我們是以一屏的數據為單位的，所以用二維數組來裝每一屏的數據，方便以屏為單位渲染元素。
• 性能優化

原來我們是不停的獲取到新一屏的數據就不斷的concat進來，再去setState。

這樣的話，到後期這個finalArr會越來越大，由於setData的調用會把數據從邏輯層傳到渲染層，數據太大會增加通信時間。在性能不好的機型上，setState就會佔用很長的時間，從而造成頁面卡頓。

而我們通過改成二維數組，二維數組裡的每一個子數組都用來裝一屏的數據，然後每次只setState當前的下一屏幕的數據，就可以減少這個通信時間。

說了那麼多，來看看具體如何操作。

首先需要給每一屏一個索引值index來來表示當前是第幾屏，這裡我們用wholePageIndex來表示。

onLoad:function(){this.wholePageIndex=0;this.index=0;constarr=[{idx:this.index++},{idx:this.index++},{idx:this.index++}]this.setData({['list['+this.wholePageIndex+']']:arr})},

然後setData的時候，只是將當前這一屏幕的數據賦值。同理，下拉刷新之後獲取渲染下一屏的數據也一樣，只是需要給wholePageIndex加1表示是下一屏，在賦值即可。

this.wholePageIndex=this.wholePageIndex+1;this.setData({['list['+this.wholePageIndex+']']:arr})

完成後的代碼如下： https:// developers.weixin.qq.com /s/LSQsSKmj7bhb
這樣我們就可以看到，整個渲染是以屏為單位來渲染，比如當前渲染了三屏，那麼dom的結構如下：

第二步

2、只渲染當然可視區域的那一屏以及它前後一屏的元素。其他用空白div佔位來省去渲染過多DOM節點造成的白屏問題

這裡我做了第一屏，或者最後一屏，渲染兩屏的數據即可。因為首屏沒有上面一屏，最後一屏沒有下一屏。

前面說了要做到這一步，我們還得拆分成好幾步：

• 需要知道每一屏的高度，這樣我們才能給這個佔位的空白div元素設置高度。
• 渲染下一屏last的數據，除了保留last，以及last-1那一屏的渲染，其他節點應該為空。
• 如果是獲取非最後一屏幕的，通過監聽onscrollTop 獲取到scrollTop的值，算取當前應該渲染哪一屏，在重新組裝數據setState。

在開始工作之前，先定義幾個變量一會使用。

wholeVideoList:用来装所有屏的数据currentRenderIndex:当前正在渲染哪一屏pageHeightArr:用来装每一屏的高度windowHeight:当前屏幕的高度

在onLoad裡定義：

onLoad:function(){this.index=0;this.wholePageIndex=0;this.wholeVideoList=[];//用來裝所有屏的數據this.currentRenderIndex=0;//當前正在渲染哪一屏this.pageHeightArr=[];//用來裝每一屏的高度this.windowHeight=0;//當前屏幕的高度constarr=[{idx:this.index++},{idx:this.index++},{idx:this.index++},{idx:this.index++}]this.setData({['list['+this.wholePageIndex+']']:arr})}

同時為了區分好每一屏，我們給每一屏的最外層的div都加一個id: wrp_{{pageIndex}} 。

<view class="page"> <view wx:for="{{ list }}" id="wrp_{{pageIndex}}" wx:for-index="pageIndex" wx:for-item="listSingleItem" wx:key="index"> <view wx:if="{{ listSingleItem.length > 0 }}"> <view class="wrp" wx:for="{{ listSingleItem }}" wx:for-index="index" wx:for-item="listItem" wx:key="index">当前是第{{ listItem.idx }}个元素，为第{{ pageIndex }} 屏数据</view> </view> <view wx:else style="height: {{ listSingleItem.height}}px"> </view> </view> </view>

完成之後，效果如下：

這樣，每一屏的最外層都有一個帶id的元素包裹，我們將要利用它幫助我們去獲取這一屏的高度。

做完預備工作之後，接下來就可以完成我們的第一步驟：獲取每一屏幕的高度，在這裡我把獲取高度放進一個setHeight的函數來完成。

注意：這一步一定要在setState之後，也就是頁面渲染完成之後完成，這樣才能獲取元素的高度。

在setHeight裡，我們通過wx.createSelectorQuery去獲取當前最新渲染這一屏的高度，將其賦值給用於記錄每一屏高度的數組：pageHeightArr。

獲取首屏的高度，需要在onload裡做，而獲取非首屏的高度需要在獲取下一屏數據的函數getVideoInfoData做。

onLoad:function(){// ...this.setData({['list['+this.wholePageIndex+']']:arr},()=>{this.setHeight();//獲取首屏高度})},setHeight:function(){constthat=this;constwholePageIndex=this.wholePageIndex;this.query=wx.createSelectorQuery();this.query.select(`#wrp_${wholePageIndex}`).boundingClientRect()this.query.exec(function(res){that.pageHeightArr[wholePageIndex]=res[0]&&res[0].height;console.log('that.pageHeightArr'+that.pageHeightArr)})},onReachBottom:function(){this.getVideoInfoData();},getVideoInfoData:function(){constarr=[{idx:this.index++},{idx:this.index++},{idx:this.index++}]this.wholePageIndex=this.wholePageIndex+1;this.setData({['list['+this.wholePageIndex+']']:arr},()=>{this.setHeight();//獲取第二屏的高度})},

經過這樣操作之後，我們就知道當前每一屏的高度為多少了，這裡我把這個pageHeightArr打印出來：

完成第一小步之後，接著來看第二小步：渲染下一屏last的數據，除了保留last，以及last-1那一屏的渲染，其他節點用一個空白div佔位。

這裡有個難點，如何做到只渲染後兩屏的數據，其他用空白div佔位又不會造成閃屏呢？其實也很簡單，我們前面已經記錄了每一屏的高度，所以設置空白div的高度為這個高度佔位即可。二維數組裡的子元素我們要渲染的屏幕還是用數組來表示，不渲染的屏幕我們直接用一個對象{height: xXX}來表示。這樣在wxml裡就可以根據元素是否有length屬性來判斷是要渲染真的節點還是空節點。

下面來實現一下:

getVideoInfoData:function(){constarr=[{idx:this.index++},{idx:this.index++},{idx:this.index++}]this.wholePageIndex=this.wholePageIndex+1;constwholePageIndex=this.wholePageIndex;//新增代碼this.currentRenderIndex=wholePageIndex;this.wholeVideoList[wholePageIndex]=arr;letdatas={};lettempList=newArray(wholePageIndex+1).fill(0);if(wholePageIndex>2){tempList.forEach((item,index)=>{if(index<tempList.length-2){tempList[index]={height:this.pageHeightArr[index]};}else{tempList[index]=this.wholeVideoList[index];}})datas.list=tempList;}else{datas['list['+wholePageIndex+']']=arr;}this.setData(datas,()=>{this.setHeight();})},

首先我先把最新渲染的index賦值給表示當前正在渲染的屏幕的currentRenderIndex，同時將最新的數據賦值給裝有所有屏幕數據的wholeVideoList。 currentRenderIndex在第三步要使用，而wholeVideoList一會就會用到。

然後，我先同樣定義了一個數組tempList，當wholePageIndex > 2時，也就是渲染到第四屏的時候就有選擇的渲染，這個不是固定的，你可以根據你的需求改。接著我們用一個循環，判斷當前是否是後兩屏，如果是，才是有數據的數組，這裡的數據就從我們剛剛賦值的wholeVideoList獲取，否則子元素直接為一個對象{ height: this.pageHeightArr[ index]}。

給tempList賦值完之後，setState即可，

完成到這裡還不夠，還需要對wxml改造一下：

<viewclass="page"><viewwx:for="{{ list }}"id="wrp_{{pageIndex}}"wx:for-index="pageIndex"wx:for-item="listSingleItem"wx:key="index"><viewwx:if="{{ listSingleItem.length > 0 }}"><viewclass="wrp"wx:for="{{ listSingleItem }}"wx:for-index="index"wx:for-item="listItem"wx:key="index">當前是第{{ listItem.idx }}個元素，為第{{ pageIndex }} 屏數據</view></view><viewwx:elsestyle="height: {{ listSingleItem.height}}px"></view></view></view>

這裡可以看到wx:if="{{ listSingleItem.length > 0 }}"才去渲染數據，否則只是渲染一個空節點

<viewwx:elsestyle="height: {{ listSingleItem.height}}px"></view>

到這里當我們滾動到第四屏的時候，就可以看到效果了，除了後面兩屏真的渲染了數據，前面的都為一個div佔位，高度為我們之前記錄的高度。

到這裡第二小步完成。

接著第三小步：如果是獲取非最後一屏幕的，通過監聽onscrollTop 獲取到scrollTop的值，算取當前應該渲染哪一屏，在重新組裝數據setState。

這一塊的思路是這樣的，在onPageScroll的回調函數里，通過e.scrollTop獲取到當前的滾動距離。
注意：這裡考慮到性能問題，對onPageScroll做一個節流。

根據這個滾動距離以及每一屏的高度，來計算當前應該渲染哪一屏的數據。這個需要怎麼去算？其實很簡單，循環去遍歷pageHeightArr，用第一屏的高度tempScrollTop與滾動高度realScrollTop +當前屏幕的高度this.windowHeight做比較，如果tempScrollTop比較小，則用tempScrollTop累加第二屏的高度，一直到tempScrollTop > realScrollTop + this.windowHeight就是當前應該渲染的屏幕。

上述文字翻譯成代碼如下:

onPageScroll:throttle(function(e){constrealScrollTop=e.scrollTop;constthat=this;//滾動的時候需要實時去計算當然應該在哪一屏幕lettempScrollTop=0;constwholePageIndex=this.wholePageIndex;for(vari=0;i<this.pageHeightArr.length;i++){tempScrollTop=tempScrollTop+this.pageHeightArr[i];if(tempScrollTop>realScrollTop+this.windowHeight){console.log('set this.computedCurrentIndex'+i);this.computedCurrentIndex=i;break;}}},500),

計算出當前應該渲染的屏幕之後，接著我們就可以需要去對比，當前正在渲染的屏幕index: currentRenderIndex 是不是跟我們計算出來的computedCurrentIndex一樣，如果不同，就說明我們需要調整渲染的屏幕數據，調整的方式跟第二步很像，唯一的區別就是，在這裡我們渲染的是computedCurrentIndex，以及computedCurrentIndex +-1(即前後兩屏)的數據而不是後兩屏的數據。最後將computedCurrentIndex 賦值給currentRenderIndex即可。

onPageScroll:throttle(function(e){constrealScrollTop=e.scrollTop;constthat=this;//滾動的時候需要實時去計算當然應該在哪一屏幕lettempScrollTop=0;constwholePageIndex=this.wholePageIndex;for(vari=0;i<this.pageHeightArr.length;i++){tempScrollTop=tempScrollTop+this.pageHeightArr[i];if(tempScrollTop>realScrollTop+this.windowHeight-30){console.log('set this.computedCurrentIndex'+i);this.computedCurrentIndex=i;break;}}constcurrentRenderIndex=this.currentRenderIndex;if(this.computedCurrentIndex!==currentRenderIndex){//這裡給不渲染的元素佔位lettempList=newArray(wholePageIndex+1).fill(0);tempList.forEach((item,index)=>{if(this.computedCurrentIndex-1<=index&&index<=this.computedCurrentIndex+1){tempList[index]=that.wholeVideoList[index];}else{tempList[index]={height:that.pageHeightArr[index]};}})this.currentRenderIndex=this.computedCurrentIndex;this.setData({list:tempList},()=>{this.setHeight();})}},500),

完整代碼如下:
https:// developers.weixin.qq.com /s/u4VWjKm67mhz

到這，我們就完成了，一起來看看效果。

https://www.zhihu.com/video/1253480128120266752

可以看到，除了收尾只渲染兩屏，中間都是渲染三屏，其他用的是空白div佔位。

總結

可以看到整個過程的思路也是比較簡單，就是以屏為單位，只渲染屏幕前後兩屏的數據，不渲染的屏數用空白div佔位即可。

但是！當我寫完這篇文章，我想起來一個問題，為啥要通過監聽scroll 的判斷哪一屏來渲染， 直接用observeAPI 就好了啊，把這些scroll裡亂七八糟的計算去掉。這里大家可以自己試試，答案在這一篇

前言

我們每天都在寫JS，你是否想過，計算機是怎麼識別你的這一行代碼，並且執行相應指令？本篇文章為你講述從敲下一行JS代碼到這行代碼可以被執行算出正確的結果，都經歷了什麼。

編譯

學過計算器基礎的，即使學的不好，大概都知道計算機跟人能讀懂的語言是不一樣的，它只認識0101的二進制數。也就是機器指令碼（machine instruction code ） 。一開始，人們都是用它來寫程序，可以想到最早的程序員有多痛苦。這種二進制碼不易被人類理解和記憶， 估計出錯太多，最後終於聰明的人類終於發明了適合自己學習記憶各種高級計算機語言，也包括JS。

但是機器並不能直接理解JS語言，所以這裡就需要一個中介幫忙程序解釋並且將其編譯成機器指令碼給計算機執行。這個過程就叫編譯。

而我們chrome瀏覽器裡的V8引擎就是幫我們做這個事情的中介。但是並不是只有google一家在做瀏覽器啊，所以市面上還有很多JS引擎。下面是從網上趴的圖：

而另前端痛苦不堪的瀏覽器兼容問題，就是因為使用的JS引擎不同，所以能夠理解的JS語法不同，我們就需要寫好幾種兼容語法。

所以終極解決兼容問題的方法就是：全部瀏覽器都用一種JS引擎，目前v8大有一統天下的趨勢，不過這個東西最終能不能實現今天就不討論了。

編譯原理

無論是哪種編譯器，原理都差不多。所以我們直接來看看編譯原理，就知道V8大概是如何工作的了。

編譯一般分為三個步驟：

• 詞法分析(laxical Analysis)詞法分析的意思就是，將代碼塊切分成最小的單位。這些最小單位稱為token。比如var a = 2;可以切分成var,a,=,2。
• 語法分析(Syntactic Analysis)將詞法單元轉換成一個有層級，代表程序語法結構的樹，這就是我們經常說的AST，抽象語法樹。

注意：詞法分析跟語法分析不是完全獨立的，而是交錯運行的。也就是說，並不是等所有的token都生成之後，才用語法分析器來處理。一般都是每取得一個token，就開始用語法分析器來處理了。

下面我們來看看一個add函數會生成怎樣的語法樹：

functionadd(a,b){returna+b}

生成的樹太長了，截圖不完整，可以在AST Exploer看到最終的AST。

可以看到這就是這段函數的樹形展示，如果你沒看懂，可以看這篇文章。這裡就不具體解釋每個FunctionDeclaration Identifier BlockStatement的意思了。

AST可是所有編譯器以及轉換器的基礎核心，我們常用的babel轉碼過程就是先將ES6的代碼編成AST，然後轉換成ES5的AST，最後由這個AST還原出ES5代碼。有興趣的可以看這篇文章，這篇文章是將LISP-style代碼的轉成C-style代碼，不過原理都一樣。

可以說基於AST，你可以隨意玩轉各種編程語言的相互轉換。

構建語法樹，還有一層作用，就是發現語法錯誤。當JS解析器發現無法構造這個抽象語法樹的時候，就會報語法錯誤，並結束整個代碼塊的解析。而對於一些強類型語言（也就是一開始就要定義這個變量是什麼類型，後面都不能改變），在構建出語法樹之後，還會有類型檢查。但是對於JS這種弱類型語言，就沒有這一步。當然TypeScipt為我們提供了類型檢查，並且可以將我們的typeScript代碼編譯成JS。

• 代碼生成(Code Genaration)

最後一步就是將AST轉成計算機可以識別的機器指令碼。

V8引擎的編譯過程基本就是上面這個過程，但是它多了一步生成字節碼的過程。首先用解析器生成AST，然後用解釋器Ignition根據語法樹生成字節碼，最後再用TurboFan將字節碼生成機器指令碼。

為什麼要先轉成字節碼？是因為直接生成機器指令碼太佔內存了。

整個過程就是這麼簡單了。

V8 為什麼那麼快

因為JS是解釋型語言，支持動態類型，弱類型，那就沒辦法先編譯找到變量的地址跟類型，所以JS的編譯過程發生在執行前的那段時間，對JS引擎的性能要求特別高。

那麼V8是如何做到的呢？

1、腳本流(script streaming)

以前的chrome裡，網絡拿到數據之後，必須經過chrome主線程轉發到流解析器。但是，當網絡數據到達之後，主線程有可能被其他事情佔住，比如HTML解析，佈局，其他JS執行。這樣這些數據就沒辦法被即使解析。

從Chrome 75開始，V8可以將腳本直接從網絡流傳輸到流解析器中，而無需等待chrome主線程。

這意味著腳本一旦開始加載，V8就會在單獨的線程上解析。這樣下載腳本完成後幾乎立即完成解析，從而縮短頁面加載時間。

2、字節碼緩存

首次訪問頁面的時候，JS代碼會被編譯成字節碼。當再次訪問同一個頁面的時候，會直接復用首次解析出來的字節碼。這樣就省去了下載，解析，編譯的步驟，可以使chrome節省大約40%的時間。

3、內聯

如果一個函數內部調用其他函數，那麼編譯器會直接函數中將要執行的內容放到主函數里。

functionadd(a,b){returna+b;}functioncalculateTwoPlusFive(){varsum;for(vari=0;i<=1000000000;i++){sum=add(2+5);}}varstart=newDate();calculateTwoPlusFive();varend=newDate();vartimeTaken=end.valueOf()-start.valueOf();console.log("Took "+timeTaken+"ms");

內聯屬性會將這個代碼編譯成

functionadd(a,b){returna+b;}functioncalculateTwoPlusFive(){varsum;for(vari=0;i<=1000000000;i++){sum=2+5;}}varstart=newDate();calculateTwoPlusFive();varend=newDate();vartimeTaken=end.valueOf()-start.valueOf();console.log("Took "+timeTaken+"ms");複製代碼

我把這段代碼放在safari上跑需要1454ms，而chrome只需要453ms，基本只有三分之一。

4、隱藏類

對於C++/Java，訪問指令可以在編譯階段生成。

因為它們的每一個變量都有指定的類型。所以一個對象包含什麼成員，這些成員是什麼類型，在對像中的偏移量都可以在編譯階段就確定了。那麼在CPU執行的時候就輕鬆了，要訪問這個對像中的某個變量的時候，直接用對象的首地址加偏移量就可以訪問到。

但是JS是動態語言，運行的時候不僅可以隨意換類型，還可以動態添加刪除屬性。所以訪問對象屬性完全得運行的時候才能決定。

如果JS引擎每次都需要進行動態查詢，會造成大量的性能損耗。所以V8引入了隱藏類機制。在初始化對象時候，會給他創建一個隱藏類，而後增刪屬性都會在創建一個隱藏類或者查找之前已經創建好的類。

那麼這些隱藏類裡的成員對於這個類來說就是固定的。所以他們的偏移量對於這個類來說也是固定的，那麼在後續再次調用的時候就能很快的定位到他的位置。下面來看個例子：

functionPerson(name,age){this.name=name;this.age=age;}vardaisy=newPerson("daisy",32);varalice=newPerson("alice",20);daisy.email="daisy@qq.com";daisy.job="engineer";alice.job="engineer";alice.email="alice@qq.com";

對於這段代碼，它的隱藏類的生成過程如下：

首先兩個new Person（）的時候，生成的隱藏類為C0，因為此時沒有任何屬性。當執行this.name = name;的時候多了一個屬性，於是又生成了C1。後面同理，到C2生成的時候，daisy跟alice的隱藏類都是一樣的，就是C2，此時有兩個屬性。

但是後面由於動態添加屬性的順序不同，就造成了屬性在類中的偏移量不同，也會生成不同的隱藏類。這樣就沒辦法共享隱藏類，導致浪費資源生成新的隱藏類。

所以我們動態賦值的時候，盡量保證順序也是一致的。

5、熱點函數會被直接編譯成機器碼

v8在運行的時候，會採集JS代碼運行數據。當發現某個函數被頻繁調用，那麼就會將它標記成熱點函數，並且認為他是一個類型穩定的函數。這時候會將它生成更為高效的機器碼。

但是在後面的運行中，萬一類型發生變化，V8又要回退到字節碼。

比如：

functionadd(a,b){returna+b}// 这里使用add的时候一直传入number类型
for(vari=0;i<10000;++i){add(i,i);}// 最后却传了string，会退回到字节码，会使得性能受损
add('a','b');

同理，下面兩段代碼可以猜猜誰的執行效率高？

// 片段1 var person = { add : function ( a , b ){ return a + b ; } }; obj . name = 'li' ; // 片段2 var person = { add : function ( a , b ){ return a + b ;} name : 'li' };

答案是2。結合前面知識，我們可以知道，方法一中動態添加屬性會生成一個新的隱藏類。如果add函數此時已經被轉成機器碼，那麼對於方法一來說，就沒辦法復用了。因為類都是新的了。

所以函數參數類型越穩定，對象內部屬性越穩定，V8的效率越高。

總結

從敲下一段JS代碼到它最終被計算機理解並執行，中間經歷了詞法分析，語法分析，生成機器碼，執行機器碼的過程。

當然這個編譯的過程是很複雜的，尤其js還是動態語言，對於js引擎的性能要求就很高了。 V8做了很多事情來提升瀏覽器的性能，其中包括但不限於：

1. 腳本流

下載的同時就已經在解析，節省時間

2.字節碼緩存

訪問同一個頁面的時候直接復用之前的字節碼，不在重新編譯生成

3.內聯

將主函數中調用的函數，直接換成將要執行的語句

4.隱藏類

通過隱藏類快速定位到動態加入的屬性注意：動態加入的屬性順序不一樣，會造成生成不同的隱藏類，我們動態賦值同一個構造函數對象的時候，盡量保證順序也是一致的。

5.熱點函數編譯成機器碼

將常用的函數直接一步到位編成機器碼。注意：常用的函數傳入的類型保持固定。並且對象的屬性越穩定，越有利於性能。

參考文檔
1、 https:// juejin.im/post/5ada727c 518825670b33a584

2、 https:// the-super-tiny-compiler.glitch.me /intro

3、 https:// blog.csdn.net/weixin_34 184561/article/details/87999100

4、 https:// segmentfault.com/a/1190 000016231512#comment-area

5、 https:// blog.csdn.net/weixin_34 184561/article/details/87999100

6、 https:// s0v80dev.icopy.site/blo g/v8-release-78

7、 https:// blog.csdn.net/weixin_34 184561/article/details/87999100

8、 https:// juejin.im/post/5c36fc33 518825253b5e94e3

前言

前端目前兩個當家花旦框架VUE React，它們能夠流行開來，響應式原理做出了巨大貢獻。畢竟，它通過數據的變更就能夠更新相應的視圖，極大的將我們從繁瑣的DOM操作中解放出來。

所以掌握它們的響應式原理，對掌握前端框架的精髓就很重要了。

本文用最簡單的方式來解釋VUE2 最重點的響應式原理，看不懂算我輸！

一、 響應式原理

什麼是響應式原理？

意思就是在改變數據的時候，視圖會跟著更新。這意味著你只需要進行數據的管理，給我們搬磚提供了很大的便利。 React也有這種特性，但是React的響應式方式跟VUE完全不同。

React是通過this.setState去改變數據，然後根據新的數據重新渲染出虛擬DOM，最後通過對比虛擬DOM找到需要更新的節點進行更新。

也就是說React是依靠著虛擬DOM以及DOM的diff算法做到這一點的。而關於React這方面的文章，我已經寫了很多了，還不了解的同學可以自行複習一下。

而VUE則是利用了Object.defineProperty的方法裡面的setter與getter方法的觀察者模式來實現。

所以在學習VUE的響應式原理之前，先學習兩個預備知識：
Object.defineProperty 與觀察者模式。

如果你已經掌握了，可以直接跳到第三part。

二、預備知識

2.1 Object.defineProperty

這個方法就是在一個對像上定義一個新的屬性，或者改變一個對象現有的屬性，並且返回這個對象。裡面有兩個字段set,get。顧名思義，set都是取設置屬性的值，而get就是獲取屬性的值。

舉個栗子：

//在對像中添加一個屬性與存取描述符的範例varbValue;varo={};Object.defineProperty(o,"b",{get:function(){console.log('監聽正在獲取b')returnbValue;},set:function(newValue){console.log('監聽正在設置b')bValue=newValue;},enumerable:true,configurable:true});o.b=38;console.log(o.b)

最終打印

监听正在设置b监听正在获取b38

從在上述栗子中，可以看到當我們對ob 賦值38的時候，就會調用set函數，這時候給bValue賦值，之後我們就可以通過ob來獲取這個值，這時候，get函數被調用。

掌握到這一步，我們已經可以實現一個極簡的VUE雙向綁定了。

<inputtype="text"id="txt"/><spanid="sp"></span><script>vartxt=document.getElementById('txt'),sp=document.getElementById('sp'),obj={}//給對象obj添加msg屬性，並設置setter訪問器Object.defineProperty(obj,'msg',{//設置obj.msg當obj.msg反生改變時set方法將會被調用set:function(newVal){//當obj.msg被賦值時同時設置給input/spantxt.value=newValsp.innerText=newVal}})//監聽文本框的改變當文本框輸入內容時改變obj.msgtxt.addEventListener('keyup',function(event){obj.msg=event.target.value})</script>

VUE給data裡所有的屬性加上set,get這個過程就叫做Reactive化。

2.2 觀察者模式

什麼是觀察者模式？它分為註冊環節跟發布環節。

比如我去買芝士蛋糕，但是店家還沒有做出來。這時候我又不想在店外面傻傻等，我就需要隔一段時間來回來問問蛋糕做好沒，對於我來說是很麻煩的事情，說不定我就懶得買了。

店家肯定想要做生意，不想流失我這個吃貨客戶。於是，在蛋糕沒有做好的這段時間，有客戶來，他們就讓客戶把自己的電話留下，這就是觀察者模式中的註冊環節。然後蛋糕做好之後，一次性通知所有記錄了的客戶，這就是觀察者的發布環節。

這裡來簡單實現一個觀察者模式的類

functionObserver(){this.dep=[];register(fn){this.dep.push(fn)}notify(){this.dep.forEach(item=>item())}}constwantCake=newOberver();//每來一個顧客就註冊一個想執行的函數wantCake.register(()=>{'console.log("call daisy")'})wantCake.register(()=>{'console.log("call anny")'})wantCake.register(()=>{'console.log("call sunny")'})//最後蛋糕做好之後，通知所有的客戶wantCake.notify()

三、原理解析

在學完了前面的鋪墊之後，我們終於可以開始講解VUE的響應式原理了。

官網用了一張圖來表示這個過程，但是剛開始看可能看不懂，等到文章的最後，我們再來看，應該就能看懂了。

總共分為三步驟：
1、init階段： VUE的data的屬性都會被reactive化，也就是加上setter/getter函數。

functiondefineReactive(obj:Object,key:string,...){constdep=newDep()Object.defineProperty(obj,key,{enumerable:true,configurable:true,get:functionreactiveGetter(){....dep.depend()returnvalue....},set:functionreactiveSetter(newVal){...val=newValdep.notify()...}})}classDep{statictarget:?Watcher;subs:Array<Watcher>;depend(){if(Dep.target){Dep.target.addDep(this)}}notify(){constsubs=this.subs.slice()for(leti=0,l=subs.length;i<l;i++){subs[i].update()}}

其中這裡的Dep就是一個觀察者類，每一個data的屬性都會有一個dep對象。當getter調用的時候，去dep裡註冊函數，
至於註冊了什麼函數，我們等會再說。

setter的時候，就是去通知執行剛剛註冊的函數。

2、mount階段：

mountComponent(vm:Component,el:?Element,...){vm.$el=el...updateComponent=()=>{vm._update(vm._render(),...)}newWatcher(vm,updateComponent,...)...}classWatcher{getter:Function;//代碼經過簡化constructor(vm:Component,expOrFn:string|Function,...){...this.getter=expOrFnDep.target=this//注意這裡將當前的Watcher賦值給了Dep.targetthis.value=this.getter.call(vm,vm)//調用組件的更新函數...}}

mount 階段的時候，會創建一個Watcher類的對象。這個Watcher實際上是連接Vue組件與Dep的橋樑。
每一個Watcher對應一個vue component。

這裡可以看出new Watcher的時候，constructor 裡的this.getter.call(vm, vm)函數會被執行。 getter就是updateComponent。這個函數會調用組件的render函數來更新重新渲染。

而render函數里，會訪問data的屬性，比如

render:function(createElement){returncreateElement('h1',this.blogTitle)}

此時會去調用這個屬性blogTitle的getter函數，即：

// getter函数
get:functionreactiveGetter(){....dep.depend()returnvalue....},// dep的depend函数
depend(){if(Dep.target){Dep.target.addDep(this)}}

在depend的函數里，Dep.target就是watcher本身（我們在class Watch裡講過，不記得可以往上第三段代碼），這裡做的事情就是給blogTitle註冊了Watcher這個對象。這樣每次render一個vue 組件的時候，如果這個組件用到了blogTitle，那麼這個組件相對應的Watcher對像都會被註冊到blogTitle的Dep中。

這個過程就叫做依賴收集。

收集完所有依賴blogTitle屬性的組件所對應的Watcher之後，當它發生改變的時候，就會去通知Watcher更新關聯的組件。

3、更新階段：

當blogTitle 發生改變的時候，就去調用Dep的notify函數,然後通知所有的Watcher調用update函數更新。

notify(){constsubs=this.subs.slice()for(leti=0,l=subs.length;i<l;i++){subs[i].update()}}

可以用一張圖來表示：

由此圖我們可以看出Watcher是連接VUE component 跟data屬性的橋樑。

總結

最後，我們通過解釋官方的圖來做個總結。

1、第一步：組件初始化的時候，先給每一個Data屬性都註冊getter，setter，也就是reactive化。然後再new 一個自己的Watcher對象，此時watcher會立即調用組件的render函數去生成虛擬DOM。在調用render的時候，就會需要用到data的屬性值，此時會觸發getter函數，將當前的Watcher函數註冊進sub裡。

2、第二步：當data屬性發生改變之後，就會遍歷sub裡所有的watcher對象，通知它們去重新渲染組件。

整個過程就是那麼簡單啦~

彩蛋

本來這篇文章應該已經結束了，但是我們既然已經學會了響應式原理，那當然要對目前vue的一些規則做點解釋啦。算是贈送的彩蛋~。

• 如果你想要屬性是響應式的，就一定要寫在data對象裡。因為VUE只對data裡的屬性做reactive化處理。

var vm = new Vue({ data:{ a:1 } }) // `vm.a` 是响应的vm.b = 2 // `vm.b` 是非响应的

或者使用Vue.set(vm.someObject, 'b', 2)動態添加。

參考文檔：

1、 https:// zhuanlan.zhihu.com/p/67 893936
2、 https://www. njleonzhang.com/2018/09 /26/vue-reactive.html
3、 https:// vuejs.bootcss.com/v2/gu ide/reactivity.html

前言

這篇文章主要講Hooks，如果你想了解React 16的其他新特性，請移步React 16新特性全解（上） ， React 16新特性全解（中）

v16.8 Hooks

Hooks是什麼？

我們知道，functional component在使用的時候有一些限制，比如需要生命週期、state的時候就不能用functional component。而有了Hooks，你就可以在funtional component裡，使用class component的功能:props，state，context，refs，和生命週期函數等等。

雖然Hooks已經有要取代正宮class的趨勢了，但是react目前沒有計劃拋棄class，所以不要慌，你還是可以跟往常一樣使用class。

在真正介紹Hook之前，還是一樣先來了解為什麼要引入Hooks？其實不單單是為了給functional component賦於class component的功能。

還有下面的問題：

1.組件之間很難復用邏輯

之前如果我們需要復用邏輯，常用的兩種方式是render props跟higher-order components 。但是這兩種方式都需要你重構代碼，所以比較麻煩。

最重要的是，用這兩種方式的話，在React Devtools裡，會看到很多的嵌套組件。

在這個圖可以看到Header外層套著很多嵌套組件。

2.複雜組件很難理解

在之前的class component裡，我們的生命週期函數里通常放著不相關的代碼，而相關的代碼確要放在不同的生命週期函數里。這樣說可能有點繞，我們來看一個具體的例子。

classAppextendsReact.component{componentDidMount(){window.addEventListener('scroll',()=>{console.log('a')})this.fetchData();}componentDidUpdate(){this.fetchData();}componentWillUnmount(){window.removeEventListener('scroll',()=>{console.log('a')})}render(){return<div>ddd</div>}}

這應該是我們平時會經常寫的代碼。在componentDidMount裡做事件綁定，獲取數據。在componentWillUnMount裡解綁事件。

這樣做的問題是：componentDidMount裝著的代碼都是不相關的，而相關聯的事件綁定以及事件解綁，分散在componentDidMount 跟componentWillUnMount裡。這樣如果組件的邏輯越寫越複雜之後，就會變得很難維護易出bug。

後面講Effect Hook的時候，我會介紹這個問題用Hooks怎麼解決。

3.class比較難學

React團隊發現class是初學者學習React的大障礙。要學習class component,你必須要知道幾點：

1. this在JS是如何工作的（光是這個就夠繞的）
2. 記得綁定事件
3. 了解state，props，state以及從上而下的數據流
4. functional component跟class component的區別，如何使用它們

如何使用

理解了Hooks誕生的原因，接著來看看要如何使用。

假設我需要實現一個功能，點擊app時候，count數目加一。用class的形式實現就是這樣的：

Class:

classExampleextendsReact.Component{constructor(props){super(props);this.state={count:0};}render(){return(<div><p>Youclicked{this.state.count}times</p><buttononClick={()=>this.setState({count:this.state.count+1})}>Clickme</button></div>);}}

Hooks:

如果需要用Hooks實現，變成

import React , { useState } from 'react' ; function Example () { // Declare a new state variable, which we'll call "count" const [ count , setCount ] = useState ( 0 ); return ( < div > < p > You clicked { count } times < /p> < button onClick = {() => setCount ( count + 1 )} > Click me < /button> < /div> ); }

演示地址

在這裡demo中。 useState就是Hook。我們通過它來在function component裡加入state數據。

兩者對比如下：

1.定義state變量

Class:

classExampleextendsReact.Component{constructor(props){super(props);this.state={count:0};}

Hooks:

importReact,{useState}from'react';functionExample(){// 通过useState这个Hooks定义state变量:count。并且通过useState给count赋初始值0，只在初始化时候使用一次
const[count,setCount]=useState(0);

在function component裡，我們是沒有this的。所以沒辦法向Class那樣用this來創建state，這時候Hooks閃亮登場。

通過useState這個hooks我們可以定義count這個state變量。由Hooks定義的state變量不一定要是object，可以是string、number。傳入的內容相當於給變量賦初始值。

function ExampleWithManyStates() { // Declare multiple state variables! const [age, setAge] = useState(42); const [fruit, setFruit] = useState('banana'); const [todos, setTodos] = useState([{ text: 'Learn Hooks' }]); // ... }

2.渲染state

Class:

<p>Youclicked{this.state.count}times</p>

Hooks:

<p>Youclicked{count}times</p>

可以不需要用this，直接使用count

3.更新state

Class:

<buttononClick={()=>this.setState({count:this.state.count+1})}>Clickme</button>

Hooks:

<buttononClick={()=>setCount(count+1)}>Clickme</button>

我們可以看到const [count, setCount] = useState(0); useState返回兩個參數，一個是當前state的值，還有一個其實是一個函數，用來改變state的值，就是setCount。

類似setState，但是不同的是，它不會將舊的state跟新的state合併在一起，而是覆蓋式的重寫state的值。

說完了functional component裡面如何使用state之後，我們再來看如何用Effect Hook來取代生命週期。

一般我們都會在生命週期componentDidMount, componentDidUpdate與componentWillUnmount中做一些副作用的操作，例如：獲取數據，訂閱，手動改變DOM。而在hooks裡，這些生命週期函數都被統一成一個方法useEffect。

下面我們來舉個例子：

importReact,{useState,useEffect}from'react';functionExample(){const[count,setCount]=useState(0);// Similar to componentDidMount and componentDidUpdate:useEffect(()=>{// Update the document title using the browser APIdocument.title=`You clicked${count}times`;});return(<div><p>Youclicked{count}times</p><buttononClick={()=>setCount(count+1)}>Clickme</button></div>);}

在這個例子中，我們在useEffect 裡完成了副作用的操作。 demo演示

Effects Hooks 就在functional component裡， 所以它可以直接訪問props跟state。 React在每次render之後都會調用effect，包括第一次render。

但是這裡還遺留兩個問題

1、我們在開篇說到，class component有個問題就是生命週期函數里的代碼都是不相關的，而相關的代碼確要被打散在不同的生命週期函數里。這個問題用Hooks的話就可以解決。

比如綁定、解綁事件，在使用class的時候，在componentDidMount裡監聽了一個事件，之後需要在componentWillMount裡給它解綁。

用Hook只需要在useEffect一個函數就可以做到。它可以通過返回一個函數來專門做清除的工作，代碼如下：

importReact,{useState,useEffect}from'react';functionFriendStatus(props){const[isOnline,setIsOnline]=useState(null);functionhandleStatusChange(status){setIsOnline(status.isOnline);}useEffect(()=>{ChatAPI.subscribeToFriendStatus(props.friend.id,handleStatusChange);//在這裡返回一個函數來做這件事return()=>{ChatAPI.unsubscribeFromFriendStatus(props.friend.id,handleStatusChange);};});if(isOnline===null){return'Loading...';}returnisOnline?'Online':'Offline';}

在這個case中，unsubscribeFromFriendStatus不僅僅會在組件unmount的時候調用，同時在重新渲染的時候也會調用。

如果你只想useEffect只在mount與unmount時候調用，需要這樣傳一個[] 作為第二個參數。

useEffect(()=>{ChatAPI.subscribeToFriendStatus(props.friend.id,handleStatusChange);return()=>{ChatAPI.unsubscribeFromFriendStatus(props.friend.id,handleStatusChange);};},[]);

2、有時候我們並不想每次state的改變，都去調用useEffect。在class裡，會這樣做

componentDidUpdate(prevProps,prevState){if(prevState.count!==this.state.count){document.title=`You clicked ${this.state.count} times`;}}

在Hooks，可以通過給useEffect傳入第二個參數，即它關注的state變量，來做到這件事。

例如：當count改變時候，才去調用useEffect。

useEffect(()=>{document.title=`You clicked ${count} times`;},[count]);// Only re-run the effect if count changes

注意事項：

1. Hooks只可以在頂層使用。也就是說它不能寫在循環體，條件渲染，或者嵌套function裡
2. 只可以在React的function組件裡使用Hooks。

說了那麼多，總結以下，其實Hooks就是幫助我們在function component裡直接使用原來class component才有的特性。

以上，我們只接觸到了兩種hooks，還有更多比如useContext, useReducer, useCallback ,感興趣的同學可以自己看下~

最後是使用Hooks的一些建議：

一些建議

1. 是否需要用hoooks重構以前的代碼？

No，react團隊不推薦用hooks重新寫一遍。推薦做法是新的組件可以直接使用，然後需要改老組件代碼的時候在順便改就行了。

2.支持Hooks的工具

React DevTools對hooks已經支持。同時強烈推薦安裝hooks的eslint校驗庫eslint-plugin-react-hooks 。

Reac團隊下一步計劃

因為現在React Hooks還不能完全cover所有class的功能，雖然他們已經很相近了。目前為止Hooks不支持兩個不常使用的API getSnapshotBeforeUpdate 跟componentDidCatch，但是React團隊正在努力，未來會支持的。

參考文檔：

1.

前言

這篇文章主要介紹v16.4~ v16.6的特性，如果你關注Hooks，可以直接看React 16新特性全解（下）

目錄

• v16.4

1. 新增指針事件
2. fix生命週期函數

• v16.5

1. 提供新的調試工具

• v16.6

1. memo
2. lazy
3. suspense
4. 簡化contextType
5. 增加getDerivedStateFromError

16.4

新增指針事件

新增了對對指針設備（例如鼠標，觸控筆，或者手指觸摸）觸發的dom事件：

• onPointerDown
• onPointerMove
• onPointerEnter
• onPointerLeave
• onPointerOver
• onPointerOut

等等。

但是這個事件僅支持那些支持指針事件的瀏覽器，比如目前最新版本的Chrome，Firefox，Edge IE瀏覽器）。但是如果你的應用程序真的依賴這些事件，可以使用第三方的polyfill。因為React團隊對了避免增大react的bundle size，所以沒有放進去。

demo時刻

這裡展示的是一個鼠標的拖拽功能，可以自己try try。

fix生命週期函數- getDerivedStateFromProps

React 16.0 ~ React 16.3 :

生命週期的圖如下：

這裡我們可以看到getDerivedStateFromProps這個生命週期函數有個問題就是在Updating階段的時候，無論使用setState還是forceUpdate,都不調用getDerivedStateFromProps。

餵，這明顯有問題啊？ ！那我在updating階段都沒辦法監聽到props的改變來搞事情了。

React團隊還是很快意識到了這個問題的。所以在這個版本，他們fix了這個問題，新的圖長這樣：

很簡單，就是fix了之前Updating階段用setState，forceUpdate調用不到getDerivedStateFromProps這個問題。

v16.4.2

這個小版本的發布主要是為了fix一個服務端的XSS漏洞，我本來不想講，但是看大家那麼好學，還是提一下把。

呃，別告訴我你還不知道什麼是XSS漏洞，拜託趕緊現在立刻馬上去學一下，這個必會。一個簡單的例子就是用戶輸入了你不想讓他輸入的內容，尤其帶有JS html標籤的，給你的網站帶來了麻煩。

這個XSS具體場景是這樣的：

letprops={};// 注意：这里props的属性依靠用户输入
props[userProvidedData]="hello";letelement=<div{...props}/>;lethtml=ReactDOMServer.renderToString(element);

此時，用戶輸入：

letuserProvidedData='></div><script>alert("hi")</script>';

那麼最終生成的html就會變成：

<div></div><script>alert("hi")</script>

這就是我們常見的XSS攻擊。

但是現實中我們dom元素屬性需要依賴用戶輸入的場景非常的少，所以對於大部分應用來說沒有影響，最重要的是意味著對大部分開發者都沒有影響，這樣我們就不用擔心要半夜起來改代碼，還是可以的。

v16.5 React Profiler

這個版本提供了對新的Profiler DevTools插件的支持。這個插件就厲害了，可以通過收集每個組件的渲染耗時，來幫助我們找到ReactApp的渲染瓶頸，並且整個界面更加清爽清晰，簡直是開發者的福利。

話不多說，下面來講解下如何使用：

1. 首先安裝React DevTools插件

如果你的React版本已經升到16.5以上，那麼你的DevTools的界面會變成這樣： 打開第二個tab。

2.點擊中間這個button開始記錄

3.接著操作你想要記錄的操作，完事之後點stop

4.看結果圖

在講解之前，先普及一些知識。知道Fiber的同學應該都了解，現在React渲染過程分為兩個階段：

一、render階段

這個階段主要是對比，有那些DOM節點需要更新。

二、commit階段

將第一階段收集的訊息更新到真實節點，完成之後會調用componentDidMount跟componentDidUpdate。

接著看結果圖。

圖示一的地方顯示的是每一次commit的耗時，其中黑色表示當前選中的commit，可以左右移動來選擇，其中柱子越高說明這次的commit耗時約多。

圖示二表示的是這次commit發生在第幾S，它的render階段耗時多少。

圖示三表示的是這次commit裡每一個組件的耗時。由圖中我們可以看到Router耗時最多，達到18.4ms。而耗時主要來源於Nav 跟Route組件。如果你去點擊每個組件，還可以在右邊看到這個組件此時的state跟props，那就可以很清晰的知道這個組件此刻在渲染什麼。

小技巧

再說最後一個小技巧，你可以選中某個組件，然後點擊右上角兩次相鄰的commit，這樣你就知道是哪個state的改變引發了這次的re-render。比如下面的例子，就是scrollOffset的變化導致整個App的變化。

以上就是一些基本使用，關於實際例子的演示，還挺多的，可以單獨寫一篇文章了。有時間的話在給大家介紹。

v16.6

memo

React 15 ：如果你想阻止組件的重複渲染，在class component裡可以使用PureComponent, shouldComponentUpdate來幫助你。但是如果你是function component，對不起，沒有這個功能， 只能每次都重新渲染。

React 16 ：為了全面擁抱function component,React團隊寫了memo來幫助function component實現這個阻止重複渲染的功能。

demo

在這個demo可以看到，如果沒有memo，每次點擊button控制台都會打印render表示重新渲染。但是加了memo之後，就不會了。

lazy、suspense

lazy需要跟Suspence配合使用，所以這裡放在一起介紹。

lazy實際上是幫助我們實現代碼分割的功能，使用過webpack的同學都知道，webpack也有這個功能。那為什麼他們都要做這個功能呢？

其實是這樣的：由於有些內容，我們並不一定要在首屏展示，所以這些資源我們沒有必要一開始就要去獲取，那麼這些資源就可以動態獲取。這樣的話，相當於把不需要首屏展示的代碼分割出來，減少首屏代碼的體積，提升性能。

demo

在這個demo中，有3個tab。但是我們的首屏只需要先展示一個，所以其他的可以動態引入。這里以動態引入B為例：

<!--importBfrom"./B";-->// 需要用到的时候才加载进来，当然还有预加载更好
constB=lazy(()=>import("./B"));

但是這樣的話，一開始就可以點擊B，會報錯。因為需要當組件還在加載渲染的時候，需要一個place holder防止組件還沒加載完畢的時候可以有東西顯示給用戶。

這時候Suspence得作用就出來了。 Suspence 很像Error Boundary，不同的是Error Boundary是用來捕獲錯誤，顯示相應的callback組件。而Suspence是用來捕獲還沒有加載好的組件，並暫停渲染，顯示相應的callback。

我們給B加上Suspense 就搞定了。

<Suspensefallback={<div>Loading...</div>}><TabPanel><B/></TabPanel></Suspense>

跟Error Boundary一樣，Suspence也有一個放置位置的問題，是整個包裹在App外，還是只是給單獨的組件包裹？

我的選擇與Error Boundary依舊一致，應該將其包裹在子組件外面，因為這樣當某個組件沒有加載好的時候，不會影響到整個App都顯示一個loading的標識。

注意：

1. SSR不支持lazy這個特性。
2. Lazy 必須搭配Suspence使用，否則會報錯

進一步優化：

這裡我們在進一步思考一個點，目前我們的B組件是需要用到的時候才加載。萬一這個組件需要獲取數據，使得他顯示比較慢，就會顯示loading，導致我們用戶體驗比較差呢。所以我們可否在瀏覽器閒著的時候預加載這些即將要用到資源？

答案是可以的，React團隊也在做這件事情。但是這個API目前為止還沒有Ready，大家先知道這個事情好了~

簡化static contextType

簡化獲取context的方式，之前需要用一個在外層包裹一個<Consumer> ,如下：

// Theme context, default to light themeconstThemeContext=React.createContext('light');// Signed-in user contextconstUserContext=React.createContext({name:'Guest',});classAppextendsReact.Component{render(){const{signedInUser,theme}=this.props;// App component that provides initial context valuesreturn(<ThemeContext.Providervalue={theme}><UserContext.Providervalue={signedInUser}><Layout/></UserContext.Provider></ThemeContext.Provider>);}}functionLayout(){return(<div><Sidebar/><Content/></div>);}// A component may consume multiple contexts//同時如果是function component用ConsumerfunctionContent(){return(<ThemeContext.Consumer>{theme=>(<UserContext.Consumer>{user=>(<ProfilePageuser={user}theme={theme}/>)}</UserContext.Consumer>)}</ThemeContext.Consumer>);}

現在可以直接通過this.context獲取。

classMyClassextendsReact.Component{staticcontextType=MyContext;componentDidMount(){letvalue=this.context;/* perform a side-effect at mount using the value of MyContext */}componentDidUpdate(){letvalue=this.context;/* ... */}componentWillUnmount(){letvalue=this.context;/* ... */}render(){letvalue=this.context;/* render something based on the value of MyContext */}}MyClass.contextType=MyContext;

新增static getDerivedStateFromError

v16.3這個版本里，React 除了Error Boundaries來捕獲錯誤，裡面主要是使用了componentDidCatch來捕獲錯誤。但是它是在錯誤已經發生之後並且render函數被調用之後，才會被調用。也就是說如果一個組件出現的錯誤，在調用componentDidCatch之前只能返回null給用戶。
而getDerivedStateFromError 可以在render函數之嵌捕獲到錯誤，所以它更適合寫用來顯示fallback UI的邏輯。

注意事項： componentDidCatch,getDerivedStateFromError都無法捕獲服務端的錯誤，但是React團隊正在努力支持SSR。

改進前的ErrorBoundary:

classErrorBoundaryextendsReact.Component{state={hasError:false};componentDidCatch(error,info){this.setState({hasError:false})logErrorToMyService(error,info);}render(){if(this.state.hasError){// You can render any custom fallback UIreturn<h1>Somethingwentwrong.</h1>;}returnthis.props.children;}

改進後的ErrorBoundary（推薦寫法）：

classErrorBoundaryextendsReact.Component{state={hasError:false};staticgetDerivedStateFromError(error){// Update state so the next render will show the fallback UI.//更新state所以下次render可以立刻顯示fallback UIreturn{hasError:true};}componentDidCatch(error,info){// You can also log the error to an error reporting servicelogErrorToMyService(error,info);}render(){if(this.state.hasError){// You can render any custom fallback UIreturn<h1>Somethingwentwrong.</h1>;}returnthis.props.children;}

以上就是v16.4 ~ v16.6的全部內容，考慮到大家應該比較累了，Hooks又是比較大的特性，所以還是分到下一篇吧~

本文對你有幫助的話，點個贊吧~

前言

本次系列分上下兩篇文章，上主要介紹從v16.0~ 16.4的新特性，下主要介紹16.5~16.8。下面就開始吧~

本篇文章較長預計需要15min（當然主要是因為demo太多），大家可以搞點瓜子邊啃邊看。最好能留出一隻手自己在codePen上自己調試一下。

目錄

v16.0

1. render支持返回數組和字符串演示
2. Error Boundary
3. createPortal
4. 支持自定義DOM 屬性
5. Fiber
6. 提升SSR渲染速度
7. 減小文件體積

v16.1

react-call-return

v16.2

Fragment

v16.3

1. 生命週期函數的更新
2. createContext
3. createRef
4. forwardRef
5. strict Mode

下面就開始吧~

v16.0

主要特性：

一、render可以返回字符串，數組，數字

React 15 :只可以返回單一組件，也就是說即使你返回的是一個string，也需要用div包住。

functionMyComponent(){return(<div>helloworld<div>);}

React 16:支持返回這五類：React elements,數組和Fragments，Portal，String/numbers，boolean/null。

classExampleextendsReact.Component{render(){return[<divkey="1">firstelement</div>,<divkey="2">secondelement</div>,];}}

注意：無論返回的形式是怎麼樣的，都要保持render是一個純函數。所以要求我們不要改state的狀態，同時不要直接跟瀏覽器直接交互，讓它每次調用生成的結果都是一致的。

二、Error boundary（錯誤邊界）

React 15 ：渲染過程中有出錯，直接crash整個頁面，並且錯誤訊息不明確，可讀性差

classBuggyCounterextendsReact.Component{constructor(props){super(props);this.state={counter:0};this.handleClick=this.handleClick.bind(this);}componentWillMount(){thrownewError('I am crash');}handleClick(){this.setState(({counter})=>({counter:counter+1}));}render(){if(this.state.counter===5){// Simulate a JS errorthrownewError('I crashed!');}return<h1onClick={this.handleClick}>{this.state.counter}</h1>;}}functionApp(){return(<div><p><b>ThisisanexampleoferrorboundariesinReact16.<br/><br/>Clickonthenumberstoincreasethecounters.<br/>Thecounterisprogrammedtothrowwhenitreaches5.ThissimulatesaJavaScripterrorinacomponent.</b></p><hr/><p>Thesetwocountersareinsidethesameerrorboundary.Ifonecrashes,theerrorboundarywillreplacebothofthem.</p><BuggyCounter/><hr/></div>);}ReactDOM.render(<App/>,document.getElementById('root'));

demo地址

比如上面這個App，可以看到子組件BuggyCounter出了點問題，在沒有Error Boundary的時候，整個App都會crash掉，所以顯示白屏。

React 16 ：用於捕獲子組件樹的JS異常（即錯誤邊界只可以捕獲組件在樹中比他低的組件錯誤。），記錄錯誤並展示一個回退的UI。

捕獲範圍：

1. 渲染期間
2. 生命週期內
3. 整個組件樹構造函數內

如何使用：

//先定一個組件ErrorBoundaryclassErrorBoundaryextendsReact.Component{constructor(props){super(props);this.state={error:null,errorInfo:null};}componentDidCatch(error,errorInfo){// Catch errors in any components below and re-render with error messagethis.setState({error:error,errorInfo:errorInfo})// You can also log error messages to an error reporting service here}render(){//有錯誤的時候展示回退if(this.state.errorInfo){// Error pathreturn(<div><h2>Somethingwentwrong.</h2><detailsstyle={{whiteSpace:'pre-wrap'}}>{this.state.error&&this.state.error.toString()}<br/>{this.state.errorInfo.componentStack}</details></div>);}//正常的話，直接展示組件returnthis.props.children;}}classBuggyCounterextendsReact.Component{constructor(props){super(props);this.state={counter:0};this.handleClick=this.handleClick.bind(this);}componentWillMount(){thrownewError('I am crash');}handleClick(){this.setState(({counter})=>({counter:counter+1}));}render(){if(this.state.counter===5){// Simulate a JS errorthrownewError('I crashed!');}return<h1onClick={this.handleClick}>{this.state.counter}</h1>;}}functionApp(){return(<div><p><b>ThisisanexampleoferrorboundariesinReact16.<br/><br/>Clickonthenumberstoincreasethecounters.<br/>Thecounterisprogrammedtothrowwhenitreaches5.ThissimulatesaJavaScripterrorinacomponent.</b></p><hr/><ErrorBoundary><p>Thesetwocountersareinsidethesameerrorboundary.Ifonecrashes,theerrorboundarywillreplacebothofthem.</p><BuggyCounter/></ErrorBoundary><hr/></div>);}ReactDOM.render(<App/>,document.getElementById('root'));

demo演示：

可以看到加上Error Boundary之後，除了出錯的組件，其他的地方都不受影響。

而且它很清晰的告訴我們是哪個組件發生了錯誤。

注意事項：

Error Boundary無法捕獲下面的錯誤：

1、事件函數里的錯誤

classMyComponentextendsReact.Component{constructor(props){super(props);this.state={error:null};this.handleClick=this.handleClick.bind(this);}handleClick(){try{// Do something that could throw}catch(error){this.setState({error});}}render(){if(this.state.error){return<h1>Caughtanerror.</h1>}return<divonClick={this.handleClick}>ClickMe</div>}}

上面的例子中，handleClick方法裡面發生的錯誤，Error Boundary是捕獲不到的。因為它不發生在渲染階段，所以採用try/catch來捕獲。

2、異步代碼（例如setTimeout 或requestAnimationFrame 回調函數）

class A extends React . Component { render () { // 此错误无法被捕获，渲染时组件正常返回`<div></div>` setTimeout (() => { throw new Error ( 'error' ) }, 1000 ) return ( < div >< /div> ) } }

3、服務端渲染

因為服務器渲染不支持Error Boundary

4、Error Boundary自身拋出來的錯誤（而不是其子組件）

那這裡還遺留一個問題？錯誤邊界放在哪裡。一般來說，有兩個地方：

1、可以放在頂層，告訴用戶有東西出錯。但是我個人不建議這樣，這感覺失去了錯誤邊界的意義。因為有一個組件出錯了，其他正常的也沒辦法正常顯示了

2、包在子組件外面，保護其他應用不崩潰。

三、react portal

在介紹這個新特性之前，我們先來看看為什麼需要portal。在沒有portal之前，如果我們需要寫一個Dialog組件，我們會這樣寫。

<divclass="app"><div>...</div>{needDialog?<Dialog/>:null}</div>

問題：

1、最終渲染產生的html存在於JSX產生的HTML在一起，這時候dialog 如果需要position：absolute 控制位置的話，需要保證dialog 往上沒有position：relative 的干擾。

2、層級關係不清晰，dialog實際是獨立在app之外的。

所以這時候Portal降臨。

Portal可以幫助我們在JSX中跟普通組件一樣直接使用dialog, 但是又可以讓dialog內容層級不在父組件內，而是顯示在獨立於原來app在外的同層級組件。

如何使用：

HTML:

<divid="app-root"></div>// 这里为我们定义Dialog想要放入的位置
<divid="modal-root"></div>

JS:

// These two containers are siblings in the DOMconstappRoot=document.getElementById('app-root');constmodalRoot=document.getElementById('modal-root');// Let's create a Modal component that is an abstraction around// the portal API.classModalextendsReact.Component{constructor(props){super(props);// Create a div that we'll render the modal into. Because each// Modal component has its own element, we can render multiple// modal components into the modal container.this.el=document.createElement('div');}componentDidMount(){// Append the element into the DOM on mount. We'll render// into the modal container element (see the HTML tab).//這邊會將我們生成的portal element插入到modal-root裡。modalRoot.appendChild(this.el);}componentWillUnmount(){// Remove the element from the DOM when we unmountmodalRoot.removeChild(this.el);}render(){// Use a portal to render the children into the elementreturnReactDOM.createPortal(// Any valid React child: JSX, strings, arrays, etc.this.props.children,// A DOM elementthis.el,);}}// The Modal component is a normal React component, so we can// render it wherever we like without needing to know that it's// implemented with portals.classAppextendsReact.Component{constructor(props){super(props);this.state={showModal:false};this.handleShow=this.handleShow.bind(this);this.handleHide=this.handleHide.bind(this);}handleShow(){this.setState({showModal:true});}handleHide(){this.setState({showModal:false});}render(){// Show a Modal on click.// (In a real app, don't forget to use ARIA attributes// for accessibility!)constmodal=this.state.showModal?(//注意~~~~~~~~~~~~~這裡可以自行加上這個調試// <Modal><divclassName="modal"><div>Withaportal,wecanrendercontentintoadifferentpartoftheDOM,asifitwereanyotherReactchild.</div>Thisisbeingrenderedinsidethe#modal-containerdiv.<buttononClick={this.handleHide}>Hidemodal</button></div>//</Modal>):null;return(<divclassName="app">Thisdivhasoverflow:hidden.<buttononClick={this.handleShow}>Showmodal</button>{modal}</div>);}}ReactDOM.render(<App/>,appRoot);

沒有portal生成與有portal的時候生成的層級關係如下：

可以很清楚的看到，使用portal之後，modal不在嵌在app-root裡。

四、自定義DOM屬性

React 15：忽略未標準化的html 和svg屬性

React 16：去掉了這個限制

為什麼要做這個改動呢？兩個原因：

1. 不能用自定義屬性，對於非標準（proposal階段）新屬性還有其他框架（Angular）很不友好
2. React 15之所以可以過濾掉非標準的屬性，是因為他們維護了一個白名單的文件（放在bundle size 裡）。而隨著時間的增加，標準化的屬性越來越多，意味著要一直維護這個文件，同時這個文件也會越來越大，增加bundle的體積。

所以還不如去掉這個限制。

演示

可以看到自定義屬性已經生效了。

五、優化SSR

具體優化了下面五個方面：

1. 生成更簡潔的HTML
2. 寬鬆的客戶端一致性校驗
3. 無需提前編譯
4. react 16服務端渲染速度更快
5. 支持流式渲染

1、生成更簡潔的HTML

先看下面的HTML，react 15與react 16的服務端分別會生成什麼。

renderToString(<div>Thisissome<span>server-generated</span> <span>HTML.</span> </div> );

react15:

有data-reactid, text noded ，react-text各種屬性。

<divdata-reactroot=""data-reactid="1"data-react-checksum="122239856"><!--react-text:2-->Thisissome<!--/react-text--><spandata-reactid="3">server-generated</span><!--react-text:4--><!--/react-text --><spandata-reactid="5">HTML.</span></div>

react 16:

<divdata-reactroot="">Thisissome<span>server-generated</span> <span>HTML.</span> </div>

可以看到，react 16去掉了很多屬性，它的好處很明顯：增加易讀性，同時很大程度上減少html的文件大小。

2、寬鬆的客戶端一致性校驗

react 15 ：會將SSR的結果與客戶端生成的做一個個字節的對比校驗，一點不匹配發出waring同時就替換整個SSR生成的樹。

react 16 ：對比校驗會更寬鬆一些，比如，react 16允許屬性順序不一致，而且遇到不匹配的標籤，還會做子樹的修改，不是整個替換。

注意點： react16不會自動fix SSR屬性跟client html屬性的不同，但是仍然會報waring，所以我們需要自己手動去修改。

3、無需提前編譯

react 15：如果你直接使用SSR，會有很多需要檢查procee.env的地方，但是讀取在node中讀取process.env是很消耗時間的。所以在react 15的時候，需要提前編譯，這樣就可以移除process.env的引用。

react 16：只有一次檢查process.env的地方，所以就不需要提前編譯了，可以開箱即用。

4、react 16服務端渲染速度更快

為什麼呢？因為react 15下，server client都需要生成vDOM，但是其實在服務端， 當我們使用renderToString的時候，生成的vDom就會被立即拋棄掉， 所以在server端生成vDom是沒有意義的。

5、支持流式渲染( renderyToNodeStream )

使用流式渲染會提升首個字節到（TTFB）的速度。但是什麼是流式渲染呢？

可以理解為內容以一種流的形式傳給前端。所以在下一部分的內容被生成之前，開頭的內容就已經被發到瀏覽器端了。這樣瀏覽器就可以更早的編譯渲染文件內容。

// using Expressimport{renderToNodeStream}from"react-dom/server"importMyPagefrom"./MyPage"app.get("/",(req,res)=>{res.write("<!DOCTYPE html><html><head><title>My Page</title></head><body>");res.write("<div id='content'>");conststream=renderToNodeStream(<MyPage/>);stream.pipe(res,{end:false});stream.on('end',()=>{res.write("</div></body></html>");res.end();});});

新的API server: renderyToNodeStream, renderToStaticNodeStream (renderToString, renderToStaticMarkup) client: hydyate

如何使用：

React 15：

// server:// using Express clientimport{renderToString}from"react-dom/server"importMyPagefrom"./MyPage"app.get("/",(req,res)=>{res.write("<!DOCTYPE html><html><head><title>My Page</title></head><body>");res.write("<div id='content'>");res.write(renderToString(<MyPage/>));res.write("</div></body></html>");res.end();});// clientimport{render}from"react-dom"importMyPagefrom"./MyPage"render(<MyPage/>,document.getElementById("content"));

React 16：

其實就是把client端的render改成hydrate。

// client import { hydrate } from "react-dom" import MyPage from "./MyPage" hydrate ( < MyPage /> , document . getElementById ( "content" ));

當然，現在依然兼容render，但是17之後不再兼容，所以還是直接用hydrate好一點。

注意事項：不支持ErrorBoundary跟Portal，所以需要直出的頁面就不能用了。

五、減小了32%bundle的體積

React 庫大小從20.7kb（壓縮後6.9kb）降低到5.3kb（壓縮後2.2kb）

ReactDOM 庫大小從141kb（壓縮後42.9kb）降低到103.7kb（壓縮後32.6kb）

React + ReactDOM 庫大小從161.7kb（壓縮後49.8kb）降低到109kb（壓縮後43.8kb）

六、Fiber

由於Fiber不是新的API，是react對於對比更新的一種新算法，它影響著生命週期函數的變化跟異步渲染。需要詳細了解的同學可以戳下面的鏈接，這應該是我看過最易懂得解釋Fiber得視頻。

v16.1

react-call-return

這就是一個庫，平時用的比較少，所以暫時不講。

v16.2

主要特性：Fragement

React 15：render函數只能接受一個組件，所以一定要外層包一層<div>。

React16：可以通過Fragement直接返回多個組件。

render(){return(<><ChildA/><ChildB/><ChildC/></>);}

但是這樣看起來，似乎可以用v16.0 return一個數組搞定。

但是返回數組是有缺點的，比如：這段html

Some text. < h2 > A heading </ h2 > More text. < h2 > Another heading </ h2 > Even more text.

用Fragment寫，方便又快捷：

render () { return ( // Extraneous div element :( < Fragement > Some text . < h2 > A heading < /h2> More text . < h2 > Another heading < /h2> Even more text . < /Fragement> ); }

用數組寫.... 一言難盡（什麼，你還沒看出來有什麼區別！下面我來帶你）

render(){return["Some text.",<h2key="heading-1">Aheading</h2>,"More text.",<h2key="heading-2">Anotherheading</h2>,"Even more text."];}

缺點：

• 數組裡的子節點必須要用逗號分離
• 數組裡的子節點必須要帶key防止waring
• string類型要用雙引號括住

所以，Fragement還是很大程度上給我們提供了便利。

注意點：

<> </> 不支持寫入屬性，包括keys。如果你需要keys，你可以直接使用<Fragment> （但是Fragment也只可以接受keys這一個屬性，將來會支持更多）

function Glossary ( props ) { return ( < dl > { props . items . map ( item => ( // Without the `key`, React will fire a key warning < Fragment key = { item . id } > < dt > { item . term } < /dt> < dd > { item . description } < /dd> < /Fragment> ))} < /dl> ); }

官方演示

好了，相信看到這裡，大家都很想睡覺了。堅持一下，還有五個點就講完了~。

16.3

一、新的生命週期函數

由於異步渲染的改動，有可能會導致componentWillMount, componentWillReceiveProps,componentWillUpdate ，所以需要拋棄三個函數。

由於這是一個很大的改變會影響很多現有的組件，所以需要慢慢的去改。目前react 16 只是會報waring，在react 17你就只能在前面加"UNSAFE_" 的前綴來使用。不能不說react團隊真是太貼心了，他們還寫了一個腳本自動幫你加上這些前綴。瘋狂打call~

同時新加了兩個生命週期函數來替代他們，分別是：

getDerivedStateFromProps :這個方法用於替代componentWillReceiveProps，相關內容可以看這篇文章,但是大多數情況下，都不需要用到這兩種方法。因為你都可以用其他辦法來替代。

而getSnapshotBeforeUpate使用的場景很少，這裡就不介紹了。

二、新的context API

1、context 就是可以使用全局的變量，不需要一層層pass props下去，比如主題顏色

// Context lets us pass a value deep into the component tree// without explicitly threading it through every component.// Create a context for the current theme (with "light" as the default).constThemeContext=React.createContext('light');classAppextendsReact.Component{render(){// Use a Provider to pass the current theme to the tree below.// Any component can read it, no matter how deep it is.// In this example, we're passing "dark" as the current value.return(<ThemeContext.Providervalue="dark"><Toolbar/></ThemeContext.Provider>);}}// A component in the middle doesn't have to// pass the theme down explicitly anymore.functionToolbar(props){return(<div><ThemedButton/></div>);}classThemedButtonextendsReact.Component{// Assign a contextType to read the current theme context.// React will find the closest theme Provider above and use its value.// In this example, the current theme is "dark".staticcontextType=ThemeContext;render(){return<Buttontheme={this.context}/>;}}

但是需要謹慎使用，因為這會讓你的組件復用性變差。一般來說，如果你只是想避免需要傳很多次props的話，可以直接使用component composition（就是通過props自己傳給指定的）會更好。例如：

functionPage(props){constuser=props.user;//簡單來說就是直接父組件將props傳下去constuserLink=(<Linkhref={user.permalink}><Avataruser={user}size={props.avatarSize}/></Link>);return<PageLayoutuserLink={userLink}/>;}// Now, we have:<Pageuser={user}/>// ... which renders ...<PageLayoutuserLink={...}/>// ... which renders ...<NavigationBaruserLink={...}/>// ... which renders ...{props.userLink}

什麼場景下需要用context?一些相同的data需要被大多的component用到，並且還是在不同的層級裡。一般用於主題，存儲數據等。

三、createRef API

react15 的時候提供了兩種refs的方法： string 跟callback string:

classMyComponentextendsReact.Component{constructor(props){super(props);}//通過this.refs.textInput來獲取render(){return<inputtype="text"ref='textInput'/>;}}callback:classMyComponentextendsReact.Component{constructor(props){super(props);}//通過this.textInput來獲取render(){return<inputtype="text"ref={element=>this.textInput=element}/>;}}

由於用string的方式會導致一些潛在的問題，所以之前推薦使用callback。但是用string的方法明顯方便一點啊餵~

所以react 團隊get到了大家的需求，又出了一個新的api 可以用string的方式而且還沒有缺點， 真是可喜可賀，可口可樂。

classMyComponentextendsReact.Component{constructor(props){super(props);this.inputRef=React.createRef();}render(){return<inputtype="text"ref={this.inputRef}/>;}componentDidMount(){this.inputRef.current.focus();}}

使用場景：

1. 用於操作focus, text 選擇，media playback
2. 觸發即時動畫
3. 與第三方組件結合

注意事項：

1、functional component 是不能傳ref屬性的，因為他們沒有instance

functionMyFunctionComponent(){return<input/>;}classParentextendsReact.Component{constructor(props){super(props);this.textInput=React.createRef();}render(){// 这个不能工作
return(<MyFunctionComponentref={this.textInput}/>);}}

但是！只要你要引用的對像是DOM元素或者是class component, 那你可以在functional component裡可以使用ref屬性

function CustomTextInput ( props ) { // textInput must be declared here so the ref can refer to it let textInput = React . createRef (); function handleClick () { textInput . current . focus (); } return ( < div > < input type = "text" ref = { textInput } /> < input type = "button" value = "Focus the text input" onClick = { handleClick } /> < /div> ); }

簡而言之：functional component裡可以使用refs但是不能把ref屬性給它本身。

四、forwardRef API

使用場景： 父組件需要將自己的引用傳給子組件

constTextInput=React.forwardRef((props,ref)=>(<inputtype="text"placeholder="Hello forwardRef"ref={ref}/>))constinputRef=React.createRef()classAppextendsComponent{constructor(props){super(props)this.myRef=React.createRef()}handleSubmit=event=>{event.preventDefault()alert('input value is:'+inputRef.current.value)}render(){return(<formonSubmit={this.handleSubmit}><TextInputref={inputRef}/><buttontype="submit">Submit</button></form>)}}constFancyButton=React.forwardRef((props,ref)=>(<buttonref={ref}className="FancyButton">{props.children}</button>));// You can now get a ref directly to the DOM button:constref=React.createRef();<FancyButtonref={ref}>Clickme!</FancyButton>;

這樣我們就可以直接用this.ref 拿到對button的引用。如果你寫的是一個高階組件，那麼推薦使用forwardAPI 將ref傳給下面的component。

五、strictMode component

嚴格模式用來幫助開發者發現潛在問題的工具。就像Fragment 一樣，它不會render任何的DOM 元素。注意：只有在development模式下才能用。

它可以幫助我們：

1. 識別出使用不安全生命週期的組件
2. 對使用string ref進行告警
3. 對使用findDOMNode進行告警
4. 探測某些產生副作用的方法
5. 對使用棄用context API進行警告

還會有更多的功能在後續版本加進來。

使用：

functionExampleApplication(){return(<div><Header/><React.StrictMode><div><ComponentOne/><ComponentTwo/></div></React.StrictMode><Footer/></div>);}

如果文章對你有用，順手點個贊唄

參考文檔：

1、 React Portal

2、 官方文檔

3、 http://www. ayqy.net/blog/react-16/

4、 React 16 SSR新特性

5、 Refs and the Dom

前言

RIS, React Integrated Solution.它的目標是提供一套基本的構建配置方案，而且配置是能高度擴展的，希望通過它能對外輸出React的一些最佳實踐。

RIS是我在去年11月開始開源出去的，這工具之前在內部團隊使用過，反饋還不錯，斷斷續續維護和寫文檔，現在介紹給大家，希望能給大家提供一些幫助和啟發。

背景

目前社區已經有很多優秀的工具或框架做前端構建的事情，而且集成了相關的最佳實踐，比如create-react-app ， react-boilerplate ， umi等等，這三個我都覺得做得很不錯，我做RIS的時候很多想法都來源於它們。那為啥我還要重複造輪子？輪子不怕造，最重要是能說服自己，我覺得自己可以做出跟別人不一樣甚至有創新的東西出來，其次，在造的過程中，也是自己對於前端構建一些思考的沉澱。

在這說下自己的一些想法：

• create-react-app :它的構建和開發體驗我覺得是做得最好的，也得到了社區的認可，但我覺得唯一缺乏的是擴展比較麻煩，受限於里面內置的構建，當然有人說可以使用enject的方式，但這樣又失去了工具的意義了。
• react-boilerplate ：它的亮點主要是集成了一些最佳實踐，基本包含了項目開發中所需的技術，但只是一個工程，沒有工具化。
• umi ：它是支付寶做的企業級應用框架，可以通過插件集成相關的功能，約束比較強，自主權很小。

RIS要做到的是更像是create-react-app的方式，提供最底層的構建，同時提供通用的一些開發方案，再給予開發者足夠的自由定制自己想要的，希望通過這個工具輸出React開發的最佳實踐。

快速體驗

npx create-ris ris-app cd ris-app npm start

npm的版本需要是5.2及以上

詳細可參考文檔。

特性

主要的特性：

• 開箱即用，內置了空白模板和標準模板，集成react , react-outer等。
• ︎高擴展性，可以高度定制項目內容和構建配置。
• ︎極致的開發體驗，使用了DLL加快構建速度，可以使用命令快速新建組件和頁面。
• ︎高性能，使用了react-loadable實現代碼的按需加載。
• ︎強大的數據模擬功能,很方便地在開發環境模擬數據。
• ︎高效的數據流處理，集成了xredux ，很好地處理數據流問題。

開箱即用

使用create-ris可快速創建腳手架，目前集成了空白模板和標準模板。

npx create-ris <appName>

空白模板（simple)

創建出來的項目和create-react-app創建的差不多，只是一個空白項目。

├── README.md ├── package.json ├── src │ ├── App.js │ ├── App.scss │ ├── index.html │ └── index.js └── tools ├── generators │ ├── component │ │ ├── class.js.hbs │ │ ├── index.js │ │ └── stateless.js.hbs │ ├── index.js │ └── utils │ └── componentExists.js ├── risrc.js ├── server │ └── index.js └── webpack ├── base.js ├── dev.js └── prod.js

標準模板（standard）

主要集成了react-router , react-redux , xredux ， react-loadable等庫，主要提供單頁應用的標準解決方案。

├── README.md ├── mock │ └── rules.js ├── package.json ├── src │ ├── assets │ ├── components │ ├── core │ │ └── request │ ├── index.html │ ├── index.js │ ├── pages │ │ ├── Demo │ │ │ ├── Loadable.js │ │ │ ├── index.js │ │ │ ├── index.scss │ │ │ └── model.js │ ├── routes.js │ ├── services │ ├── store │ └── utils └── tools

詳細目錄可以創建項目來體驗一下。

高擴展性

高擴展性體現在兩方面，一方面是項目的高擴展性和構建的高擴展性。

第一，從創建出來的項目可以看出來，沒有對任何使用的技術進行封裝，使用的都是業界比較認可的技術，版本可以自主控制，開發者可以自由選擇項目的技術棧。

第二，構建上是可以高度定制的，目前是通過靈活合併項目中的配置的方式進行定制，下面主要介紹下如何定制構建配置。

在項目根目錄下有個tools文件夾，裡面有webpack , server和generators文件夾。下面主要介紹webpack和server如何配置。

webpack

webpack文件夾有三個文件base.js ， dev.js和prod.js ，分別對應基礎配置，開發環境和生產環境的配置。

base.js

constpath=require('path');constresolveApp=relativePath=>path.join(process.cwd(),relativePath);module.exports={entry:resolveApp('src/index.js'),module:{rules:[],},resolve:{},plugins:[],};

格式是和官方配置格式是一致的，構建時會對這些配置進行合併。類似這樣：

merge([built-inconfig],merge(base.js,dev.js));

server

server的配置也是一樣的，提供官方配置格式，然後進行合併。

module.exports={port:3000,compress:true,quiet:false,clientLogLevel:'none',disableHostCheck:true,historyApiFallback:{disableDotRule:true,},proxy:{}};

通過這樣的方式，很容易實現添加loader ， plugins ，從而很容易把ant-design等組件庫集成到項目中來，詳細可參考用戶文檔。

極致的開發體驗

在開發體驗上主要有兩個亮點，

第一，開發環境中自動使用了DLL ，使得項目代碼的二次編譯速度有了質的飛躍。

在開發環境中，自動將所有第三方依賴打入DLL ，和業務邏輯代碼進行分離，不參與二次編譯，所以開發過程中構建速度會非常快。

當然，可以自由配置哪些需要打入DLL ，甚至可以禁用此功能，詳細參考文檔。

tools/risrc.js

module.exports={dll:true,dllPlugin:{path:'node_modules/ris-react-boilerplate-dlls',exclude:[],include:[],dlls:null,},};

第二，提供了生成器（generators）功能，可以快速創建組件和頁面。

很多時候，我們新建一個頁面或組件，都是通過拷貝的方式，把之前的頁面代碼拷貝過來刪除修改，這樣效率非常低而且不可控。

這裡我們可以通過add命令根據設置好的模板快速創建組建和頁面，

npm run add

組件和頁面的模板可以在項目中tools/generators裡進行配置，詳細參考文檔。

這兩塊功能的想法來源於react-boilerplate 。

高性能

出於性能上考慮，單頁應用龐大起來的時候， bundle的體積是很大的，所以使用了react-loadable對模塊進行動態加載。

importLoadablefrom'react-loadable';exportdefaultLoadable({loader:()=>import('./index'),loading:()=>null,});

詳細可參考文檔。

強大的數據模擬功能

數據模擬在開發過程中是非常重要的一環，在服務端沒有準備好接口數據的時候，我們往往需要自己在本地模擬數據，這裡我寫了個小工具@ris/mock來實現這個功能。

只要在項目根目錄下的mock文件夾配置下rules.js文件即可。詳細參考文檔。

mock/rules.js

module.exports={'GET /api/user':{name:'beyondxgb'},'POST /api/form/create':{success:true},'GET /api/cases/list':(req,res)=>{res.end(JSON.stringify([{id:1,name:'demo'}]));},'GET /api/user/list':'user/list.json','GET /api/user/create':'user/create.js',};

高效的數據流處理

在數據流上的處理，沒有直接使用redux ，因為使用過都知道，建太多文件太繁瑣了，而且沒有很好地處理異步數據流，在此之前， dva提出了model的概念，我覺得這已經是非常好地解決了redux的問題，後來出的一些庫也離不開model的概念，但dva或者mirrorx ，它們的定位是大而全的框架，其實是解決redux的問題，卻要混著其他東西打包成一個框架，這樣顯得不純，這裡我自己寫了個xredux ，參考了dva和mirrorx的一些想法，封裝出一個庫，只是單純解決reudx的問題，不依賴於任何框架，可以看作是redux的升級版。

用法上和dva 、 mirrorx差不多，大概如下：

importxreduxfrom'xredux';conststore=xredux.createStore();xredux.model({namespace:'app',initialState:{},reducers:{},effects:{},});

很好地把action 、 reducers 、 state結合到一個model裡面，在異步請求的處理上也非常地優雅，詳細使用可參考文檔。

結語

RIS是我自己工作上的沉澱，開源出來給大家互相學習，希望能給部分人帶來幫助和啟發，裡面所使用的技術也是個人的主觀想法，不喜勿噴。後面會逐漸將自己的一些最佳實踐沉澱在這裡，也歡迎大家貢獻自己的想法。

如果喜歡RIS的話，歡迎使用，有問題可以提issues ，也非常歡迎進行共建。

如果不喜歡RIS的話，可以好好閱讀下源碼，做前端構建工具的模式也就是這樣子，可以參照自己做一下。

資料

• ris
• create-ris
• xredux

前言

我們知道dom結構也是以樹的形式存在的，所以了解樹的這種數據結構對於我們分析前端代碼還是很重要的。

（當然這裡跟前端沾邊也是為了吸引大家學習的興趣，真相其實是我就單純的想寫這一章...(｡•ˇ‸ˇ•｡) ...）

廢話不多說，我們先從二叉排序樹開始學起吧。

二叉排序樹（BST Binary Search Tree）

什麼是二叉排序樹？

簡單來說，就是每一個點只能最多有兩個子節點。它有下面三個屬性：

• 若左子樹不空，則左子樹上所有結點的值均小於它的根結點的值；
• 若右子樹不空，則右子樹上所有結點的值均大於或等於它的根結點的值；
• 左、右子樹也分別為二叉排序樹，這點很重要，希望大家記住。

對於這顆樹來說，23是它的根節點。而一個父節點的兩個子節點分別稱為左節點跟右節點。在

二叉樹中，左邊的節點一定都小於23，右邊節點都大於等於23。

實現BST

BST由節點組成。所以先來看看節點的實現：

functionNode(data,left,right){this.data=data;this.left=left;this.right=right;this.show=function(){returnthis.data;}}

這個節點裡，傳入的data就是節點的數據。 left，right分別為左右子節點。

現在需要定義一個二叉查找樹（下面簡稱BST）的類，這個類有一個根節點root，和一個插入函數insert

functionBST(){this.root=null;this.insert=insert;}

難點在於這個插入函數，先拋開這個函數是如何寫的，我們先來想想BST是如何長成的。假設我需要在BST裡依次插入23,45,16,37,3,99,22這些數字，那麼插入的順序如下：

1. 第一個數字為根節點，即this.root = 23
2. 第二個數字為45，對比23，如果比23大，放在23的右邊節點。此時BST如下：

3.第三個數字為16，對比23，比23小，成為23的左節點。此時BST如下：

4.第四個數字為37，先對比23，比23大，放在右邊。右邊再看23的右節點有值，是45，

37比45小，所以放在45的左邊。

5.第五個數字為3，對比23，比23小，放左邊，再看左邊23的左節點16，3比16小，

所以放在16的左邊。

6.第六個數字為99，對比23，比23大，看23的右節點45，比45大，放在45的右節點

7. 第七個數字為22，對比23，比23小，看23的左節點16，比16大，放在16的右節點。

8.如果最後一個數字是100，對比23，比23大，看23的右節點45，比45大，再看45的右節點99，比99大，所以放在99的右節點處。

以上，就是一顆BST生成的過程。

接下來我們用計算機的語言描述一下上述過程:（以插入右邊節點為例）

1. 針對第一個節點，直接將它設置成根節點。
2. 設置一個指針parent用於追踪當前的父節點。
3. 節點跟當前的parent進行對比，如果> parent, 看parent.right 是否有值，沒有的話，成功找到當前節點n的位置，即parent.right = n，此時終止程序。
4. 如果parent.right有值，這麼這個parent.right就會成為最新的parent，在重複3步驟。

下面我們用JS來實現一下上述過程：

JS代碼實現

functioninsert(data){varn=newNode(data,null,null);if(!this.root){this.root=n;}else{//使用current的指針來探索子節點varcurrent=this.root;while(true){varparent=current;if(data<parent.data){current=current.left;if(!current){parent.left=n;break;}}else{current=current.right;if(!current){parent.right=n;break;}}}}}

這樣我們這個BST的類就完成啦~~

運行上面的代碼：

varnums=newBST();nums.insert(23);nums.insert(45);nums.insert(16);nums.insert(37);nums.insert(3);nums.insert(99);nums.insert(100);console.log(nums)

在將結果nums打印出來,如果你得到了這樣的數據結構，那麼恭喜你，你的BST生成成功啦。

( >﹏<。)～

遍歷

遍歷分為前序，中序，以及後序遍歷，他們的命名是以根節點的訪問次序劃分的：

前序遍歷：根節點->左子樹->右子樹中序遍歷：左子樹->根節點->右子樹後序遍歷：左子樹->右子樹->根節點

以我們剛剛生成的BST為例：

前序遍歷：23 16 3 22 45 37 99

中序遍歷：3 16 22 23 37 45 99 （這時候就會發現：臥槽，6的飛起啊，這不就是升序的排列麼）

後序遍歷：3 22 16 37 99 45 23

怎麼理解呢？以中序遍歷為例，由於中序遍歷遵循：左子樹->根節點->右子樹

所以這顆樹的排列順序為16（左子樹） -> 23(根節點) -> 45(右子樹)

/ /

3 22 37 99

在看左子樹，開篇的時候我們說過，左右字數都依舊是BST，所以對於左右子樹，都還是遵循這個排序：左子樹->根節點->右子樹；

那麼，對於左字樹來說，排序順序為3 -> 16 -> 22, 對於右字樹，排列順序是37 -> 45 -> 99。

連起來就是3 16 22 23 37 45 99。

前序跟後序同理。

下一篇，我們將了解如何使用算法完成這三種遍歷，而且要從遞歸函數講起，大家可以先自己思考一下~

本文有幫助的話，點個贊鼓勵一下作者唄ლ(＾ω＾ლ)

參考資料：

1、《數據結構與算法JS描述》

隨意的前言

好久都沒有寫文章啦，React系列的文章還差一篇，但是感覺講+寫已經很膩了，所以先放一放，換一下口味吧！

今天我們來看看算法在實際問題中的應用，還是很有意思的哇~~~

對撞指針

思想：對撞指針的意思就是有兩個指針，一個從開頭，一個從結尾，兩個指針分別++，--直到碰撞。

這個思想可以解決什麼問題呢？

題目：leedcode 167

給定一個從小到大有序的數組，從數組裡找到兩個數字可以等於target,並返回索引。

即：

Input: numbers = [2,7,11,15], target = 9
Output: [1,2]

分析：這道題可以直接用查找的方法，一層層循環去找。但是這樣做時間複雜度為O(n2),而且完全沒有利用到我們這個數組有序的特性。

更好的解法是：兩個指針，分別從兩邊去找，相加>target，右邊指針--前移，如果<target,左邊指針++前移，一直到這兩個指針碰撞，如果找到結果可以返回相應的索引。

代碼實現：

vartwoSum=function(nums,target){varleft=0;varright=nums.length-1;//對撞的循環條件：左邊指針小於右邊指針while(left<right){if(nums[left]+nums[right]===target){return[left,right]}elseif(nums[left]+nums[right]>target){right--;}else{left++;}}};

滑動窗口

思想：

有兩個指針構成一個區間，通過往同一個方向不停的移動，來找到滿足條件的區間。

滑動窗口關鍵的是想想初始時候，兩個指針在哪，在滑動的時候，兩個指針基於什麼條件移動，移動後的位置又在哪裡。

下面來分析一個題目來看看如何用這個思想。

題目：leedcode 209

給定一個整形數組和一個數字s,找到數組中最短的一個連續子數組，使得連續子數組的數組和sum >= s,返回這個最短的連續子數組的長度值。

即：

Input: s = 7, nums = [2,3,1,2,4,3]
Output: 2

分析：這裡依舊可以採取暴力解法，找出所有的子數組，再分別相加求解。但是這裡介紹更好的解法。

這裡可以看到由於需要找連續的子數組，所以依舊可以設置兩個指針，往同一方向移動。

如果兩個指針中間的值加起來>sum的時候，記錄此時數組的長度，接著左指針移動，減小sum的值；

如果< sum的話，右指針移動擴大範圍。

最後返回最短的長度值。

代碼實現：

/*** @param {number} s* @param {number[]} nums* @return {number}*/varminSubArrayLen=function(s,nums){varleft=0;varright=-1;// right的起始位置很重要，這裡選擇-1 [left, right]這個區間剛開始是沒有值的vartmpSum=0;varminLength;//循環停止的條件是左指針小於長度while(left<nums.length-1){if(tmpSum<s){//這裡要注意邊界的處理，當右指針移動到最後一個元素的時候結束if(right>=nums.length-1){returnminLength||0;}right++;//這裡tmpSum的計算也很巧妙，直接用累加的方式，節省計算量tmpSum=tmpSum+nums[right]}else{vartmp=right-left+1;if(minLength){if(tmp<minLength){minLength=tmp;}}else{minLength=tmp;}//左邊指針移動減少sum的值tmpSum=tmpSum-nums[left];left++;}}if(!minLength){return0;}returnminLength;};

查找

這裡先介紹兩種數據結構Set Map ，不了解的同學先自行學習一下，其實很簡單，Set類型就是只有key的一種數據結構，而Map類型有key，value。

而在JS中，Object類型基本跟Map類型的一樣使用，但是還是有些不同的，也可以在這邊文章裡了解不同。

接下來通過具體的例子來看看如何使用它們。

題目：leedcode 1

這個問題跟開頭的問題一樣，給定一個數組numbers，從數組裡找到兩個數字可以等於target,並返回索引。

即：

Input: numbers = [2,7,11,15], target = 9 Output: [1,2]

分析：

除了暴力的解法，我們還可以用剛剛介紹的對撞指針的思路，先給它排序，在使用對撞指針，但是我們這裡由於要返回索引，所以還要記錄排序前的索引。其實這個思路也是有點麻煩的。

這裡在介紹巧妙查找表的思路：

我們可以先定義一個Object類型的數據結構obj，它的key為target - numbers[i]（比如數組第一項為2），value為索引。然後每次都看看obj[numbers[i]] 是否存在，如果存在，那我們就找到了這樣的一組數據，返回當前索引以及obj[numbers[i]]。

代碼實現：

/*** @param {number[]} nums* @param {number} target* @return {number[]}*/vartwoSum=function(nums,target){varobj={};for(vari=0;i<nums.length;i++){constitem=nums[i];if(obj[item]>=0){return[obj[item],i]}else{obj[target-item]=i;}}};

面試中常考的數組去重的問題，也可以藉助Object的查找思路，可以自行練習。

總結

因為在公司有後台處理數據，所以總覺得算法跟前端沒有太大的關係，在看React源碼的時候，裡面使用了深度查找的思想。所以我覺得學好算法對我們還是很重要的。後面接著~

本文對你有幫助的話，點個贊鼓勵一下作者唄(੭ु≧▽≦)੭ु

前言

以下，是我在2018 React Conf的分享內容，希望對大家有所幫助。可以先在官網下載我的ppt對照看，效果更佳哦~。

很多人都使用過React，但是很少人能說出它內部的渲染原理。有人會說，會用就行了，知道渲染原理有必要么？其實渲染原理決定著性能優化的方法，只有在了解原理之後，才能完全理解為什麼這樣做可以優化性能。正所謂：知其然，然後知其所以然。

廢話不多說，下面我們就開始吧~

本篇文章，將會分為四部分介紹：

• JSX如何生成element

當我們寫下一段JSX代碼的時候，react是如何根據我們的JSX代碼來生成虛擬DOM的組成元素element的。

• element如何生成真實DOM節點

再生成elment之後，react又如何將其轉成瀏覽器的真實節點。這裡會通過介紹首次渲染以及更新渲染的流程來幫助大家理解這個渲染流程，

• 性能優化

結合渲染原理，通過實際例子，看看如何優化組件。

• React 16異步渲染方案

到目前為止，這些優化組件的方法還不能解決什麼問題，所以我們需要引入異步渲染，以及異步渲染的原理是什麼。

一、JSX如何生成element

這裡是一段寫在render裡的jsx代碼。

return(<divclassName="cn"><Header>Hello,ThisisReact</Header><div>Starttolearnrightnow!</div>RightReserve.</div>)

首先，它會經過babel編譯成React.createElement的表達式。

return(React.createElement('div',{className:'cn'},React.createElement(Header,null,'Hello, This is React'),React.createElement('div',null,'Start to learn right now!'),'Right Reserve'))

這個createElement方法是做什麼的呢？

其實從它的名字就可以看出，這是用來生成element的。 element在React裡，其實就是組成虛擬DOM樹的節點，它用來描述你想要在瀏覽器上看到什麼。

它的參數有三個：

1、type -> 標籤

2、attributes -> 標籤屬性，沒有的話，可以為null

3、children -> 標籤的子節點

這個React.createElement的表達式會在render函數被調用的時候執行，換句話說，當render函數被調用的時候，會返回一個element 。

說了那麼久element，這個element究竟長什麼樣呢？

其實，它就是一個對象，如下:

{type:'div',props:{className:'cn',children:[{type:functionHeader,props:{children:'Hello, This is React'}},{type:'div',props:{children:'start to learn right now！'}},'Right Reserve']}}

我們來觀察一下這個對象的children，現在有三種類型：

1、string

2、原生DOM節點

3、React Component - 自定義組件

除了這三種，還有兩種類型：

4、false ,null, undefined,number

5、數組- 使用map方法的時候

這裡需要記住一個點： element不一定是Object類型。

二、element如何生成真實節點

順利得到element之後，我們再來看看React是如何把element轉化成真實DOM節點的。

首先，需要去初始化element,初始化的規則如下：

先判斷是否為Object類型，是的話，看它的type是否是原生DOM標籤，是的話，給它創建ReactDOMComponent的實例對象，其他同理。

這時候有的人可能會有所疑問：這些個ReactDOMComponent, ReactCompositeComponentWrapper怎麼開發的時候都沒有見過？

其實這些都是React的私有類，React自己使用，不會暴露給用戶的。它們的常用方法有：mountComponent,updateComponent等。其中mountComponent 用於創建組件，而updateComponent用於用戶更新組件。而我們自定義組件的生命週期函數以及render函數都是在這些私有類的方法裡被調用的。

既然這些私有類的方法那麼重要我們就先來簡單了解一下吧~

ReactDOMComponent

首先是ReactMComponent的mountComponent方法，這個方法的作用是：將element轉成真實DOM節點，並且插入到相應的container裡，然後返回markup（realDOM）。

由此可知ReactDOMComponent的mountComponent是element生成真實節點的關鍵。

下面看個栗子它是怎麼做到的吧。

假設有這樣一個type類型是原生DOM的element:

{type:'div',props:{className:'cn',children:'Hello world',}}

簡單mountComponent的實現：

mountComponent(container){constdomElement=document.createElement(this._currentElement.type);consttextNode=document.createTextNode(this._currentElement.props.children);domElement.appendChild(textNode);container.appendChild(domElement);returndomElement;}