快捷導(dǎo)航

從頭寫React-like框架的工程搭建實現(xiàn)

更新時間：2021年04月15日 09:48:01 作者：Showonne

這篇文章主要介紹了從頭寫React-like框架的工程搭建實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

最近在網(wǎng)上看到了 Build your own React 這篇文章，作者從零開始實現(xiàn)了一個簡易類 React 框架，雖然沒有過多的優(yōu)化，但 React 中的核心思想 Concurrent Mode，F(xiàn)iber Reconciler 等都有實現(xiàn)，看完后對理解 React 有很大幫助，因此我想在 Build your own React 的基礎(chǔ)上，對代碼進行拆分，搭建起自己的框架工程，然后完善教程中沒完成的其他功能，代碼在 rac 中。

工程搭建

技術(shù)棧上我選擇用 TypeScript 開發(fā)，Rollup 打包, 都是平時用的不多的技術(shù)，順帶一起練練手，而且相比 webpack， rollup 配置更簡單一些。在工程中創(chuàng)建一個 tsconfig.json 和一個 rollup.config.js, 然后安裝一下需要的 rollup 插件，比如 rollup-plugin-typescript2， rollup-plugin-terser。另外準備一個 examples 文件夾，創(chuàng)建一個小型的 demo 工程，使用 tsx 開發(fā)

支持 jsx

如果想讓 TypeScript 支持 jsx，需要在 tsconfig 中開啟 jsx TypeScript 自帶了三種模式： preserve， react，和 react-native，我們設(shè)置為 react， TypeScript 就會將代碼中的 jsx 翻譯成 React.createElement，這也是在使用 jsx 時，React 必須要在作用域中的原因。

但是我們要自己實現(xiàn)一個 React-like 框架，完全可以給 React.createElement 換個名字。在 Build your own React 中，作者通過 /** @jsx Didact.createElement */ 注釋，告訴編譯器將 jsx 的輸出函數(shù)改為 Didact.createElement，這個方法只對當(dāng)前文件生效，如果是在工程中使用為每個文件都加一行注釋就麻煩了。我們通過另一種辦法，在 tsconfig 中通過 jsxFactory 屬性指定，我們這里叫 h，除了 React.createEmenent，還有個特殊元素 - Fragment，TypeScript 默認會翻譯成 React.Fragment，我們通過 jsxFragmentFactory 直接改為 Fragment。

tsconfig.json:

{
  "compilerOptions": {
    "target": "esnext",
    "module": "commonjs",
    "moduleResolution": "node",
    "jsx": "react", // enable jsx
    "jsxFactory": "h", // React.createElement => h
    "jsxFragmentFactory": "Fragment", // React.Fragment => Fragment
    "rootDir": "./src",
    "lib": ["dom", "es2015"]
  }
}

Rollup 配置

Rollup 的配置比較簡單，除了 input，output，再額外加一些插件就可以了：

const path = require('path')
const typescript = require('rollup-plugin-typescript2')
const { terser } = require('rollup-plugin-terser')
const eslint = require('@rollup/plugin-eslint')

export default {
  input: 'src/index.ts',
  output: [
    { file: 'dist/rac.umd.js', format: 'umd', name: 'rac' }
  ],
  plugins: [
    terser(),
    eslint({
      throwOnError: true,
      include: ['src/**/*.ts']
    }),
    typescript({
      verbosity: 0,
      tsconfig: path.resolve(__dirname, 'tsconfig.json'),
      useTsconfigDeclarationDir: true
    })
  ]
}

Eslint in TypeScript

為了能讓 Eslint 支持 TypeScript，需要給 Eslint 一些額外配置：

module.exports = {
  parser: '@typescript-eslint/parser',
  env: {
    es6: true,
    browser: true
  },
  plugins: [
    '@typescript-eslint'
  ],
  extends: [
    'eslint:recommended',
  ],
  parserOptions: {
    sourceType: 'module'
  },
  rules: {
    ...
  }
}

項目結(jié)構(gòu)

React 新的 Fiber 架構(gòu)有幾個核心概念，在 Build your own React 中，作者依照

Step I: The createElement Function
Step II: The render Function
Step III: Concurrent Mode
Step IV: Fibers
Step V: Render and Commit Phases
Step VI: Reconciliation
Step VII: Function Components
Step VIII: Hooks

這幾步逐步實現(xiàn)了一個 mini React，為了提高代碼可讀性和可維護性，會把這些功能劃分到不同的文件中：

.
├── README.md
├── examples  // demo目錄
├── package.json
├── rollup.config.js
├── src
│   ├── dom.ts
│   ├── h.ts
│   ├── hooks.ts
│   ├── index.ts
│   ├── reconciler.ts
│   ├── scheduler.ts
│   └── type.ts
└── tsconfig.json