React前端开发createElement源码解读

目录
  • React 与 Babel
    • 元素标签转译
    • 组件转译
    • 子元素转译
  • createElement
    • 源码
    • 函数入参
    • 第一段代码 __self 和 __source
    • 第二段代码 props 对象
    • 第三段代码 children
    • 第四段代码 defaultProps
    • 第五段代码 owner
  • ReactElement
    • 源码
    • REACT_ELEMENT_TYPE
  • 回顾

React 与 Babel

元素标签转译

用过 React 的同学都知道,当我们这样写时:

<div id="foo">bar</div>

Babel 会将其转译为:

React.createElement("div", {id: "foo"}, "bar");

我们会发现,createElement 的第一个参数是元素类型,第二个参数是元素属性,第三个参数是子元素

组件转译

如果我们用的是一个组件呢?

function Foo({id}) {
  return <div id={id}>foo</div>
}
<Foo id="foo">
  <div id="bar">bar</div>
</Foo>

Babel 则会将其转译为:

function Foo({id}) {
  return React.createElement("div", {id: id}, "foo")}
React.createElement(Foo, {id: "foo"},
  React.createElement("div", {id: "bar"}, "bar")
);

我们会发现,createElement 的第一个参数传入的是变量 Foo

子元素转译

如果我们有多个子元素呢?

<div id="foo">
  <div id="bar">bar</div>
	<div id="baz">baz</div>
  <div id="qux">qux</div>
</div>

Babel 则会将其转译为:

React.createElement("div", { id: "foo"},
  React.createElement("div", {id: "bar"}, "bar"),
  React.createElement("div", {id: "baz"}, "baz"),
  React.createElement("div", {id: "qux"}, "qux")
);

我们会发现,子元素其实是作为参数不断追加传入到函数中

createElement

那 React.createElement 到底做了什么呢?

源码

我们查看 React 的 GitHub 仓库:github.com/facebook/re…,查看 pacakges/react/index.js文件,可以看到 createElement 的定义在 ./src/React文件:

// 简化后
export {createElement} from './src/React';

我们打开 ./src/React.js文件:

import {
  createElement as createElementProd
} from './ReactElement';
const createElement = __DEV__
  ? createElementWithValidation
  : createElementProd;
export { createElement };

继续查看 ./ReactElement.js文件,在这里终于找到最终的定义,鉴于这里代码较长,我们将代码极度简化一下:

const RESERVED_PROPS = {
  key: true,
  ref: true,
  __self: true,
  __source: true,
};
export function createElement(type, config, ...children) {
  let propName;
  // Reserved names are extracted
  const props = {};
  // 第一段
  let key = '' + config.key;
  let ref = config.ref;
  let self = config.__self;
  let source = config.__source;
  // 第二段
  for (propName in config) {
    if (config.hasOwnProperty(propName) && !RESERVED_PROPS.hasOwnProperty(propName)) {
      props[propName] = config[propName];
    }
  }
  // 第三段
  props.children = children;
  // 第四段
  if (type && type.defaultProps) {
    const defaultProps = type.defaultProps;
    for (propName in defaultProps) {
      if (props[propName] === undefined) {
        props[propName] = defaultProps[propName];
      }
    }
  }
  // 第五段
  return ReactElement(
    type,
    key,
    ref,
    self,
    source,
    ReactCurrentOwner.current,
    props,
  );
}

这里可以看出,createElement 函数主要是做了一个预处理,然后将处理好的数据传入 ReactElement 函数中,我们先分析下 createElement 做了什么。

函数入参

我们以最一开始的例子为例:

<div id="foo">bar</div>
// 转译为
React.createElement("div", {id: "foo"}, "bar");

对于createElement 的三个形参,其中type 表示类型,既可以是标签名字符串(如 div 或 span),也可以是 React 组件(如 Foo)

config 表示传入的属性,children 表示子元素

第一段代码 __self 和 __source

现在我们开始看第一段代码:

  // 第一段
  let key = '' + config.key;
  let ref = config.ref;
  let self = config.__self;
  let source = config.__source;

