教你如何從 html 實現(xiàn)一個 react

更新時間：2021年07月05日 10:20:38 作者：blazer_id

react是一個簡單的javascript UI庫，用于構(gòu)建高效、快速的用戶界面。它是一個輕量級庫，因此很受歡迎。接下來通過本文給大家分享從 html 實現(xiàn)一個 react的方法，一起看看吧

什么是 React

React是一個簡單的javascript UI庫，用于構(gòu)建高效、快速的用戶界面。它是一個輕量級庫，因此很受歡迎。它遵循組件設(shè)計模式、聲明式編程范式和函數(shù)式編程概念，以使前端應(yīng)用程序更高效。它使用虛擬DOM來有效地操作DOM。它遵循從高階組件到低階組件的單向數(shù)據(jù)流。

前言 📝

👉 我們認為，React 是用 JavaScript 構(gòu)建快速響應(yīng)的大型 Web 應(yīng)用程序的首選方式。它在 Facebook 和 Instagram 上表現(xiàn)優(yōu)秀。官網(wǎng)地址

react 的理念是在于對大型項目的快速響應(yīng)，對于新版的 react 16.8 而言更是帶來的全新的理念fiber去解決網(wǎng)頁快速響應(yīng)時所伴隨的問題，即 CPU 的瓶頸，傳統(tǒng)網(wǎng)頁瀏覽受制于瀏覽器刷新率、js 執(zhí)行時間過長等因素會造成頁面掉幀，甚至卡頓

react 由于自身的底層設(shè)計從而規(guī)避這一問題的發(fā)生，所以 react16.8 的面世對于前端領(lǐng)域只辦三件事：快速響應(yīng)、快速響應(yīng)、還是 Tmd 快速響應(yīng) !，這篇文章將會從一個 html 出發(fā)，跟隨 react 的 fiber 理念，仿一個非?；A(chǔ)的 react

一開始的準備工作 🤖

html

我們需要一個 html 去撐起來整個頁面，支撐 react 運行，頁面中添加<div></div>，之后添加一個 script 標簽，因為需要使用import進行模塊化構(gòu)建，所以需要為 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 插件，有助于我們對代碼進行調(diào)試，接下來的操作也會用到

JavaScript

我們會仿寫一個如下的 react，實現(xiàn)一個基礎(chǔ)的操作，在 <input/> 綁定事件，將輸入的值插入在 <h2/> 標簽內(nèi)：

...
function App() {
  return (
    <div>
      <input onInput={updateValue} value={value} />
      <h2>Hello {value}</h2>
      <hr />
    </div>
  );
}
...

在 react 進行 babel 編譯的時候，會將 JSX 語法轉(zhuǎn)化為 React.createElement() 的形式，如上被 retuen 的代碼就會被轉(zhuǎn)換成

...
React.createElement(
  "div",
  null,
  React.createElement("input", {
    onInput: updateValue,
    value: value,
  }),
  React.createElement("h2", null, "Hello ", value),
  React.createElement("hr", null)
);
...

在線地址

從轉(zhuǎn)換后的代碼我們可以看出 React.createElement 支持多個參數(shù):

type，節(jié)點類型
config, 節(jié)點上的屬性，比如 id 和 href
children, 子元素了，子元素可以有多個，類型可以是簡單的文本，也可以還是 React.createElement，如果是 React.createElement，其實就是子節(jié)點了，子節(jié)點下面還可以有子節(jié)點。這樣就用 React.createElement 的嵌套關(guān)系實現(xiàn)了 HTML 節(jié)點的樹形結(jié)構(gòu)。

我們可以按照 React.createElement 的形式仿寫一個可以實現(xiàn)同樣功能的 createElement 將 jsx 通過一種簡單的數(shù)據(jù)結(jié)構(gòu)展示出來即 虛擬DOM 這樣在更新時，新舊節(jié)點的對比也可以轉(zhuǎn)化為虛擬 DOM 的對比

{
  type:'節(jié)點標簽',
  props:{
    props:'節(jié)點上的屬性，包括事件、類...',
    children:'節(jié)點的子節(jié)點'
  }
}

這里我們可以寫一個函數(shù)實現(xiàn)下列需求

