JSX底层渲染机制[视图的编译机制]

JSX底层渲染机制[视图的编译机制]：创建virtualDMO-->DOM-DIFF-->真实DOM

1. 创建virtualDOM[虚拟DOM对象/JSX对象/JSX元素对象...]

@1 基于babel-preset-react-app 语法包，对我们编写的JSX视图进行编译，把其编译为React.createElement 这样的模式

https://babeljs.io/repl

React.createElement( 两个及两个以上参数

标签名/组件，

给标签或者组件设置的组件[如果没有设置，则为null]

第三个及其以后的参数，都是当前元素的子节点[可能没有]

)

但凡是一个HTML元素或者组件，都要编译成createElement这种格式

@2 把createElement方法执行，返回一个对象

let a = React.createElement(
  "div",
  { className: "box" },
  React.createElement(
    "h2",
    { className: "title" },
    "1111"),
  React.createElement(
    "ul",
    { className: "news" },
    React.createElement("li", null, "10"),
    React.createElement("li", null, "20"),
    React.createElement("li", null, "30")));
//先执行里面的 然后当做第三个参数传递给外面的React.createElement
console.log(a);

函数组件和类组件

const Demo = function Demo(props) {
  return <div className='box'></div>
}


class Demo1 extends React.Component {
  render() {
    return <div className='box'>
      DEMO
    </div>
  }
}

let b = React.createElement(
  Demo,//Demo1
  { num: 10 },
  React.createElement(
    "span",
    null,
    "\u54C8\u54C8\u54C8"));
console.log(b);

类组件

函数组件

对象{

$$typeof: Symbol(react.element)

type: "div" 传递给createElement方法的第一个参数[标签名或者组件]

props:{

把传递给createElement的第二个参数的内容，都放在这个对象中，

如果有子节点，则设置一个children属性，属性值：

+可能是一个值就是一个对象

+两个以上也可能是一个数组

+没有子节点则children数组都不存在

}

....

}

基于createElement方法创建的这个对象，就是我们所谓的：virtualDOM(JSX元素对象)

[virtualDOM就是框架内部对视图编译后的结果，一个框架自己构建的对象，用来描述元素的相关特征]

2. 对于视图的第一次渲染，直接把virtualDOM变为真实DOM

基于ReactDOM中的render方法，把virtualDOM传递进来:render内部按照virtualDOM对象中的每一个字段，把virtualDOM变为真实的DOM对象，最后放在#root容器中渲染!!

=>render(VirtualDOM)

=>真实的DOM对象：浏览器可以识别的真是DOM对象

总结：总的来说，通过babel-preset-react-app把JSX语法变为React.createElement格式 并使用 React 的内部处理方法来创建和更新页面上的元素。

React.create.Element()方法创建一个React元素，（virtualDOM）,接受三个参数，组件类型，组件属性，和子元素。

render()方法将React创建的元素渲染到页面上。它传递俩个参数，要渲染的React元素和渲染到的DOM元素。将创建的React元素渲染到ID为root的DOM元素中。