可以看到在 createElement 函数内部,keyref__self__source 这四个参数是单独获取并处理的,keyref 很好理解,__self__source 是做什么用的呢?

通过这个 issue,我们了解到,__self__sourcebabel-preset-react注入的调试信息,可以提供更有用的错误信息。

我们查看 babel-preset-react 的文档,可以看到:

development

boolean 类型,默认值为 false. 这可以用于开启特定于开发环境的某些行为,例如添加 __source 和 __self。 在与 env 参数 配置或 js 配置文件 配合使用时,此功能很有用。

如果我们试着开启 development 参数,就会看到 __self__source 参数,依然以 <div id="foo">bar</div> 为例,会被 Babel 转译成:

var _jsxFileName = "/Users/kevin/Desktop/react-app/src/index.js";
React.createElement("div", {
  id: "foo",
  __self: this,
  __source: {
    fileName: _jsxFileName,
    lineNumber: 5,
    columnNumber: 13
  }
}, "bar");

第二段代码 props 对象

现在我们看第二段代码:

// 第二段
for (propName in config) {
    if (config.hasOwnProperty(propName) && !RESERVED_PROPS.hasOwnProperty(propName)) {
      props[propName] = config[propName];
    }
}

这段代码实现的功能很简单,就是构建一个 props 对象,去除传入的 keyref__self__source属性,这就是为什么在组件中,我们明明传入了 keyref,但我们无法通过 this.props.key 或者 this.props.ref 来获取传入的值,就是因为在这里被去除掉了。

而之所以去除,React 给出的解释是,keyref 是用于 React 内部处理的,如果你想用比如 key 值,你可以再传一个其他属性,用跟 key 相同的值即可。

第三段代码 children

现在我们看第三段代码,这段代码被精简的很简单:

// 第三段
props.children = children;

这是其实是因为我们为了简化代码,用了 ES6 的扩展运算法,实际的源码里会复杂且有一些差别:

const childrenLength = arguments.length - 2;
  if (childrenLength === 1) {
    props.children = children;
  } else if (childrenLength > 1) {
    const childArray = Array(childrenLength);
    for (let i = 0; i < childrenLength; i++) {
      childArray[i] = arguments[i + 2];
    }
    props.children = childArray;
}

我们也可以发现,当只有一个子元素的时候,children 其实会直接赋值给 props.children,也就是说,当只有一个子元素时,children 是一个对象(React 元素),当有多个子元素时,children 是一个包含对象(React 元素)的数组。

第四段代码 defaultProps

现在我们看第四段代码:

  // 第四段
  if (type && type.defaultProps) {
    const defaultProps = type.defaultProps;
    for (propName in defaultProps) {
      if (props[propName] === undefined) {
        props[propName] = defaultProps[propName];
      }
    }
  }

这段其实是处理组件的defaultProps,无论是函数组件还是类组件都支持 defaultProps,举个使用例子:

// 函数组件
function Foo({id}) {
  return <div id={id}>foo</div>
}
 Foo.defaultProps = {
   id: 'foo'
 }
// 类组件
 class Header extends Component {
   static defaultProps = {
     id: 'foo'
   }
   render () {
     const { id } = this.props
     return <div id={id}>foo</div>
   }
 }

第五段代码 owner

现在我们看第五段代码:

  // 第五段
  return ReactElement(
    type,
    key,
    ref,
    self,
    source,
    ReactCurrentOwner.current,
    props,
  );

这段就是把前面处理好的 typekey 等值传入 ReactElement 函数中,那 ReactCurrentOwner.current是个什么鬼?

我们根据引用地址查看 ReactCurrentOwner定义的文件

/**
 * Keeps track of the current owner.
 *
 * The current owner is the component who should own any components that are
 * currently being constructed.
 */
const ReactCurrentOwner = {
  /**
   * @internal
   * @type {ReactComponent}
   */
  current: null,
};
export default ReactCurrentOwner;

