jsx(6)-本质和原理

image.png

babel每遇到一个标签（div，span之类的html标签，或者是组件名字），就会将里面它转换成React.createElement()这个函数的调用。

image.png

React.createElement("div", {className: "header"}, React.createElement(...))创建出来的对象，就是虚拟dom。
然后再根据虚拟dom，生成真实dom。

      // 1.定义App根组件
      class App extends React.Component {
        constructor() {
          super();
          this.state = {
            message: "Hello World",
          };
        }

        render() {
          const { message } = this.state;

          return (
            

              
Header
              

                
{message}
                

                  
列表数据1
                  
列表数据2
                  
列表数据3
                  
列表数据4
                  
列表数据5
                
              
              
Footer
            
          );
        }
      }

      // 2.创建root并且渲染App组件
      const root = ReactDOM.createRoot(document.querySelector("#root"));
      root.render();

"use strict";

// 1.定义App根组件
class App extends React.Component {
  constructor() {
    super();
    this.state = {
      message: "Hello World"
    };
  }
  render() {
    const { message } = this.state;
    return /*#__PURE__*/ React.createElement(
      "div",
      null,
      /*#__PURE__*/ React.createElement(
        "div",
        {
          className: "header"
        },
        "Header"
      ),
      /*#__PURE__*/ React.createElement(
        "div",
        {
          className: "Content"
        },
        /*#__PURE__*/ React.createElement("div", null, message),
        /*#__PURE__*/ React.createElement(
          "ul",
          null,
          /*#__PURE__*/ React.createElement(
            "li",
            null,
            "\u5217\u8868\u6570\u636E1"
          ),
          /*#__PURE__*/ React.createElement(
            "li",
            null,
            "\u5217\u8868\u6570\u636E2"
          ),
          /*#__PURE__*/ React.createElement(
            "li",
            null,
            "\u5217\u8868\u6570\u636E3"
          ),
          /*#__PURE__*/ React.createElement(
            "li",
            null,
            "\u5217\u8868\u6570\u636E4"
          ),
          /*#__PURE__*/ React.createElement(
            "li",
            null,
            "\u5217\u8868\u6570\u636E5"
          )
        )
      ),
      /*#__PURE__*/ React.createElement(
        "div",
        {
          className: "footer"
        },
        "Footer"
      )
    );
  }
}

// 2.创建root并且渲染App组件
const root = ReactDOM.createRoot(document.querySelector("#root"));
root.render(/*#__PURE__*/ React.createElement(App, null));

React.createElement(component, props, ...children)
这个children也是React.createElement（）。
逗号分开。
/#PURE/
babel告诉你这个函数是纯函数调用。可以在webpack的tree-shaking里面被摇掉。不用的话，这个函数将不会被打包

jsx本质，将标签转换成Reac.createElement()函数。

Reac.createElement()函数创建出来的是ReactElement对象

虚拟dom的创建原理

image.png

image.png

原因是React利用ReactElement对象组成了一个JavaScript的对象树；(reactElement对象， 这个对象有props属性，里面存放着children的reatElement对象，是树结构)
 JavaScript的对象树就是虚拟DOM（Virtual DOM）；

虚拟dom转换成真实dom

babel将标签转换成react.createElement的函数调用。然后浏览器执行的时候，会得到react Element对象，也就是js对象。这些js对象，经过渲染，就会变成真实dom。

vue的化里面的template里面有很多指令，v-for，v-bind之类的也得解析，react中的解析更见简单明了，而且vue的template是vue自己解析的。react的jsx是babel解析的。

虚拟dom的作用（面试题）

1.没有必要重新渲染所有的真实dom。
在虚拟dom里面快速进行diff算法，来决定到底哪些东西更新，哪些东西不更新。（虚拟dom比较简单，真实的dom有很多方法之类的，很占内存空间。）
2.可以做跨平台应用程序。
虚拟dom的本质是js对象。react可以将虚拟dom渲染成真实dom。也是通过document.createElement方法渲染到web的dom上面的。ratct里面有个技术叫做react native，它可以渲染成ios，安卓上面的控件，用react开发原生的东西。

image.png

声明式编程

image.png

我们最主要是在做的事情是在维护这个状态，你只需要告诉我你希望界面长什么样子，然后维护着你这里这个状态就可以了.然后呢，当状态发生改变的时候，你调这个setState，告诉我状态发生改变了，我重新渲染，那么真实的到底它的DOM如何更新，不需要你来做。

在react中是没有数据劫持的，是需要手动调用setState函数更新界面。vue中有数据劫持，当数据改变的时候，自动渲染页面。