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

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.