其初始的定义非常简单,根据注释,我们可以了解到 ReactCurrentOwner.current 就是指向处于构建过程中的组件的 owner,具体作用在以后的文章中还有介绍,现在可以简单的理解为,它就是用于记录临时变量。

ReactElement

源码

现在我们开始看 ReactElement 函数,其实这个函数的内容更简单,代码精简后如下:

const ReactElement = function(type, key, ref, self, source, owner, props) {
  const element = {
    // This tag allows us to uniquely identify this as a React Element
    $$typeof: REACT_ELEMENT_TYPE,
    // Built-in properties that belong on the element
    type: type,
    key: key,
    ref: ref,
    props: props,
    // Record the component responsible for creating this element.
    _owner: owner,
  };
  return element;
};

如你所见,它就是返回一个对象,这个对象包括 $$typeoftypekey 等属性,这个对象就被称为 “React 元素”。它描述了我们在屏幕上看到的内容。React 会通过读取这些对象,使用它们构建和更新 DOM

REACT_ELEMENT_TYPE

REACT_ELEMENT_TYPE 查看引用的 packages/shared/ReactSymbols 文件,可以发现它就是一个唯一常量值,用于标示是 React 元素节点

export const REACT_ELEMENT_TYPE = Symbol.for('react.element');

那还有其他类型的节点吗? 查看这个定义 REACT_ELEMENT_TYPE 的文件,我们发现还有:

export const REACT_PORTAL_TYPE: symbol = Symbol.for('react.portal');
export const REACT_FRAGMENT_TYPE: symbol = Symbol.for('react.fragment');
export const REACT_STRICT_MODE_TYPE: symbol = Symbol.for('react.strict_mode');
export const REACT_PROFILER_TYPE: symbol = Symbol.for('react.profiler');
export const REACT_PROVIDER_TYPE: symbol = Symbol.for('react.provider');
export const REACT_CONTEXT_TYPE: symbol = Symbol.for('react.context');
// ...

你可能会自然的理解为 $$typeof 还可以设置为 REACT_FRAGMENT_TYPE等值。

我们可以写代码实验一下,比如使用 Portal,打印一下返回的对象:

import ReactDOM from 'react-dom/client';
import {createPortal} from 'react-dom'
const root = ReactDOM.createRoot(document.getElementById('root'));
function Modal() {
  const portalObject = createPortal(<div id="foo">foo</div>, document.getElementById("root2"));
  console.log(portalObject)
  return portalObject
}
root.render(<Modal />);

打印的对象为:

它的 $$typeof 确实是 REACT_PORTAL_TYPE

而如果我们使用 Fragment

import ReactDOM from 'react-dom/client';
import React from 'react';
const root = ReactDOM.createRoot(document.getElementById('root'));
function Modal() {
  const fragmentObject = (
    <React.Fragment>
      <div id="foo">foo</div>
    </React.Fragment>
    );
  console.log(fragmentObject)
  return fragmentObject
}
root.render(<Modal />);

打印的对象为:

我们会发现,当我们使用 fragment 的时候,返回的对象的 $$typeof 却依然是 REACT_ELEMENT_TYPE 这是为什么呢?

其实细想一下我们使用 portals 的时候,我们用的是 React.createPortal 的方式,但 fragments 走的依然是普通的 React.createElement 方法,createElement 的代码我们也看到了,并无特殊处理 $$typeof 的地方,所以自然是 REACT_ELEMENT_TYPE

那么 $$typeof 到底是为什么存在呢?其实它主要是为了处理 web 安全问题,试想这样一段代码:

let message = { text: expectedTextButGotJSON };
// React 0.13 中有风险
<p>
  {message.text}
</p>

如果 expectedTextButGotJSON是来自于服务器的值,比如:

// 服务端允许用户存储 JSON
let expectedTextButGotJSON = {
  type: 'div',
  props: {
    dangerouslySetInnerHTML: {
      __html: '/* something bad */'
    },
  },
  // ...
};
let message = { text: expectedTextButGotJSON };

