react源码系列(1) — 创建元素组件

最新推荐文章于 2024-01-02 23:00:00 发布

茂树24

最新推荐文章于 2024-01-02 23:00:00 发布

阅读量290

点赞数

分类专栏： react 源码文章标签： react 源码 react源码

本文链接：https://blog.csdn.net/wmaoshu/article/details/107551150

版权

本文详细解析React v16.13.1版本中jsx转化为createElement的过程，涵盖Babel处理、元素类型、props、children处理等核心概念。探讨React的设计原则，如何将业务关注点分离，简化开发。并介绍了类元素、方法元素、内置元素（如Suspense、lazy、memo）的实现细节。

摘要由CSDN通过智能技术生成

文章目录

react 源码版本为 v16.13.1，可以下载下来结合者一起看，本节涉及到 packages/react 中的代码。
文章的源在：https://www.yuque.com/wmaoshu/blog/gcg1ix

react 一个很重要的设计原则是根据业务维度的关注点分离，将每个关注点或者说变化的轴线作为一个个组件划分，每个组件是单一职责的。这与 HTML 和 js 逻辑分离的观念不同，虽然将逻辑和 UI 逻辑耦合在一起，但是更能从业务角度带来很大的收益，更甚者最近流行的 css in js 也是同样的思维方式，所以 react 更能适用应对复杂的业务场景。

react 的设计思想基于函数式编程，其中很重要的概念是元素、组件。元素是组成组件渲染结果的基本单元，组件更像是一个函数根据用户交互输入一定的参数 props 返回一定的元素集合 component。相同的 props 返回相同的 component，每次更新 props 都会产生全新的 component，在 DOM diff 阶段才会判断是否更新以及需要更新多少。所以 react 降低了用户关注的维度，从关注 DOM 底层操作，到只关注数据变化和数据视图映射关系，甚至视图如何变更都不需要关心，使得开发更关注逻辑本身。那么如果数据非常复杂那又需要 redux 新的管理数据模式了，所以写 react 业务需要逐步提高抽象维度。

那我们就从元素、组件最基本开始看看 react 源码是如何处理的。react 是一个运行时框架，但首先经过 babel 将 JSX 转化成 createElement。然后开始介绍 react 实现，先介绍第一参数元素类型的种类，包括字符串、内置组件、内置对象、函数、自定义对象等。然后介绍第二参数 props，包括 ref、key、children 等。至此 packages/react 中核心 react DSL 代码介绍完毕。

在这里插入图片描述

Babel 处理 JSX

假如有这么一段 jsx 代码：

<div id="root" className="style" message={
   {
   a: 1, b: 2}}>
  Demo
  {
   null ? undefined: true}
  {
    
    ['h1','h2','h3'].map(Item => <Item key={
   Item} className={
   Item+'-color'}/>)
  }
  <MyDemo ref="myRef" />
</div>

经过 babel ( https://www.babeljs.cn/repl ) 编译后为：

"use strict";

/*#__PURE__*/
React.createElement(
  "div",
  {
   
    id: "root",
    className: "style",
    message: {
   
      a: 1,
      b: 2
    }
  },
  // 下面是 children
  "Demo",
  null ? undefined : true,
  ['h1', 'h2', 'h3'].map(function (Item) {
   
    return /*#__PURE__*/React.createElement(Item, {
   
        key: Item,
        className: Item + '-color'
    });
  }),
  /*#__PURE__*/
  React.createElement(MyDemo, {
   
    ref: "myRef"
  })
);

babel 将易读的 JSX 编译成 react createElement 函数调用，从而得到react可以使用处理的组件对象。对于首字母小写的元素，比如

,会将该字符串作为对象的第一参数，而首字母大写的则将看作是一个对象。所以如果想实现该组件的定制化需要使用首字母大写的中间变量作为中转。然后，bebel 会将组件上所有的属性作为组成一个大对象作为第二参数传入（即使是 ref、key 等内置的属性都是一样的处理）。然后函数的第三个参数第四个参数……都是该组件的