原則是將所有的參數(shù)返回到一個對象上
children 也要放到 props 里面去，這樣我們在組件里面就能通過 props.children 拿到子元素
當子組件是文本節(jié)點時，通過構(gòu)造一種 type 為 TEXT_ELEMENT 的節(jié)點類型表示

/**
 * 創(chuàng)建虛擬 DOM 結(jié)構(gòu)
 * @param {type} 標簽名
 * @param {props} 屬性對象
 * @param {children} 子節(jié)點
 * @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: [],
            },
          }
    ),
  },
});

react 中 createElement 源碼實現(xiàn)

實現(xiàn) createElement 之后我們可以拿到虛擬 DOM，但是還需要 render 將代碼渲染到頁面，此時我們需要對 index.js 進行處理，添加輸入事件，將 createElement 和 render 通過 import 進行引入，render 時傳入被編譯后的虛擬 DOM 和頁面的根元素 root，最后再進行executeRender調(diào)用，頁面被渲染，在頁面更新的時候再次調(diào)用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 函數(shù)幫助我們將 element 添加至真實節(jié)點中，首先它接受兩個參數(shù)：

根組件，其實是一個 JSX 組件，也就是一個 createElement 返回的虛擬 DOM

父節(jié)點，也就是我們要將這個虛擬 DOM 渲染的位置

在 react 16.8 之前，渲染的方法是通過一下幾步進行的

創(chuàng)建 element.type 類型的 dom 節(jié)點，并添加到 root 元素下（文本節(jié)點特殊處理）
將 element 的 props 添加到對應(yīng)的 DOM 上，事件進行特殊處理，掛載到 document 上（react17 調(diào)整為掛在到 container 上）
將 element.children 循環(huán)添加至 dom 節(jié)點中；

拿到虛擬 dom 進行如上三步的遞歸調(diào)用，渲染出頁面類似于如下流程

/**
 * 將虛擬 DOM 添加至真實 DOM
 * @param {element} 虛擬 DOM
 * @param {container} 真實 DOM
 */
const render = (element, container) => {
  let dom;
  /*
      處理節(jié)點（包括文本節(jié)點）
  */
  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
  ) {
    /*
      循環(huán)添加到dom
  */
    element.props.children.forEach((child) => render(child, dom));
  }
  container.appendChild(dom);
};

after 版本（fiber）

當我們寫完如上的代碼，會發(fā)現(xiàn)這個遞歸調(diào)用是有問題的

如上這部分工作被 React 官方稱為 renderer，renderer 是第三方可以自己實現(xiàn)的一個模塊，還有個核心模塊叫做 reconsiler，reconsiler 的一大功能就是 diff 算法，他會計算出應(yīng)該更新哪些頁面節(jié)點，然后將需要更新的節(jié)點虛擬 DOM 傳遞給 renderer，renderer 負責將這些節(jié)點渲染到頁面上，但是但是他卻是同步的，一旦開始渲染，就會將所有節(jié)點及其子節(jié)點全部渲染完成這個進程才會結(jié)束。

React 的官方演講中有個例子，可以很明顯的看到這種同步計算造成的卡頓：

當 dom tree 很大的情況下，JS 線程的運行時間可能會比較長，在這段時間瀏覽器是不會響應(yīng)其他事件的，因為 JS 線程和 GUI 線程是互斥的，JS 運行時頁面就不會響應(yīng)，這個時間太長了，用戶就可能看到卡頓，

此時我們可以分為兩步解決這個問題

允許中斷渲染工作，如果有優(yōu)先級更高的工作插入，則暫時中斷瀏覽器渲染，待完成該工作后，恢復(fù)瀏覽器渲染；
將渲染工作進行分解，分解成一個個小單元；

solution I 引入一個新的 Api

requestIdleCallback 接收一個回調(diào)，這個回調(diào)會在瀏覽器空閑時調(diào)用，每次調(diào)用會傳入一個 IdleDeadline，可以拿到當前還空余多久， options 可以傳入?yún)?shù)最多等多久，等到了時間瀏覽器還不空就強制執(zhí)行了。

window.requestIdleCallback 將在瀏覽器的空閑時段內(nèi)調(diào)用的函數(shù)排隊。這使開發(fā)者能夠在主事件循環(huán)上執(zhí)行后臺和低優(yōu)先級工作，而不會影響延遲關(guān)鍵事件

