最近在网上看到了 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:

{
  "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: {
    ...
  }
}

项目结构

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,为了提高代码可读性和可维护性,会把这些功能划分到不同的文件中:

.
├── 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
  • dom.ts 中处理 DOM 相关工作
  • h.ts 中是对 jsxFactory, jsxFragmentFactory 的实现
  • hooks.ts 中是对 hooks 的实现
  • reconciler.ts 是 reconcile 阶段和 commit 阶段的实现
  • shceduler.ts 是任务调度器的实现
  • type.ts 是一些类型定义

到这工程就搭建起来了,整个工程的结构和一些代码实现上借鉴了 fre 这个框架。

到此这篇关于从头写React-like框架的工程搭建实现的文章就介绍到这了,更多相关React-like搭建内容请搜索程序员的世界以前的文章或继续浏览下面的相关文章希望大家以后多多支持程序员的世界!

从头写React-like框架的工程搭建实现的更多相关文章

  1. js获取IP地址的4种方法

    1,js取得IP地址的方法一< src="http://pv.sohu.com/cityjson?ie=utf-8"></> < type="text/java"> document.write(returnCi......

  2. javascript实现点击图片切换

    击实现图片切换效果在生活中非常的常见,恰巧今天的练习也是做一个图片的切换效果。HTML代码如下:<div class="img"><img src="images/1.jpg" id="myImg" class="......

  3. js面向对象封装级联下拉菜单列表

    本实例开发的级联下拉菜单是根据已有json数据创建的DOM元素。点击文本框后,显示一级菜单。如果菜单中包含子菜单,菜单右侧会有指示箭头。点击菜单之后,会再显示下一级菜单,以此类推。当菜单下无子菜单时,选择菜单后会在文本框中显示。本实例开发的级联下拉菜单是根据已有json数据创建的DOM元素。点击文本......

  4. js加减乘除精确运算方法实例代码

    前言因为计算机数字是浮点型,所以在计算过程中通常得到的并不是一个准确的数据,所以在做一些数组运算的时候比较头疼,我们这里就来写一下精确运算的方法首先是加法 (这里以两个数据相加为例)function add(arg1, arg2) {arg1 = arg1.toString(), arg2 = ar......

  5. JS数组处理汇总

    join()方法:将数组中所有元素通过指定分隔符连接成一个字符串举例:myArr.join('-') // 用'-'符号拼接concat()方法:将两个数组或多个数组合并成一个数组举例:myArr.concat(arr1, arr2, ..., arrN)注意:该方法不会改变现有的数组,所以可以和空......

  6. 整理CocosCreator常用知识点

    一、场景加载cc.director.loadScene(‘场景名称');//场景跳转cc.director.preloadScene(‘场景名称');//预加载场景cc.director.getScene();//获取当前场景二、查找节点1,节点查找node = cc.find(“Canvas/bg......

  7. JavaScript中的事件委托机制跟深浅拷贝

    今天聊下JavaScript中的事件委托跟深浅拷贝一、事件委托首先呢,介绍一下事件绑定//方法一:通过onclick 点击 function clickEvent(){alert("点击事件");}//方法二:通过addEventListener 点击 var btn = doc......

  8. 【机制】js的闭包、执行上下文、作用域链

    1.从闭包说起什么是闭包一个函数和对其周围状态(词法环境)的引用捆绑在一起,这样的组合就是闭包。也就是说,闭包让你可以在一个内层函数中访问到其外层函数的作用域。在 JavaScript 中,每当创建一个函数,闭包就会在函数创建的同时被创建出来。上面是MDN对闭包的解释,这几句话可能不太好懂,没关系,......

  9. js中获得当前时间是年份和月份

    js中获得当前时间是年份和月份,形如:201208 //获取完整的日期 var date=new Date; var year=date.getFullYear(); var month=date.getMonth()+1; month ......

  10. JavaScript如何操作css

    原本应该是由css进行控制html中的div的宽高和背景颜色,但是在下方使用了JavaScript进行重新调用了div盒子,并且覆盖了css原本的属性内容。 需求目标:由 100 像素的粉色背景色的div盒子变成了 300像素的橘黄色效果的div盒子 代码如下: ......

随机推荐

  1. 微信小程序自定义scroll-view的实例代码

    小程序自定义 scroll-view 滚动条话不多说, 直接上效果图效果图wxml代码<scroll-view scroll-x class="scroll-view" bindscroll="bindScroll"><block wx:fo......

  2. 如何在 Vue 表单中处理图片

    问题:我在 Vue 中有一个 form 表单,用于上传博客帖子,它有标题、正文、描述、片段和图片等范围。所有的一切都是必需的。我在 Express 中设置了一个 API 来处理这个问题。我在 Postman 中测试正常,但是我不知道如何通过浏览器将文件发送给数据库。我一直收到 500 错误,并且我将......

  3. c# 异步编程入门

    一、什么算异步?广义来讲,两个工作流能同时进行就算异步,例如,CPU与外设之间的工作流就是异步的。在面向服务的系统中,各个子系统之间通信一般都是异步的,例如,订单系统与支付系统之间的通信是异步的,又如,在现实生活中,你去馆子吃饭,工作流是这样的,点菜->下单->做你的事->上菜-&......

  4. SpringCloud | 通过电商业务场景让你彻底明白SpringCloud核心组件的底层原理

    本文分为两个部分:Spring Cloud"全家桶"简单介绍。通过实际电商业务场景,让你彻底明白Spring Cloud几个核心组件的底层原理。Spring Cloud介绍SpringCloud是关注全局的服务协调治理框架,它利用 Spring Boot 的开发便利性简化了分布式......

  5. Perl 的 gethostbyname 使用方法

    # The syntax is (name, altnames, addrtype, len, addrs) = gethostbyname (inname); #!/usr/local/bin/perl $machine ="123.1.1.1"; if (!(($name, ......

  6. PHP中强制类型转换的示例详解

    前言学过静态语言开发的朋友对类型转换不会陌生,比如Java、C#、C++等。静态语言的好处就是变量强制必须指定类型,这也是编译的要求,所以大部分编译型的语言都会有强制变量类型的要求。而PHP据说也会在PHP8中加入JIT实现编译功能,并且在7.4中就会引入变量声明时的类型指定。下面我们先看看目前PH......

  7. python中openpyxl和xlsxwriter对Excel的操作方法

    前几天,项目中有个小需求:提供Excel的上传下载功能,使用模块:openpyxl 和 xlsxwriter,这里简单记录一下。1.简介Python中操作Excel的库非常多,为开发者提供了多种选择,如:xlrd、 xlwt、xlutils、xlwings、pandas、 win32com、open......

  8. React Router 如何使用history跳转

    在react-router中组件里面的跳转可以用<Link>但是在组件外面改如何跳转,需要用到react路由的historyreplace方法和push方法使用形式一样,replace的作用是取代当前历史记录go,此方法用来前进或者倒退,history.go(-1);goBack,此方法......

  9. python如何实现单向链表及单向链表的反转

    链表的定义链表中的每个节点会存储相邻节点的位置信息,单链表中的每个节点只存储下一关节点的位置信息单向链表的实现class ListNode:def __init__(self, val):self.val = valself.next = None要实现单向链表只需要把几个节点关联起来就可以了,把一......

  10. c# WPF中自定义加载时实现带动画效果的Form和FormItem

    背景今天我们来谈一下我们自定义的一组WPF控件Form和FormItem,然后看一下如何自定义一组完整地组合WPF控件,在我们很多界面显示的时候我们需要同时显示文本、图片并且我们需要将这些按照特定的顺序整齐的排列在一起,这样的操作当然通过定义Grid和StackPanel然后组合在一起当然也是可以的......