这就很容易受到 XSS 攻击,虽然这个攻击是来自服务器端的漏洞,但使用 React 我们可以处理的更好。如果我们用 Symbol 标记每个 React 元素,因为服务端的数据不会有 Symbol.for('react.element'),React 就可以检测 element.$$typeof,如果元素丢失或者无效,则可以拒绝处理该元素,这样就保证了安全性。

回顾

至此,我们完整的看完了 React.createElement 的源码,现在我们再看 React 官方文档的这段:

以下两种示例代码完全等效:

const element = (
  <h1 className="greeting">
    Hello, world!
  </h1>
);
const element = React.createElement(
  'h1',
  {className: 'greeting'},
  'Hello, world!'
);

React.createElement() 会预先执行一些检查,以帮助你编写无错代码,但实际上它创建了一个这样的对象:

// 注意:这是简化过的结构
const element = {
  type: 'h1',
  props: {
    className: 'greeting',
    children: 'Hello, world!'
  }
};

这些对象被称为 “React 元素”。它们描述了你希望在屏幕上看到的内容。React 通过读取这些对象,然后使用它们来构建 DOM 以及保持随时更新。

现在你对这段是不是有了更加深入的认识?

React 系列的预热系列,带大家从源码的角度深入理解 React 的各个 API 和执行过程

以上就是React前端开发createElement源码解读的详细内容,更多关于React前端开发createElement的资料请关注我们其它相关文章!

(0)