但是這個 API 還在實驗中，兼容性不好，所以 React 官方自己實現(xiàn)了一套。本文會繼續(xù)使用 requestIdleCallback 來進行任務(wù)調(diào)度

// 下一個工作單元
let nextUnitOfWork = null
/**
 * workLoop 工作循環(huán)函數(shù)
 * @param {deadline} 截止時間
 */
function workLoop(deadline) {
  // 是否應(yīng)該停止工作循環(huán)函數(shù)
  let shouldYield = false

  // 如果存在下一個工作單元，且沒有優(yōu)先級更高的其他工作時，循環(huán)執(zhí)行
  while (nextUnitOfWork && !shouldYield) {
    nextUnitOfWork = performUnitOfWork(
      nextUnitOfWork
    )

    // 如果截止時間快到了，停止工作循環(huán)函數(shù)
    shouldYield = deadline.timeRemaining() < 1
  }

  // 通知瀏覽器，空閑時間應(yīng)該執(zhí)行 workLoop
  requestIdleCallback(workLoop)
}
// 通知瀏覽器，空閑時間應(yīng)該執(zhí)行 workLoop
requestIdleCallback(workLoop)

// 執(zhí)行單元事件，并返回下一個單元事件
function performUnitOfWork(nextUnitOfWork) {
  // TODO
}

solution II 創(chuàng)建 fiber 的數(shù)據(jù)結(jié)構(gòu)

Fiber 之前的數(shù)據(jù)結(jié)構(gòu)是一棵樹，父節(jié)點的 children 指向了子節(jié)點，但是只有這一個指針是不能實現(xiàn)中斷繼續(xù)的。比如我現(xiàn)在有一個父節(jié)點 A，A 有三個子節(jié)點 B,C,D，當我遍歷到 C 的時候中斷了，重新開始的時候，其實我是不知道 C 下面該執(zhí)行哪個的，因為只知道 C，并沒有指針指向他的父節(jié)點，也沒有指針指向他的兄弟。

Fiber 就是改造了這樣一個結(jié)構(gòu)，加上了指向父節(jié)點和兄弟節(jié)點的指針：

child 指向子組件
sibling 指向兄弟組件
return 指向父組件

每個 fiber 都有一個鏈接指向它的第一個子節(jié)點、下一個兄弟節(jié)點和它的父節(jié)點。這種數(shù)據(jù)結(jié)構(gòu)可以讓我們更方便的查找下一個工作單元，假定 A 是掛在 root 上的節(jié)點 fiber 的渲染順序也如下步驟

從 root 開始，找到第一個子節(jié)點 A；
找到 A 的第一個子節(jié)點 B
找到 B 的第一個子節(jié)點 E
找 E 的第一個子節(jié)點，如無子節(jié)點，則找下一個兄弟節(jié)點，找到 E 的兄弟節(jié)點 F
找 F 的第一個子節(jié)點，如無子節(jié)點，也無兄弟節(jié)點，則找它的父節(jié)點的下一個兄弟節(jié)點，找到 F 的父節(jié)點的兄弟節(jié)點 C；
找 C 的第一個子節(jié)點，找不到，找兄弟節(jié)點，D
找 D 的第一個子節(jié)點，G
找 G 的第一個子節(jié)點，找不到，找兄弟節(jié)點，找不到，找父節(jié)點 D 的兄弟節(jié)點，也找不到，繼續(xù)找 D 的父節(jié)點的兄弟節(jié)點，找到 root；
上一步已經(jīng)找到了 root 節(jié)點，渲染已全部完成。

我們通過這個數(shù)據(jù)結(jié)構(gòu)實現(xiàn)一個 fiber

//創(chuàng)建最初的根fiber
 wipRoot = {
  dom: container,
  props: { children: [element] },
};
performUnitOfWork(wipRoot);

隨后調(diào)用performUnitOfWork自上而下構(gòu)造整個 fiber 樹

/**
 * performUnitOfWork用來執(zhí)行任務(wù)
 * @param {fiber} 我們的當前fiber任務(wù)
 * @return {fiber} 下一個任務(wù)fiber任務(wù)
 */
