寫一個react應用，可以分為以下幾步：

1、寫元件

元件分為類元件和函式式元件，類元件需要繼承react的Component基類，有自己的生命週期鉤子函式

2、狀態管理

資料由props傳入，類元件內部可以透過state控制組件自身的狀態變化（setState）

3、呼叫入口函式

ReactDOM.render

4、透過webpack（babel處理jsx）打包編譯即可生成react應用

在react中有一個虛擬dom的概念，那麼虛擬dom是什麼呢？其實它是一個物件，如下圖：

它就是對jsx的描述，jsx並不能當做真正的dom插入頁面中，需要做進一步的轉化，babel會把jsx轉化為一堆由createElement組成的執行函式，如下：

再由createElement返回的資料拼裝成上面所說的虛擬dom。

那麼要實現一個react，需要實現createElement、render和Component三個部分！

1、createElement函式

第一個引數type是型別，可能是類、函式、dom的tagName，第二個引數props就是定義在jsx中標籤的屬性包括自定義屬性和自定義事件

2、render

render索要完成的事情就是將虛擬dom渲染成真實的dom，並且可以更新！辦法就是遍歷這個虛擬dom樹。

遇見dom標籤，生成dom節點，從props中拿出屬性和事件（事件的key都是以on開頭），完成繫結，append進父元素中。

遇見類元件，直接new出一個例項，執行例項的render方法，生成元件的虛擬dom，展開遞迴，遇見dom標籤就加入父元素中，在這個階段是可以執行生命週期中各個鉤子函式的。

遇見函式，直接執行，生成元件的虛擬dom，展開遞迴，遇見dom標籤就加入父元素中。

3、diff（插入一點）

如何做到diff呢？其實就是在記憶體中保留上一次的虛擬dom樹，待生成新的虛擬dom樹後，就可以逐層做diff，這就是為什麼在寫react的state時候需要生成新的物件斷開引用，為的就是不能影響diff。react是在屬性、型別等改變時有一套規則，diff規則可以自己定，不一定要沿用react的。

之前出去面試，別人問我如果有一千個 一萬個節點如何對比，遞迴下去依然效能很差，被問的埡口無語！讀者可以自己思考一下！

4、Component

這個基類比較簡單，就是實現一個setSate方法，在方法中呼叫更新邏輯。

綜上，實現這個幾個功能基本就能實現一個react了，不過還是比較複雜的，特別是遞迴那塊！

首先要去了解react原理，去github找，然後一點點實現部分特性，比如vdom，渲染，資料繫結等等。一點點的瞭解了原理，自然就可以實現造輪子！！