React源码解析18(1)------ React.createElement 和 jsx

1.React.createElement

我们知道在React17版本之前,我们在项目中是一定需要引入react的。

import React from "react"

即便我们有时候没有使用到React,也需要引入。原因是什么呢?

在React项目中,如果我们使用了模板语法JSX,我们知道它要先经过babel的转译。那babel会将JSX转换成什么样子的格式呢?

可以看到,现在的babel会将JSX模板转换成带有jsx方法的内容。但是在17之前,babel是将JSX转换为带有React.createElement方法的内容。

而这也是为什么在17之前我们要引入React才能让项目正常使用。

2.ReactElement元素

如果我们在项目代码中,打印一个react元素:

javascript 复制代码
const jsx = <div><span>123</span></div>
console.log(jsx)

可以在控制台看到:

所以我们通过babel转译后的内容,执行完应该生成这样的一个ReactElement对象。

所以在实现jsx方法前,我们可以定义一个ReactElement类(实际的React源码中是一个方法,但是这里为了好看一些,使用类的结构)。

javascript 复制代码
class ReactElement {
  constructor(key, props, ref, type) {
    this.$$typeof = Symbol.for('react.element')
    this.key = key;
    this.props = props;
    this.ref = ref;
    this.type = type;
  }
}

3.实现JSX方法

在上面的转译内容我们可以看到,jsx方法接受两个参数,第一个参数是类型:例如div,span或者自定一类型。

第二个参数是配置参数:例如class,ref等参数。

我们只需要将ref,type,key这三个属性,直接赋值给ReactElement元素。而其他的属性全部放在props里面就可以了:

javascript 复制代码
function jsx(type, config) {
  let key, props = {}, ref;
  for(let propName in config){
    if(propName === 'key'){
      key = config[propName];
    }else if(propName === 'ref'){
      ref = config[propName];
    }else {
      props[propName] = config[propName]
    }
  }
  return new ReactElement(key,props,ref,type)
}

由于递归的过程已经被babel处理了,所以其实在jsx方法中只需要遍历即可,并不需要太过复杂的处理。

4.测试

现在我们使用babel转译过的内容,对jsx方法进行测试:

javascript 复制代码
const reactElement = jsx("div", {
  ref: "123",
  style: {
    color: 'red'
  },
  children: ["123", jsx("span", {
    children: "456"
  })]
});

console.log(reactElement)

可以在控制台看到jsx方法执行的结果:

以上就是通过babel处理后,react对处理的内容做的初步处理。

相关推荐
拉不动的猪6 分钟前
前端自做埋点,我们应该要注意的几个问题
前端·javascript·面试
王景程16 分钟前
如何测试短信接口
java·服务器·前端
安冬的码畜日常39 分钟前
【AI 加持下的 Python 编程实战 2_10】DIY 拓展:从扫雷小游戏开发再探问题分解与 AI 代码调试能力(中)
开发语言·前端·人工智能·ai·扫雷游戏·ai辅助编程·辅助编程
烛阴41 分钟前
Node.js中必备的中间件大全:提升性能、安全与开发效率的秘密武器
javascript·后端·express
小杨升级打怪中44 分钟前
前端面经-JS篇(三)--事件、性能优化、防抖与节流
前端·javascript·xss
清风细雨_林木木1 小时前
Vue开发网站会有“#”原因是前端路由使用了 Hash 模式
前端·vue.js·哈希算法
鸿蒙布道师1 小时前
OpenAI为何觊觎Chrome?AI时代浏览器争夺战背后的深层逻辑
前端·人工智能·chrome·深度学习·opencv·自然语言处理·chatgpt
袈裟和尚1 小时前
如何在安卓平板上下载安装Google Chrome【轻松安装】
前端·chrome·电脑
曹牧1 小时前
HTML字符实体和转义字符串
前端·html
小希爸爸1 小时前
2、中医基础入门和养生
前端·后端