const  performUnitOfWork = fiber => {
  if (!fiber.dom) fiber.dom = createDom(fiber); // 創(chuàng)建一個DOM掛載上去
  const elements = fiber.props.children; //當前元素下的所有同級節(jié)點
  // 如果有父節(jié)點，將當前節(jié)點掛載到父節(jié)點上
  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;
    });
  }
  // 先找子元素，沒有子元素了就找兄弟元素
  // 兄弟元素也沒有了就返回父元素
  // 最后到根節(jié)點結(jié)束
  // 這個遍歷的順序是從上到下，從左到右
  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 進行比較，得到比較結(jié)果后，僅對有變化的 fiber 對應(yīng)的 dom 節(jié)點進行更新。

刪除不需要的節(jié)點
更新修改過的節(jié)點
添加新的節(jié)點

新增 currentRoot 變量，保存根節(jié)點更新前的 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
}

如果新老節(jié)點類型一樣，復(fù)用老節(jié)點 DOM，更新 props
如果類型不一樣，而且新的節(jié)點存在，創(chuàng)建新節(jié)點替換老節(jié)點
如果類型不一樣，沒有新節(jié)點，有老節(jié)點，刪除老節(jié)點

reconcileChildren

將 performUnitOfWork 中關(guān)于新建 fiber 的邏輯，抽離到 reconcileChildren 函數(shù)
在 reconcileChildren 中對比新舊 fiber；

在對比 fiber tree 時

當新舊 fiber 類型相同時保留 dom，僅更新 props，設(shè)置 effectTag 為 UPDATE；
當新舊 fiber 類型不同，且有新元素時 創(chuàng)建一個新的 dom 節(jié)點，設(shè)置 effectTag 為 PLACEMENT；
當新舊 fiber 類型不同，且有舊 fiber 時 刪除舊 fiber，設(shè)置 effectTag 為 DELETION

/**
 * 協(xié)調(diào)子節(jié)點
 * @param {fiber} fiber
 * @param {elements} fiber 的 子節(jié)點
 */
function reconcileChildren(wipFiber, elements) {
  let index = 0;// 用于統(tǒng)計子節(jié)點的索引值
  let oldFiber = wipFiber.alternate && wipFiber.alternate.child; //更新時才會產(chǎn)生
  let prevSibling;// 上一個兄弟節(jié)點
  while (index < elements.length || oldFiber) {
    /**
     * 遍歷子節(jié)點
     * oldFiber判斷是更新觸發(fā)還是首次觸發(fā),更新觸發(fā)時為元素下所有節(jié)點
     */
    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 創(chuàng)建新標簽
     */
    if (element && !sameType) {
      newFiber = {
        type: element.type,
        props: element.props,
        dom: null,
        parent: wipFiber,
        alternate: null,
        effectTag: "PLACEMENT",
      };
    }
    /**
     * 節(jié)點被刪除了
     */
    if (oldFiber && !sameType) {
      oldFiber.effectTag = "DELETION";
      deletions.push(oldFiber);
    }

    if (oldFiber) oldFiber = oldFiber.sibling;
    // 父級的child指向第一個子元素
    if (index === 0) {
      // fiber的第一個子節(jié)點是它的子節(jié)點
      wipFiber.child = newFiber;
    } else {
      // fiber 的其他子節(jié)點，是它第一個子節(jié)點的兄弟節(jié)點
      prevSibling.sibling = newFiber;
    }
    // 把新建的 newFiber 賦值給 prevSibling，這樣就方便為 newFiber 添加兄弟節(jié)點了
    prevSibling = newFiber;
    //  索引值 + 1
    index++;
  }
}

在 commit 時，根據(jù) fiber 節(jié)點上effectTag的屬性執(zhí)行不同的渲染操作

after 版本（commit）

在 commitWork 中對 fiber 的 effectTag 進行判斷，處理真正的 DOM 操作。

當 fiber 的 effectTag 為 PLACEMENT 時，表示是新增 fiber，將該節(jié)點新增至父節(jié)點中。
當 fiber 的 effectTag 為 DELETION 時，表示是刪除 fiber，將父節(jié)點的該節(jié)點刪除。
當 fiber 的 effectTag 為 UPDATE 時，表示是更新 fiber，更新 props 屬性。

