2.1 认识JSX

2.1.1 JSX是什么

在React项目中，一切皆组件，组件又是由JSX编写的；一方面了解常用的元素会被React处理成什么，有利于后续React fible类型；另一方面理解JSX的变异过程，方便操纵Children，控制React渲染，掌握render props等设计模式

2.1.2 React.createElement

1. 因为JSX中，闭合的标签通过Bable编译后会被转换成React.createElement形式，因此老版本强制引入React，防止找不到而报错

2. 查看下述API：

   React.createElement(
   	type,
       [props],
       [...children]
   )

   备注：

   1. type：如果是组件类型，会传入组件对应的类或函数；如果是DOM元素类型，则传入div或span之类的字符串

   2. props：一个对象在DM类型中为标签属性，在组件类型中为props，

   3. 其他参数children：一次 为该元素的子元素，根据顺序排列

   4. 返回结果为React Element对象

3. 举例：

   <div>
   	<TextComponent />
       <div>hello, world</div>
       let us learn React!
   </div>

   经过Bable编译后：

   React.createElement("div", null,
   	React.createElement(TextComponent, null),
       React.createElement("div", null, "hello, world"),
       "let us learn React!"
   )

2.1.3 JSX转换逻辑

除了JSX处理，还有一些其他转换逻辑：

JSX元素类型	React.createElement转换后	type属性
element元素类型	ReactElement类型	标签字符串，例如div
fragment类型	ReactElement类型	symbol react.fragment类型
文本类型	直接字符串	无
数组类型	返回数组结构，里面的元素被React.createElement转换	无
组件类型	ReactElement类型	组件类或者组件函数本身
三元运算/表达式	先执行三元运算，在按照上述规则处理	看三元运算返回结果
函数执行	先执行函数，在按照上述规则处理	看函数执行结果

2.1.4 ReactElement对象

通过上述描述，可以了解ReactElement对象是通过React.createElement创建出来的特殊对象，大致如下：

const element = {
    $$typeof: REACT_ELEMENT_TYPE, 	// Element元素类型
    type: type, 	// type属性，证明是元素还是组件
    key: key, 	// key属性
    ref: ref, 	// ref属性
    props: props, 	// props属性
    ...
};

备注：REACT_ELEMENT_TYPE大约是$$type: Symbol(react.element)这个样子，用一个Symbol数据类型证明了这个type的唯一性