手寫React(下週補坑)

blankqwq發表於2020-09-11
React

小白隨，歡迎大佬提意見
居然在vue社群寫react的東西，哈哈哈

前言

極客時間的白嫖課,在這裡記錄一下內容和昇華一下知識 程式碼倉庫地址 react程式碼地址

初學前端,有許多不懂的地方，想嘗試寫一些小的demo來學習一下框架底層原理和虛擬Dom

什麼是JSX

將js中的標籤轉化為指定的呼叫方式，統一化的dom管理

return <p>你好</p>

# 翻譯

ToyReact.createElement('p','',[]);

webpack外掛->babel/plugin-transform-react-jsx

Document.createRange()

‘實’DOM和’虛’DOM

框架中一般虛實並用

  • 實dom
    • 銷燬並建立新的dom，在少量dom節點情況下幾乎沒有太大的效能消耗
    • 在實際中，可能只有傳統開發也不會大量使用，當然在使用v-if的時候會使用
  • 虛dom
    • 不銷燬dom，通過diff來判斷哪些dom節點是更新後的結果
    • 我們這裡採用的diff是重新建立dom，並不是更新dom原有的屬性(更新操作更快還是重新建立更快?二者會產生什麼影響)

diff演算法 -> 虛擬DOM

最後原型 Toy-React

進階完善和優化程式碼

  • 去除標註的佔位
  • 新增

由此引出的前端優化技巧與 常見問題

開始

搭建環境

  • npm/yarn
  • webpack 配置項
    module.exports = {
  mode: 'development',
  entry: {
      main: './index.js',
  },
  module: {
      rules: [
          {
              test: /\.js$/,
              use: {
                  loader: 'babel-loader'
                  , options: {
                      presets: ['@babel/preset-env'],
                      plugins: [
                          [
                              '@babel/plugin-transform-react-jsx',
                              // 翻譯所用到的函式
                              {pragma: "ToyReact.createElement"}
                          ]
                      ]
                  },
              },
          },
      ],
  },
};
  • 依賴安裝
    "@babel/core": "^7.10.5",
"@babel/plugin-transform-react-jsx": "^7.10.4",
"@babel/preset-env": "^7.10.4",
"babel-loader": "^8.1.0",
"webpack": "^4.43.0",
"webpack-cli": "^3.3.12"
  • 入口檔案 main.js
todo
  • 核心類 ToyReact.createElement
todo

總結

現在你已經瞭解了什麼是虛擬Dom，以及為什麼需要虛擬Dom，其核心主要是減少dom節點的刪除和建立，而是用區域性更新進行改變,以此增加效能

推薦閱讀

[譯] 圖說前端 - 圖解 React Native

React 與前端開發發展史

React 有什麼優勢？這裡有一份入門指南

史上最全！圖解瀏覽器的工作原理

深入瀏覽器理解CSS animations 和 transitions的效能問題

useEffect引發的思考

本作品採用《CC 協議》，轉載必須註明作者和本文連結
學習，沖沖衝~

相關文章