手寫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 協議》，轉載必須註明作者和本文連結