如何用js實現(xiàn)一個簡單的react？謝謝你邀請我！編寫react應(yīng)用程序可以分為以下幾個步驟:1.寫入組件組件分為類組件和功能組件。類組件需要繼承react的組件基類，有自己的生命周期鉤子函數(shù)。2.狀

如何用js實現(xiàn)一個簡單的react？

謝謝你邀請我！

編寫react應(yīng)用程序可以分為以下幾個步驟:

1.寫入組件

組件分為類組件和功能組件。類組件需要繼承react的組件基類，有自己的生命周期鉤子函數(shù)。

2.狀態(tài)管理

數(shù)據(jù)由props傳入，組件本身的狀態(tài)可以由類組件內(nèi)部的狀態(tài)控制。

3.調(diào)用入口函數(shù)

應(yīng)用可以通過webpack(babel processing jsx)打包編譯生成。

react里有一個虛擬dom的概念，那么什么是虛擬dom呢？實際上，它是一個對象，如下所示:

是對jsx的描述。jsx不能作為真正的dom插入頁面，需要進一步的轉(zhuǎn)換。babel會把jsx改造成一堆由createElement組成的執(zhí)行函數(shù)，如下:

然后將createElement返回的數(shù)據(jù)組裝到上面提到的虛擬dom中。

那么要實現(xiàn)一個react，就需要實現(xiàn)三個部分:createElement、render和Component！

函數(shù)

第一個參數(shù)type是type，可能是class、function、dom的標記名，第二個參數(shù)props是jsx中定義的標記的屬性，包括自定義屬性和自定義事件。

2、渲染

render想要完成的就是把虛擬的dom渲染成真實的dom，可以更新！解決方案是遍歷這個虛擬dom樹。

遇到dom標簽，生成dom節(jié)點，從props中取出屬性和事件(事件的鍵都以on開頭)，完成綁定，追加到父元素中。

遇到一個類組件，直接創(chuàng)建一個實例，運行實例的render方法，生成組件的虛擬dom，展開遞歸，遇到dom標簽就添加到父元素。在這個階段，您可以在生命周期中運行各種鉤子函數(shù)。

遇到函數(shù)就直接執(zhí)行，生成組件的虛擬dom，展開遞歸，遇到dom標簽就添加到父元素。

3.差異(插入一點)

如何做diff？實際上，最后一棵虛擬dom樹保存在內(nèi)存中，生成新的虛擬dom樹后，可以一層一層地做diff，這也是為什么在寫react的狀態(tài)時，需要生成一個新的對象來中斷引用，以免影響diff。React在屬性和類型變化時有一套規(guī)則，diff規(guī)則可以自己設(shè)置，不一定要跟著react。

出去面試之前有人問我如果有1000個節(jié)點和10000個節(jié)點怎么比較，遞歸還是很差，問的pass無語！讀者可以自己思考！4、組件

這個基類相對簡單簡單來說就是實現(xiàn)一個setSate方法，在這個方法中調(diào)用更新邏輯。

綜上所述，這些函數(shù)的實現(xiàn)基本可以實現(xiàn)一個react，但還是比較復雜，尤其是遞歸的！

喜歡我的回答就關(guān)注我。有問題可以評論。讓 讓我們一起學習，一起成長！

如何將字符數(shù)組里的內(nèi)容轉(zhuǎn)換成uint8的類型？

Uint8Array對象，8位無符號整數(shù)值的類型化數(shù)組。

內(nèi)容將被初始化為0。如果無法分配請求的字節(jié)數(shù)，將引發(fā)異常。轉(zhuǎn)換成普通數(shù)組的方法:

1.構(gòu)造uint8array新的uint8array(長度)；

2.轉(zhuǎn)換方法:(1)var array(uint 8 array)(2)var array[](uint 8 array)注意://當//js向ble寫入數(shù)據(jù)時，數(shù)據(jù)類型為arraybuffer類型。如果在Uint8Array對數(shù)據(jù)分組后使用subarray方法，要小心。//子數(shù)組返回的Uint8Array.buffer之后的內(nèi)存是子數(shù)組之前的內(nèi)存。//如果你想傳輸新的數(shù)據(jù)，你 你最好打開新的記憶，以避免你所看到的和你所測量的之間的差異所導致的問題。