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

如何用js實(shí)現(xiàn)一個(gè)簡(jiǎn)單的react？

謝謝你邀請(qǐng)我！

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

1.寫(xiě)入組件

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

2.狀態(tài)管理

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

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

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

react里有一個(gè)虛擬dom的概念，那么什么是虛擬dom呢？實(shí)際上，它是一個(gè)對(duì)象，如下所示:

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

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

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

函數(shù)

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

2、渲染

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

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

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

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

3.差異(插入一點(diǎn))

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

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

這個(gè)基類相對(duì)簡(jiǎn)單簡(jiǎn)單來(lái)說(shuō)就是實(shí)現(xiàn)一個(gè)setSate方法，在這個(gè)方法中調(diào)用更新邏輯。

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

喜歡我的回答就關(guān)注我。有問(wèn)題可以評(píng)論。讓 讓我們一起學(xué)習(xí)，一起成長(zhǎng)！

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

Uint8Array對(duì)象，8位無(wú)符號(hào)整數(shù)值的類型化數(shù)組。

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

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

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