從 html 實現一個 react🎅
前言 📝
👉 我們認為，React 是用 JavaScript 構建快速響應的大型 Web 應用程序的首選方式。它在 Facebook 和 Instagram 上表現優秀。官網地址
react 的理念是在於對大型項目的快速響應，對於新版的 react 16.8 而言更是帶來的全新的理念fiber去解決網頁快速響應時所伴隨的問題，即 CPU 的瓶頸，傳統網頁瀏覽受制於瀏覽器刷新率、js 執行時間過長等因素會造成頁面掉幀，甚至卡頓
react 由於自身的底層設計從而規避這一問題的發生，所以 react16.8 的面世對於前端領域只辦三件事：快速響應、快速響應、還是 Tmd 快速響應 !，這篇文章將會從一個 html 出發，跟隨 react 的 fiber 理念，仿一個非常基礎的 react
一開始的準備工作 🤖
html
我們需要一個 html 去撐起來整個頁面，支撐 react 運行，頁面中添加<div id="root"></div>，之後添加一個 script 標籤，因為需要使用import進行模塊化構建，所以需要為 script 添加 type 為module的屬性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="root"></div>
<script type="module" src="./index.js" ></script>
</body>
</html>
推薦安裝一個 Live Server 插件，有助於我們對代碼進行調試，接下來的操作也會用到
JavaScript
我們會仿寫一個如下的 react，實現一個基礎的操作，在 <input/> 綁定事件，將輸入的值插入在 <h2/> 標籤內：
...
function App() {
return (
<div>
<input onInput={updateValue} value={value} />
<h2>Hello {value}</h2>
<hr />
</div>
);
}
...
在 react 進行 babel 編譯的時候，會將 JSX 語法轉化為 React.createElement() 的形式，如上被 retuen 的代碼就會被轉換成
...
React.createElement(
"div",
null,
React.createElement("input", {
onInput: updateValue,
value: value,
}),
React.createElement("h2", null, "Hello ", value),
React.createElement("hr", null)
);
...
從轉換後的代碼我們可以看出 React.createElement 支持多個參數:
-
type，節點類型
-
config, 節點上的屬性，比如 id 和 href
-
children, 子元素了，子元素可以有多個，類型可以是簡單的文本，也可以還是 React.createElement，如果是 React.createElement，其實就是子節點了，子節點下面還可以有子節點。這樣就用 React.createElement 的嵌套關係實現了 HTML 節點的樹形結構。
我們可以按照 React.createElement 的形式仿寫一個可以實現同樣功能的 createElement 將 jsx 通過一種簡單的數據結構展示出來即 虛擬DOM 這樣在更新時，新舊節點的對比也可以轉化為虛擬 DOM 的對比
{
type:'節點標籤',
props:{
props:'節點上的屬性，包括事件、類...',
children:'節點的子節點'
}
}
這裡我們可以寫一個函數實現下列需求
- 原則是將所有的參數返回到一個對象上
- children 也要放到 props 裏面去，這樣我們在組件裏面就能通過 props.children 拿到子元素
- 當子組件是文本節點時，通過構造一種 type 為
TEXT_ELEMENT的節點類型表示
/**
* 創建虛擬 DOM 結構
* @param {type} 標籤名
* @param {props} 屬性對象
* @param {children} 子節點
* @return {element} 虛擬 DOM
*/
const createElement = (type, props, ...children) => ({
type,
props: {
...props,
children: children.map(child =>
typeof child === "object"
? child
: {
type: "TEXT_ELEMENT",
props: {
nodeValue: child,
children: [],
},
}
),
},
});
實現 createElement 之後我們可以拿到虛擬 DOM，但是還需要 render 將代碼渲染到頁面，此時我們需要對 index.js 進行處理，添加輸入事件，將 createElement 和 render 通過 import 進行引入，render 時傳入被編譯後的虛擬 DOM 和頁面的根元素 root， 最後再進行executeRender調用，頁面被渲染，在頁面更新的時候再次調用executeRender進行更新渲染
import {createElement,render} from "./mini/index.js";
const updateValue = e => executeRender(e.target.value);
const executeRender = (value = "World") => {
const element = createElement(
"div",
null,
createElement("input", {
onInput: updateValue,
value: value,
}),
createElement("h2", null, "Hello ", value),
createElement("hr", null)
);
render(element, document.getElementById("root"));
};
executeRender();
render 的時候做了什麼 🥔
before 版本
render 函數幫助我們將 element 添加至真實節點中，首先它接受兩個參數：
- 根組件，其實是一個 JSX 組件，也就是一個 createElement 返回的虛擬 DOM
- 父節點，也就是我們要將這個虛擬 DOM 渲染的位置
在 react 16.8 之前，渲染的方法是通過一下幾步進行的
- 創建 element.type 類型的 dom 節點，並添加到 root 元素下（文本節點特殊處理）
- 將 element 的 props 添加到對應的 DOM 上，事件進行特殊處理，掛載到 document 上（react17 調整為掛在到 container 上）
- 將 element.children 循環添加至 dom 節點中；
拿到虛擬 dom 進行如上三步的遞歸調用，渲染出頁面 類似於如下流程
/**
* 將虛擬 DOM 添加至真實 DOM
* @param {element} 虛擬 DOM
* @param {container} 真實 DOM
*/
const render = (element, container) => {
let dom;
/*
處理節點（包括文本節點）
*/
if (typeof element !== "object") {
dom = document.createTextNode(element);
} else {
dom = document.createElement(element.type);
}
/*
處理屬性（包括事件屬性）
*/
if (element.props) {
Object.keys(element.props)
.filter((key) => key != "children")
.forEach((item) => {
dom[item] = element.props[item];
});
Object.keys(element.props)
.filter((key) => key.startsWith("on"))
.forEach((name) => {
const eventType = name.toLowerCase().substring(2);
dom.addEventListener(eventType, nextProps[name]);
});
}
if (
element.props &&
element.props.children &&
element.props.children.length
) {
/*
循環添加到dom
*/
element.props.children.forEach((child) => render(child, dom));
}
container.appendChild(dom);
};
after 版本（fiber）
當我們寫完如上的代碼，會發現這個遞歸調用是有問題的
如上這部分工作被 React 官方稱為 renderer，renderer 是第三方可以自己實現的一個模塊，還有個核心模塊叫做 reconsiler，reconsiler 的一大功能就是 diff 算法，他會計算出應該更新哪些頁面節點，然後將需要更新的節點虛擬 DOM 傳遞給 renderer，renderer 負責將這些節點渲染到頁面上，但是但是他卻是同步的，一旦開始渲染，就會將所有節點及其子節點全部渲染完成這個進程才會結束。
React 的官方演講中有個例子，可以很明顯的看到這種同步計算造成的卡頓：
當 dom tree 很大的情況下，JS 線程的運行時間可能會比較長，在這段時間瀏覽器是不會響應其他事件的，因為 JS 線程和 GUI 線程是互斥的，JS 運行時頁面就不會響應，這個時間太長了，用戶就可能看到卡頓，
此時我們可以分為兩步解決這個問題
- 允許中斷渲染工作，如果有優先級更高的工作插入，則暫時中斷瀏覽器渲染，待完成該工作後，恢復瀏覽器渲染；
- 將渲染工作進行分解，分解成一個個小單元；
solution I 引入一個新的 Api
requestIdleCallback 接收一個回調，這個回調會在瀏覽器空閑時調用，每次調用會傳入一個 IdleDeadline，可以拿到當前還空餘多久， options 可以傳入參數最多等多久，等到了時間瀏覽器還不空就強制執行了。
window.requestIdleCallback 將在瀏覽器的空閑時段內調用的函數排隊。這使開發者能夠在主事件循環上執行後台和低優先級工作，而不會影響延遲關鍵事件
但是這個 API 還在實驗中，兼容性不好，所以 React 官方自己實現了一套。本文會繼續使用 requestIdleCallback 來進行任務調度
// 下一個工作單元
let nextUnitOfWork = null
/**
* workLoop 工作循環函數
* @param {deadline} 截止時間
*/
function workLoop(deadline) {
// 是否應該停止工作循環函數
let shouldYield = false
// 如果存在下一個工作單元，且沒有優先級更高的其他工作時，循環執行
while (nextUnitOfWork && !shouldYield) {
nextUnitOfWork = performUnitOfWork(
nextUnitOfWork
)
// 如果截止時間快到了，停止工作循環函數
shouldYield = deadline.timeRemaining() < 1
}
// 通知瀏覽器，空閑時間應該執行 workLoop
requestIdleCallback(workLoop)
}
// 通知瀏覽器，空閑時間應該執行 workLoop
requestIdleCallback(workLoop)
// 執行單元事件，並返回下一個單元事件
function performUnitOfWork(nextUnitOfWork) {
// TODO
}
solution II 創建 fiber 的數據結構
Fiber 之前的數據結構是一棵樹，父節點的 children 指向了子節點，但是只有這一個指針是不能實現中斷繼續的。比如我現在有一個父節點 A，A 有三個子節點 B,C,D，當我遍歷到 C 的時候中斷了，重新開始的時候，其實我是不知道 C 下面該執行哪個的，因為只知道 C，並沒有指針指向他的父節點，也沒有指針指向他的兄弟。
Fiber 就是改造了這樣一個結構，加上了指向父節點和兄弟節點的指針：
- child 指向子組件
- sibling 指向兄弟組件
- return 指向父組件
每個 fiber 都有一個鏈接指向它的第一個子節點、下一個兄弟節點和它的父節點。這種數據結構可以讓我們更方便的查找下一個工作單元，假定 A 是掛在 root 上的節點 fiber 的渲染順序也如下步驟
- 從 root 開始，找到第一個子節點 A；
- 找到 A 的第一個子節點 B
- 找到 B 的第一個子節點 E
- 找 E 的第一個子節點，如無子節點，則找下一個兄弟節點，找到 E 的兄弟節點 F
- 找 F 的第一個子節點，如無子節點，也無兄弟節點，則找它的父節點的下一個兄弟節點，找到 F 的 父節點的兄弟節點 C；
- 找 C 的第一個子節點，找不到，找兄弟節點，D
- 找 D 的第一個子節點，G
- 找 G 的第一個子節點，找不到，找兄弟節點，找不到，找父節點 D 的兄弟節點，也找不到，繼續找 D 的父節點的兄弟節點，找到 root；
- 上一步已經找到了 root 節點，渲染已全部完成。
我們通過這個數據結構實現一個 fiber
//創建最初的根fiber
wipRoot = {
dom: container,
props: { children: [element] },
};
performUnitOfWork(wipRoot);
隨後調用performUnitOfWork自上而下構造整個 fiber 樹
/**
* performUnitOfWork用來執行任務
* @param {fiber} 我們的當前fiber任務
* @return {fiber} 下一個任務fiber任務
*/
const performUnitOfWork = fiber => {
if (!fiber.dom) fiber.dom = createDom(fiber); // 創建一個DOM掛載上去
const elements = fiber.props.children; //當前元素下的所有同級節點
// 如果有父節點，將當前節點掛載到父節點上
if (fiber.return) {
fiber.return.dom.appendChild(fiber.dom);
}
let prevSibling = null;
/*
之後代碼中我們將把此處的邏輯進行抽離
*/
if (elements && elements.length) {
elements.forEach((element, index) => {
const newFiber = {
type: element.type,
props: element.props,
return: fiber,
dom: null,
};
// 父級的child指向第一個子元素
if (index === 0) {
fiber.child = newFiber;
} else {
// 每個子元素擁有指向下一個子元素的指針
prevSibling.sibling = newFiber;
}
prevSibling = fiber;
});
}
// 先找子元素，沒有子元素了就找兄弟元素
// 兄弟元素也沒有了就返回父元素
// 最後到根節點結束
// 這個遍歷的順序是從上到下，從左到右
if (fiber.child) {
return fiber.child;
} else {
let nextFiber = fiber;
while (nextFiber) {
if (nextFiber.sibling) {
return nextFiber.sibling;
}
nextFiber = nextFiber.return;
}
}
}
after 版本（reconcile）
currentRoot
reconcile 其實就是虛擬 DOM 樹的 diff 操作，將更新前的 fiber tree 和更新後的 fiber tree 進行比較，得到比較結果後，僅對有變化的 fiber 對應的 dom 節點進行更新。
- 刪除不需要的節點
- 更新修改過的節點
- 添加新的節點
新增 currentRoot 變量，保存根節點更新前的 fiber tree，為 fiber 新增 alternate 屬性，保存 fiber 更新前的 fiber tree
let currentRoot = null
function render (element, container) {
wipRoot = {
// 省略
alternate: currentRoot
}
}
function commitRoot () {
commitWork(wipRoot.child)
/*
更改fiber樹的指向，將緩存中的fiber樹替換到頁面中的fiber tree
*/
currentRoot = wipRoot
wipRoot = null
}
-
如果新老節點類型一樣，復用老節點 DOM，更新 props
-
如果類型不一樣，而且新的節點存在，創建新節點替換老節點
-
如果類型不一樣，沒有新節點，有老節點，刪除老節點
reconcileChildren
- 將 performUnitOfWork 中關於新建 fiber 的邏輯，抽離到 reconcileChildren 函數
- 在 reconcileChildren 中對比新舊 fiber；
在對比 fiber tree 時
- 當新舊 fiber 類型相同時 保留 dom，
僅更新 props，設置 effectTag 為 UPDATE； - 當新舊 fiber 類型不同，且有新元素時
創建一個新的 dom 節點，設置 effectTag 為 PLACEMENT； - 當新舊 fiber 類型不同，且有舊 fiber 時
刪除舊 fiber，設置 effectTag 為 DELETION
/**
* 協調子節點
* @param {fiber} fiber
* @param {elements} fiber 的 子節點
*/
function reconcileChildren(wipFiber, elements) {
let index = 0;// 用於統計子節點的索引值
let oldFiber = wipFiber.alternate && wipFiber.alternate.child; //更新時才會產生
let prevSibling;// 上一個兄弟節點
while (index < elements.length || oldFiber) {
/**
* 遍歷子節點
* oldFiber判斷是更新觸發還是首次觸發,更新觸發時為元素下所有節點
*/
let newFiber;
const element = elements[index];
const sameType = oldFiber && element && element.type == oldFiber.type; // fiber 類型是否相同點
/**
* 更新時
* 同標籤不同屬性，更新屬性
*/
if (sameType) {
newFiber = {
type: oldFiber.type,
props: element.props, //只更新屬性
dom: oldFiber.dom,
parent: wipFiber,
alternate: oldFiber,
effectTag: "UPDATE",
};
}
/**
* 不同標籤，即替換了標籤 or 創建新標籤
*/
if (element && !sameType) {
newFiber = {
type: element.type,
props: element.props,
dom: null,
parent: wipFiber,
alternate: null,
effectTag: "PLACEMENT",
};
}
/**
* 節點被刪除了
*/
if (oldFiber && !sameType) {
oldFiber.effectTag = "DELETION";
deletions.push(oldFiber);
}
if (oldFiber) oldFiber = oldFiber.sibling;
// 父級的child指向第一個子元素
if (index === 0) {
// fiber的第一個子節點是它的子節點
wipFiber.child = newFiber;
} else {
// fiber 的其他子節點，是它第一個子節點的兄弟節點
prevSibling.sibling = newFiber;
}
// 把新建的 newFiber 賦值給 prevSibling，這樣就方便為 newFiber 添加兄弟節點了
prevSibling = newFiber;
// 索引值 + 1
index++;
}
}
在 commit 時，根據 fiber 節點上effectTag的屬性執行不同的渲染操作
after 版本（commit）
在 commitWork 中對 fiber 的 effectTag 進行判斷，處理真正的 DOM 操作。
- 當 fiber 的 effectTag 為 PLACEMENT 時，表示是新增 fiber，將該節點新增至父節點中。
- 當 fiber 的 effectTag 為 DELETION 時，表示是刪除 fiber，將父節點的該節點刪除。
- 當 fiber 的 effectTag 為 UPDATE 時，表示是更新 fiber，更新 props 屬性。
/**
* @param {fiber} fiber 結構的虛擬dom
*/
function commitWork(fiber) {
if (!fiber) return;
const domParent = fiber.parent.dom;
if (fiber.effectTag === "PLACEMENT" && fiber.dom != null) {
domParent.appendChild(fiber.dom);
} else if (fiber.effectTag === "UPDATE" && fiber.dom != null) {
updateDom(fiber.dom, fiber.alternate.props, fiber.props);
} else if (fiber.effectTag === "DELETION") {
domParent.removeChild(fiber.dom);
}
// 遞歸操作子元素和兄弟元素
commitWork(fiber.child);
commitWork(fiber.sibling);
}
此時我們着重來看updateDom發生了什麼，我們拿到 dom 上被改變的新舊屬性，進行操作
/*
isEvent :拿到事件屬性
isProperty :拿到非節點、非事件屬性
isNew :拿到前後改變的屬性
*/
const isEvent = key => key.startsWith("on");
const isProperty = key => key !== "children" && !isEvent(key);
const isNew = (prev, next) => key => prev[key] !== next[key];
/**
* 更新dom屬性
* @param {dom} fiber dom
* @param {prevProps} fiber dom上舊的屬性
* @param {nextProps} fiber dom上新的屬性
*/
function updateDom(dom, prevProps, nextProps) {
/**
* 便利舊屬性
* 1、拿到on開頭的事件屬性
* 2、拿到被刪除的事件
* 3、已刪除的事件取消監聽
*/
Object.keys(prevProps)
.filter(isEvent)
.filter(key => !(key in nextProps))
.forEach(name => {
const eventType = name.toLowerCase().substring(2);
dom.removeEventListener(eventType, prevProps[name]);
});
/**
* 便利舊屬性
* 1、拿到非事件屬性和非子節點的屬性
* 2、拿到被刪除的屬性
* 3、刪除屬性
*/
Object.keys(prevProps)
.filter(isProperty)
.filter(key => !(key in nextProps))
.forEach(key => delete dom[key]);
/**
* 便利新屬性
* 1、拿到非事件屬性和非子節點的屬性
* 2、拿到前後改變的屬性
* 3、添加屬性
*/
Object.keys(nextProps)
.filter(isProperty)
.filter(isNew(prevProps, nextProps))
.forEach(name => {
dom[name] = nextProps[name];
});
/**
* 便利新屬性
* 1、拿到on開頭的事件屬性
* 2、拿到前後改變的事件屬性
* 3、為新增的事件屬性添加監聽
*/
Object.keys(nextProps)
.filter(isEvent)
.filter(isNew(prevProps, nextProps))
.forEach(name => {
const eventType = name.toLowerCase().substring(2);
dom.addEventListener(eventType, nextProps[name]);
});
}
完成了一系列對 dom 的操作，我們將新改變的 dom 渲染到頁面，當 input 事件執行時，頁面又會進行渲染，但此時會進入更新 fiber 樹的邏輯，
alternate 指向之前的 fiber 節點進行復用，更快的執行 Update 操作，如圖：
大功告成！
完整代碼可以看我github。
結論與總結 💢
結論
- 我們寫的 JSX 代碼被 babel 轉化成了 React.createElement。
- React.createElement 返回的其實就是虛擬 DOM 結構。
- 虛擬 DOM 的調和和渲染可以簡單粗暴的遞歸，但是這個過程是同步的，如果需要處理的節點過多，可能會阻塞用戶輸入和動畫播放，造成卡頓。
- Fiber 是 16.x 引入的新特性，用處是將同步的調和變成異步的。
- Fiber 改造了虛擬 DOM 的結構，具有 父->第一個子， 子->兄， 子->父這幾個指針，有了這幾個指針，可以從任意一個 Fiber 節點找到其他節點。
- Fiber 將整棵樹的同步任務拆分成了每個節點可以單獨執行的異步執行結構。
- Fiber 可以從任意一個節點開始遍歷，遍歷是深度優先遍歷，順序是 父->子->兄->父，也就是從上往下，從左往右。
- Fiber 的調和階段可以是異步的小任務，但是提交階段( commit)必須是同步的。因為異步的 commit 可能讓用戶看到節點一個一個接連出現，體驗不好。
總結
- react hook 實現 ✖
- react 合成事件 ✖
- 還有很多沒有實現 😤…
至此，謝謝各位在百忙之中點開這篇文章，希望對你們能有所幫助，如有問題歡迎各位大佬指正。工作原因這篇文章大概斷斷續續寫了有一個月，工作上在忙一個基於 騰訊雲TRTC+websocket 的小程序電話功能，有時間也會寫成文章分享一下，當然 react 的實現文章也會繼續
👋：跳轉 github 歡迎給個 star，謝謝大家了
參考文獻
- 🍑：手寫系列-實現一個鉑金段位的 React
- 🍑：build-your-own-react（強烈推薦）
- 🍑：手寫 React 的 Fiber 架構，深入理解其原理
- 🍑：手寫一個簡單的 React
- 🍑：妙味課堂大聖老師 手寫 react 的 fiber 和 hooks 架構
- 🍑：React Fiber 架構
- 🍑：手寫一個簡單的 React