相关推荐

  • React createElement方法使用原理分析介绍

    目录 摘要 1.创建方法 2.处理type 3.处理config 4.处理children 5.对比真正的React.createElement源码 摘要 在上一篇说过,React创建元素有两种方式: 第一种是通过JSX方式创建,第二种是通过React.createElement方法创建.但是通过JSX创建React元素的方式,最终也会经过babel进行转换,再用React.createElement进行元素创建. 而这一篇文章,主要是讲一下React.createElement是如何创建Rea

  • React的createElement和render手写实现示例

    目录 TL;DR 科普概念 准备工作 实现 createElement 实现 render 测试 TL;DR 本文的目标是,手写实现createElement和render React.createElement实现的本质就是整合参数变成对象,这个对象就是react元素 ReactDOM.render实现的本质就是根据react元素(对象)创建真实元素及其属性和子元素 科普概念 JSX 语法 - 就是类似 html 的写法<h1>颜酱<span>最酷</span><

  • React前端开发createElement源码解读

    目录 React 与 Babel 元素标签转译 组件转译 子元素转译 createElement 源码 函数入参 第一段代码 __self 和 __source 第二段代码 props 对象 第三段代码 children 第四段代码 defaultProps 第五段代码 owner ReactElement 源码 REACT_ELEMENT_TYPE 回顾 React 与 Babel 元素标签转译 用过 React 的同学都知道,当我们这样写时: <div id="foo">

  • 通过示例源码解读React首次渲染流程

    目录 说明 题目 首次渲染流程 render beginWork completeUnitOfWork commit 准备阶段 before mutation 阶段 mutation 阶段 切换 Fiber Tree layout 阶段 题目解析 总结 说明 本文结论均基于 React 16.13.1 得出,若有出入请参考对应版本源码.参考了 React 技术揭秘. 题目 在开始进行源码分析前,我们先来看几个题目: 题目一: 渲染下面的组件,打印顺序是什么? import React from

  • React之echarts-for-react源码解读

    目录 前言 从与原生初始化对比开始 陷阱-默认值height为300px 主逻辑源码剖析 挂载渲染过程 更新渲染过程 卸载过程 项目依赖 后续 前言 在当前工业4.0和智能制造的产业升级浪潮当中,智慧大屏无疑是展示企业IT成果的最有效方式之一.然而其背后怎么能缺少ECharts的身影呢?对于React应用而言,直接使用ECharts并不是最高效且优雅的方式,而echarts-for-react则是针对React应用对ECharts进行轻量封装和增强的工具库. echarts-for-react的

  • 微前端框架qiankun源码剖析之下篇

    目录 引言 四.沙箱隔离 4.1 JS隔离 1. Snapshot沙箱 2. Legacy沙箱 3. Proxy沙箱 4.2 CSS隔离 1. ShadowDOM 2. Scoped CSS 五.通信方式 六.结语 引言 承接上文  微前端框架qiankun源码剖析之上篇 注意: 受篇幅限制,本文中所粘贴的代码都是经过作者删减梳理后的,只为讲述qiankun框架原理而展示,并非完整源码.如果需要阅读相关源码可以自行打开文中链接. 四.沙箱隔离 在基于single-spa开发的微前端应用中,子应用

  • 详解webpack-dev-middleware 源码解读

    前言 Webpack 的使用目前已经是前端开发工程师必备技能之一.若是想在本地环境启动一个开发服务,大家只需在 Webpack 的配置中,增加 devServer的配置来启动.devServer 配置的本质是 webpack-dev-server 这个包提供的功能,而 webpack-dev-middleware 则是这个包的底层依赖. 截至本文发表前,webpack-dev-middleware 的最新版本为 webpack-dev-middleware@3.7.2,本文的源码来自于此版本.本

  • Evil.js项目源码解读

    目录 引言 源码解析 立即执行函数 为什么要用立即执行函数? includes方法 map方法 filter方法 setTimeout Promise.then JSON.stringify Date.getTime localStorage.getItem 用途 引言 2022年8月18日,一个名叫Evil.js的项目突然走红,README介绍如下: 什么?黑心996公司要让你提桶跑路了? 想在离开前给你们的项目留点小 礼物 ? 偷偷地把本项目引入你们的项目吧,你们的项目会有但不仅限于如下的神

  • jQuery源码解读之removeAttr()方法分析

    本文较为详细的分析了jQuery源码解读之removeAttr()方法.分享给大家供大家参考.具体分析如下: 扩展jQuery原型对象的方法: 复制代码 代码如下: jQuery.fn.extend({ //name,传入要DOM元素要移除的属性名.     removeAttr: function( name ) { //使用jQuery.fn对象,即jQuery原型对象的each方法遍历当前选择器选择的jQuery对象数组,并返回该jQuery对象以便链式调用.         return

  • 基于线程池的工作原理与源码解读

    随着cpu核数越来越多,不可避免的利用多线程技术以充分利用其计算能力.所以,多线程技术是服务端开发人员必须掌握的技术. 线程的创建和销毁,都涉及到系统调用,比较消耗系统资源,所以就引入了线程池技术,避免频繁的线程创建和销毁. 在Java用有一个Executors工具类,可以为我们创建一个线程池,其本质就是new了一个ThreadPoolExecutor对象.线程池几乎也是面试必考问题.本节结合源代码,说说ThreadExecutor的工作原理 一.线程池创建 先看一下ThreadPoolExec

  • vue3 源码解读之 time slicing的使用方法

    今天给大家带来一篇源码解析的文章,emm 是关于 vue3 的,vue3 源码放出后,已经有很多文章来分析它的源码,我觉得很快又要烂大街了,哈哈 不过今天我要解析的部分是已经被废除的 time slicing 部分,这部分源码曾经出现在 vue conf 2018 的视频中,但是源码已经被移除掉了,之后可能也不会有人关注,所以应该不会烂大街 打包 阅读源码之前,需要先进行打包,打包出一份干净可调试的文件很重要 vue3 使用的 rollup 进行打包,我们需要先对它进行改造 import cle

  • koa中间件核心(koa-compose)源码解读分析

    最近经常使用koa进行服务端开发,迷恋上了koa的洋葱模型,觉得这玩意太好用了.而且koa是以精简为主,没有很多集成东西,所有的东西都需按需加载,这个更是太合我胃口了哈哈哈哈. 相对与express的中间件,express的中间件使用的是串联,就像冰糖葫芦一样一个接着一个,而koa使用的V型结构(洋葱模型),这将给我们的中间件提供更加灵活的处理方式. 基于对洋葱模型的热衷,所以对koa的洋葱模型进行一探究竟,不管是koa1还是koa2的中间件都是基于koa-compose进行编写的,这种V型结构

随机推荐