【React源码】2.Jsx & ReactElement

JSX

• 语法糖：通过babel 转译成ReactCreateElement

1. 开发阶段：编写JSX

2. 打包阶段：通过babel转译成React.createElement()

3. render阶段：执行React.createElement() 形成 ReactElement，再通过ReactDom.render() 转换成真实dom;

React元素

{
	type:'div',//标签
	props:{
		id:'title',
		children:'hello',//如果是多个子的话，是Array类型
	}
}

ReactDom.createElement

const REACT_ELEMENT = Symbol('react.element');
/**
 * 创建React元素
 * @param type 标签
 * @param config 配置
 * @param children 子元素，可能多个
 * @returns React.Element
 */
function createElement(type, config, children) {
  const { __source, __self, ref, key, ...props } = config;

  if (arguments.length > 3) {
    props.children = Array.prototype.slice.call(arguments, 2);
  } else {
    props.children = children;
  }

  return {
    $$typeof: REACT_ELEMENT,//html标签类型
    type,//标签名:如div
    props,//属性:如id,className
    key,//用于dom:diff
    ref,//真实dom
  };
}