react div onclick疊加_基于 jsx 實作簡易 react

❝

實作簡單版本的 react，幫助了解 react 基本原理

1. 支援 react jsx 文法；
2. 實作 setState 節點更新；
3. 添加生命周期鈎子；
4. 切換為虛拟 dom 進行操作；

檢視源碼：https://github.com/howieyi/toy-react

❞

❝

這裡也實作了簡單版本 Vue，檢視基于 Proxy 實作了簡易版 Vue, 檢視源碼：https://github.com/howieyi/toy-vue

❞

環境配置

建構功能點

❝

需要基于 webpack/webpack-dev-server

1. 需要使用

   babel

   進行文法轉換；
2. 需要使用

   @babel/plugin-transform-react-jsx

   進行 jsx 文法解析，使用其内置參數

   pragma

   自定義

   createElement

   别名；
3. 需要使用 webpack-dev-server 特性，動态監聽更新，快速更進調試；

❞

具體配置

指令配置

❝

1. package.json scripts 中加入啟動指令；
2. 使用

   npm run dev

   啟動項目；

❞

1. JSX 的原理和關鍵實作

實作模闆

❝

1. 實作 jsx 解析；
2. 實作 jsx dom 節點解析；
3. 實作 ToyReact.render 函數；
4. 實作公共繼承類 Component;

❞

實作 ToyReact 公共方法

❝

1. 實作 createElement 核心邏輯；
2. 實作 render 鈎子

❞

ElementWrapper

元素節點類

❝

公共元素類，實作元素節點處理邏輯：

1. 實作構造函數，元素建立，最終還是基于 dom.createElement;
2. 實作 setAttribute;
3. 實作 appendChild;
4. 實作 mountTo 函數；

❞

TextWrapper

文本節點類

❝

公共節點類，實作文本節點處理邏輯：

1. 實作構造函數，文本節點建立，最終還是基于 dom.createTextNode;
2. 實作 mountTo 函數

❞

Component

公共繼承類

❝

1. 實作構造函數，子元件收集，統一處理;
2. 實作 setAttribute;
3. 實作 appendChild;
4. 實作 mountTo 函數，預設 this.render 傳回 vdom(即 creaElement 傳回的對象)；

❞

2. 添加生命周期

實作模闆

❝

1. 支援 props;
2. 支援 onClick 事件監聽；
3. 支援 setState;
4. 生命周期鈎子埋點；

❞

改造

ToyReact.render

❝

1. 增加 Range 用來記錄節點位置，友善處理更新；
2. mountTo 統一使用 range

❞

改造

ElementWrapper

❝

1. appendChild 采用 range 處理；
2. mountTo 采用 range 處理；
3. 增加事件監聽；

❞

改造

TextWrapper

❝

1. mountTo 采用 range 處理

❞

改造

Component

公共類

❝

1. 引入 props;
2. mountTo 使用 range;
3. 增加 update 方法；
4. 增加 setState 方法；
5. 增加 生命周期鈎子；
6. 增加深拷貝公共方法；

❞

深拷貝

Component

公共類

3. 切換虛拟 dom

改造

ElementWrapper

❝

1. 引入 vdom，指向自己，以目前對象為 vdom；
2. 改造 setAttribute/appendChild 為虛拟操作，緩存屬性和子節點；
3. 改造 mountTo，此方法處理真實 dom，即節點建立、屬性、事件處理等；

❞

改造

TextWrapper

❝

1. 引入 vdom，指向自己，以目前對象為 vdom；
2. mountTo 處理真實節點

❞

改造

Component

❝

1. 引入

   vdom: this.render().vdom

   ；
2. 改造

   update

   ，這裡做節點比較，合理更新節點；

❞

isSameNode

虛拟節點比較

isSameTree

虛拟節點樹比較

replaceNode

虛拟節點替換

Component

改動