React18中jsx本质和原理React18中jsx本质和原理 jsx转换过程及本质 jsx转换过程-原生React

jsx转换过程及本质

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>jsx转换过程</title>
  </head>
  <body>
    <div id="root"></div>
    <script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>
    <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
    <script type="text/babel">
      /**jsx本质
       * jsx仅仅只是React.createElement(Component,props,...children)函数的语法糖
       * 所有的jsx最终都会被转换成React.createElemnt的函数调用
       *
       * createElement需要传递三个参数：
       * 参数一：type
       * 当前ReactElement的类型
       * 如果是标签元素，使用字符串表示"div"
       * 如果是组件元素，那么就直接使用组件的名称
       *
       * 参数二：config
       * 所有的jsx中的属性都在config中以对象的属性和值的形式存储
       * 比如传入className作为元素的class
       *
       * 参数三：children
       * 存放在标签中的内容，以children数组的方式存储
       */

      // 定义App根组件
      class App extends React.Component {
        constructor() {
          super();
          this.state = {
            name: "zm",
          };
        }
        render() {
          return (
            <div>
              <div className="top">top</div>
              <div className="body">
                <div>{this.state.name}</div>
                <ul>
                  <li>list data1</li>
                  <li>list data2</li>
                  <li>list data3</li>
                  <li>list data4</li>
                  <li>list data5</li>
                </ul>
              </div>
              <div className="bottom">bottom</div>
            </div>
          );
        }
      }
      // 2.创建root并且渲染App组件
      const root = ReactDOM.createRoot(document.getElementById("root"));
      root.render(<App />);
    </script>
  </body>
</html>

jsx转换过程-原生React

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>jsx转换过程-原生React</title>
  </head>
  <body>
    <div id="root"></div>
    <script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>
    <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>
    <script>
      // 定义App根组件
      class App extends React.Component {
        constructor() {
          super();
          this.state = {};
        }
        // babel转换工具：https://babeljs.io/
        render() {
          return /*#__PURE__*/ React.createElement(
            "div",
            null,
            /*#__PURE__*/ React.createElement(
              "div",
              {
                className: "top",
              },
              "top"
            ),
            /*#__PURE__*/ React.createElement(
              "div",
              {
                className: "body",
              },
              /*#__PURE__*/ React.createElement("div", null, this.state.name),
              /*#__PURE__*/ React.createElement(
                "ul",
                null,
                /*#__PURE__*/ React.createElement("li", null, "list data1"),
                /*#__PURE__*/ React.createElement("li", null, "list data2"),
                /*#__PURE__*/ React.createElement("li", null, "list data3"),
                /*#__PURE__*/ React.createElement("li", null, "list data4"),
                /*#__PURE__*/ React.createElement("li", null, "list data5")
              )
            ),
            /*#__PURE__*/ React.createElement(
              "div",
              {
                className: "bottom",
              },
              "bottom"
            )
          );
        }
      }
      // 2.创建root并且渲染App组件
      const root = ReactDOM.createRoot(document.getElementById("root"));
      //   render把虚拟dom ->  真实dom
      root.render(React.createElement(App, null));
    </script>
  </body>
</html>