• 售前

  • 售后

热门帖子
入门百科

重新写React-like框架的工程搭建实现

[复制链接]
我就是但丁徊 显示全部楼层 发表于 2021-10-26 13:12:15 |阅读模式 打印 上一主题 下一主题
最近在网上看到了 Build your own React 这篇文章,作者从零开始实现了一个简易类 React 框架,固然没有过多的优化,但 React 中的核心头脑 Concurrent Mode,Fiber Reconciler 等都有实现,看完后对理解 React 有很大帮助,因此我想在 Build your own React 的基础上,对代码举行拆分,搭建起自己的框架工程,然后完善教程中没完成的其他功能,代码在 rac 中。
工程搭建


技能栈上我选择用 TypeScript 开辟,Rollup 打包, 都是平常用的不多的技能,顺带一起练练手,而且相比 webpack, rollup 设置更简朴一些。在工程中创建一个 tsconfig.json 和一个 rollup.config.js, 然后安装一下必要的 rollup 插件,好比 rollup-plugin-typescript2, rollup-plugin-terser。另外准备一个 examples 文件夹,创建一个小型的 demo 工程,使用 tsx 开辟
支持 jsx


如果想让 TypeScript 支持 jsx,必要在 tsconfig 中开启 jsx TypeScript 自带了三种模式: preserve, react,和 react-native,我们设置为 react, TypeScript 就会将代码中的 jsx 翻译成 React.createElement,这也是在使用 jsx 时,React 必须要在作用域中的原因。
但是我们要自己实现一个 React-like 框架,完全可以给 React.createElement 换个名字。在 Build your own React 中,作者通过 /** @jsx Didact.createElement */ 注释,告诉编译器将 jsx 的输出函数改为 Didact.createElement,这个方法只对当前文件生效,如果是在工程中使用为每个文件都加一行注释就麻烦了。我们通过另一种办法,在 tsconfig 中通过 jsxFactory 属性指定,我们这里叫 h,除了 React.createEmenent,另有个特殊元素 - Fragment,TypeScript 默认会翻译成 React.Fragment,我们通过 jsxFragmentFactory 直接改为 Fragment。
tsconfig.json:
  1. {
  2.   "compilerOptions": {
  3.     "target": "esnext",
  4.     "module": "commonjs",
  5.     "moduleResolution": "node",
  6.     "jsx": "react", // enable jsx
  7.     "jsxFactory": "h", // React.createElement => h
  8.     "jsxFragmentFactory": "Fragment", // React.Fragment => Fragment
  9.     "rootDir": "./src",
  10.     "lib": ["dom", "es2015"]
  11.   }
  12. }
复制代码
Rollup 设置


Rollup 的设置比较简朴,除了 input,output,再额外加一些插件就可以了:
  1. const path = require('path')
  2. const typescript = require('rollup-plugin-typescript2')
  3. const { terser } = require('rollup-plugin-terser')
  4. const eslint = require('@rollup/plugin-eslint')
  5. export default {
  6.   input: 'src/index.ts',
  7.   output: [
  8.     { file: 'dist/rac.umd.js', format: 'umd', name: 'rac' }
  9.   ],
  10.   plugins: [
  11.     terser(),
  12.     eslint({
  13.       throwOnError: true,
  14.       include: ['src/**/*.ts']
  15.     }),
  16.     typescript({
  17.       verbosity: 0,
  18.       tsconfig: path.resolve(__dirname, 'tsconfig.json'),
  19.       useTsconfigDeclarationDir: true
  20.     })
  21.   ]
  22. }
复制代码
Eslint in TypeScript


为了能让 Eslint 支持 TypeScript,必要给 Eslint 一些额外设置:
  1. module.exports = {
  2.   parser: '@typescript-eslint/parser',
  3.   env: {
  4.     es6: true,
  5.     browser: true
  6.   },
  7.   plugins: [
  8.     '@typescript-eslint'
  9.   ],
  10.   extends: [
  11.     'eslint:recommended',
  12.   ],
  13.   parserOptions: {
  14.     sourceType: 'module'
  15.   },
  16.   rules: {
  17.     ...
  18.   }
  19. }
复制代码
项目结构

React 新的 Fiber 架构有几个核心概念,在 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
这几步渐渐实现了一个 mini React,为了进步代码可读性和可维护性,会把这些功能划分到差别的文件中:
  1. .
  2. ├── README.md
  3. ├── examples  // demo目录
  4. ├── package.json
  5. ├── rollup.config.js
  6. ├── src
  7. │   ├── dom.ts
  8. │   ├── h.ts
  9. │   ├── hooks.ts
  10. │   ├── index.ts
  11. │   ├── reconciler.ts
  12. │   ├── scheduler.ts
  13. │   └── type.ts
  14. └── tsconfig.json
复制代码
       
  • dom.ts 中处置惩罚 DOM 干系工作   
  • h.ts 中是对 jsxFactory, jsxFragmentFactory 的实现   
  • hooks.ts 中是对 hooks 的实现   
  • reconciler.ts 是 reconcile 阶段和 commit 阶段的实现   
  • shceduler.ts 是使命调治器的实现   
  • type.ts 是一些类型定义
到这工程就搭建起来了,整个工程的结构和一些代码实现上鉴戒了 fre 这个框架。
到此这篇关于重新写React-like框架的工程搭建实现的文章就先容到这了,更多干系React-like搭建内容请搜索草根技术分享以前的文章或继续浏览下面的干系文章渴望大家以后多多支持草根技术分享!

帖子地址: 

回复

使用道具 举报

分享
推广
火星云矿 | 预约S19Pro,享500抵1000!
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

草根技术分享(草根吧)是全球知名中文IT技术交流平台,创建于2021年,包含原创博客、精品问答、职业培训、技术社区、资源下载等产品服务,提供原创、优质、完整内容的专业IT技术开发社区。
  • 官方手机版

  • 微信公众号

  • 商务合作