/**
 * @param {fiber} fiber 結(jié)構(gòu)的虛擬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發(fā)生了什么，我們拿到 dom 上被改變的新舊屬性，進行操作

/*
    isEvent :拿到事件屬性
    isProperty :拿到非節(jié)點、非事件屬性
    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、已刪除的事件取消監(jiān)聽
   */
  Object.keys(prevProps)
    .filter(isEvent)
    .filter(key => !(key in nextProps))
    .forEach(name => {
      const eventType = name.toLowerCase().substring(2);
      dom.removeEventListener(eventType, prevProps[name]);
    });

  /**
   * 便利舊屬性
   * 1、拿到非事件屬性和非子節(jié)點的屬性
   * 2、拿到被刪除的屬性
   * 3、刪除屬性
   */
  Object.keys(prevProps)
    .filter(isProperty)
    .filter(key => !(key in nextProps))
    .forEach(key => delete dom[key]);

  /**
   * 便利新屬性
   * 1、拿到非事件屬性和非子節(jié)點的屬性
   * 2、拿到前后改變的屬性
   * 3、添加屬性
   */
  Object.keys(nextProps)
    .filter(isProperty)
    .filter(isNew(prevProps, nextProps))
    .forEach(name => {
      dom[name] = nextProps[name];
    });

  /**
   * 便利新屬性
   * 1、拿到on開頭的事件屬性
   * 2、拿到前后改變的事件屬性
   * 3、為新增的事件屬性添加監(jiān)聽
   */
  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 事件執(zhí)行時，頁面又會進行渲染，但此時會進入更新 fiber 樹的邏輯，
alternate 指向之前的 fiber 節(jié)點進行復(fù)用，更快的執(zhí)行 Update 操作，如圖：

大功告成！

完整代碼可以看我github。

結(jié)論與總結(jié) 💢

結(jié)論

我們寫的 JSX 代碼被 babel 轉(zhuǎn)化成了 React.createElement。
React.createElement 返回的其實就是虛擬 DOM 結(jié)構(gòu)。
虛擬 DOM 的調(diào)和和渲染可以簡單粗暴的遞歸，但是這個過程是同步的，如果需要處理的節(jié)點過多，可能會阻塞用戶輸入和動畫播放，造成卡頓。
Fiber 是 16.x 引入的新特性，用處是將同步的調(diào)和變成異步的。
Fiber 改造了虛擬 DOM 的結(jié)構(gòu)，具有父->第一個子，子->兄，子->父這幾個指針，有了這幾個指針，可以從任意一個 Fiber 節(jié)點找到其他節(jié)點。
Fiber 將整棵樹的同步任務(wù)拆分成了每個節(jié)點可以單獨執(zhí)行的異步執(zhí)行結(jié)構(gòu)。
Fiber 可以從任意一個節(jié)點開始遍歷，遍歷是深度優(yōu)先遍歷，順序是父->子->兄->父，也就是從上往下，從左往右。
Fiber 的調(diào)和階段可以是異步的小任務(wù)，但是提交階段( commit)必須是同步的。因為異步的 commit 可能讓用戶看到節(jié)點一個一個接連出現(xiàn)，體驗不好。

總結(jié)

react hook 實現(xiàn) ✖
react 合成事件 ✖
還有很多沒有實現(xiàn) 😤...

至此，謝謝各位在百忙之中點開這篇文章，希望對你們能有所幫助，如有問題歡迎各位大佬指正。工作原因這篇文章大概斷斷續(xù)續(xù)寫了有一個月，工作上在忙一個基于 騰訊云TRTC+websocket 的小程序電話功能，有時間也會寫成文章分享一下，當然 react 的實現(xiàn)文章也會繼續(xù)

👋：跳轉(zhuǎn) github 歡迎給個 star，謝謝大家了

參考文獻

🍑：手寫系列-實現(xiàn)一個鉑金段位的 React

🍑：build-your-own-react（強烈推薦）

🍑：手寫 React 的 Fiber 架構(gòu)，深入理解其原理

🍑：手寫一個簡單的 React

🍑：妙味課堂大圣老師手寫 react 的 fiber 和 hooks 架構(gòu)

🍑：React Fiber 架構(gòu)

🍑：手寫一個簡單的 React

到此這篇關(guān)于教你如何從 html 實現(xiàn)一個 react的文章就介紹到這了,更多相關(guān) html 實現(xiàn)react內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: