快捷導(dǎo)航

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

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

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

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

工程搭建

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

支持 jsx

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

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

項(xiàng)目結(jié)構(gòu)

React 新的 Fiber 架構(gòu)有幾個(gè)核心概念，在 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

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

.
├── 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