手寫React的Fiber架構，深入理解其原理
阿新 • • 發佈：2020-06-23
熟悉React的朋友都知道，React支援jsx語法，我們可以直接將HTML程式碼寫到JS中間，然後渲染到頁面上，我們寫的HTML如果有更新的話，React還有虛擬DOM的對比，只更新變化的部分，而不重新渲染整個頁面，大大提高渲染效率。到了16.x，React更是使用了一個被稱為`Fiber`的架構，提升了使用者體驗，同時還引入了`hooks`等特性。那隱藏在React背後的原理是怎樣的呢，`Fiber`和`hooks`又是怎麼實現的呢？本文會從`jsx`入手，手寫一個簡易版的React，從而深入理解React的原理。
本文主要實現了這些功能:
> 簡易版Fiber架構
>
> 簡易版DIFF演算法
>
> 簡易版函式元件
>
> 簡易版Hook: `useState`
>
> 娛樂版`Class`元件
本文程式碼地址：[https://github.com/dennis-jiang/Front-End-Knowledges/tree/master/Examples/React/fiber-and-hooks](https://github.com/dennis-jiang/Front-End-Knowledges/tree/master/Examples/React/fiber-and-hooks)
本文程式跑起來效果如下：
## JSX和creatElement
以前我們寫React要支援JSX還需要一個庫叫`JSXTransformer.js`，後來JSX的轉換工作都整合到了babel裡面了，babel還提供了[線上預覽的功能](https://babeljs.io/repl)，可以看到轉換後的效果，比如下面這段簡單的程式碼:
```jsx
const App =
(
);
```
經過babel轉換後就變成了這樣：
上面的截圖可以看出我們寫的HTML被轉換成了`React.createElement`，我們將上面程式碼稍微格式化來看下：
```javascript
var App = React.createElement(
'div',
null,
React.createElement(
'h1',
{
id: 'title',
},
'Title',
),
React.createElement(
'a',
{
href: 'xxx',
},
'Jump',
),
React.createElement(
'section',
null,
React.createElement('p', null, 'Article'),
),
);
```
從轉換後的程式碼我們可以看出`React.createElement`支援多個引數:
> 1. type，也就是節點型別
> 2. config, 這是節點上的屬性，比如`id`和`href`
> 3. children, 從第三個引數開始就全部是children也就是子元素了，子元素可以有多個，型別可以是簡單的文字，也可以還是`React.createElement`，如果是`React.createElement`，其實就是子節點了，子節點下面還可以有子節點。這樣就用`React.createElement`的巢狀關係實現了HTML節點的樹形結構。
讓我們來完整看下這個簡單的React頁面程式碼：
渲染在頁面上是這樣：
這裡面用到了React的地方其實就兩個，一個是JSX，也就是`React.createElement`，另一個就是`ReactDOM.render`，所以我們手寫的第一個目標就有了，就是`createElement`和`render`這兩個方法。
### 手寫createElement
對於`
Title
JumpArticle