# react-dom

TIP

ReactDOM是渲染的最核心部分,它在浏览器里执行的时候,可以把React元素,也就是虚拟DOM转换成真实DOM

# 一、特点

  • React元素是构成React应用的最小单位
  • React元素用来描述你在屏幕上看到的内容
  • React元素事实上是普通的JS对象
  • ReactDOM来确保浏览器中的DOM数据和React元素保持一致

# 二、createElement

# 1 jsx转化react元素

简单版本

// jsx
let element = <h1>hello</h1>;

// react元素
let element = React.createElement("h1", null, "Hello");

console.log(JSON.stringify(element,null,2));

/**
{
  "type": "h1",
  "props": {
    "children": "Hello"
  }
}
 */

复杂版本

// jsx
let element = (
  <h1 className="title" style={{color:'red'}}>
    <span>hello</span>world
  </h1>
);

// react元素
/**
 * 参数1 标签的类型 h1 span div
 * 参数2 属性的JS对象
 * 参数3往后的都是儿子们
 */
let element = React.createElement("h1", {
  className: "title",
  style: {
    color: 'red'
  }
}, React.createElement("span", null, "hello"), "world");

console.log(JSON.stringify(element,null,2));

/**
{
  "type": "h1",
  "props": {
    "className": "title",
    "style": {
      "color": "red"
    },
    "children": [
      {
        "type": "span",
        "props": {
          "children": "hello"
        }
      },
      "world"
    ]
  }
}
 */

# 2 实现createElement

/**
 * @param {*} type 元素的类型
 * @param {*} config 配置的属性对象
 * @param {*} children 第一个儿子
 */
function createElement(type, config, children) {
	// 删除多余对象
	if (config) {
		delete config._owner;
		delete config._store;
	}
	let props = {...config};

	// 截取儿子数据
	if (arguments.length > 3) {
		children = Array.prototype.slice.call(arguments, 2);
	}
	// children可能是数组(多于1个儿子)
	//  也可能是一个字符串或者数字,也可能是一个null,也可能是一个react元素 
	 props.children = children;
	//  返回React元素,也就是虚拟DOM
	 return {
		 type, // 元素的类型
		 props // 元素的属性
	 }
}

let React = {
	createElement
}

export default React;