JSX本质

我正在参加「掘金·启航计划」

React.createComponent

实际上，jsx 仅仅只是 React.createElement(component,props, ...children)函数的语法糖，所有的jsx最终都会被转换成React.createElement的函数调用。createElement需要传递三个参数。

参数一 type

type是当前ReactElement的类型，如果是标签元素，那么就使用字符串表示，如 "div"，如果是组件元素，那么就直接使用组件的名称，如"App"

参数二 config

所有jsx中的属性都在config中以对象的属性和值的形式存储，比如传入className作为元素的class。

参数三 children

children存放在标签中的内容，children以数组的方式进行存储，当然，如果是多个元素的话，React内部有对它们进行处理。

验证正确性

在使用react的时候用babel进行转换，那么去官网将一段JSX代码放入，然后看看你会转换成什么吧？

首先进入Babel官网的在线工具，然后配置左侧栏的选项，如下图所示：

截屏2023-05-16 17.25.01.png

然后将以下代码复制进左侧的输入框：

(
  <div id="box">
    <header className="header">标题</header>
    <ul>
      <li>数据1</li>
      <li>数据2</li>
      <li>数据3</li>
      <li>数据4</li>
      <li>数据5</li>
    </ul>
    <footer className="footer">结尾</footer>
  </div>
)

最后在右侧就会有转换后的结果啦：

/*#__PURE__*/ React.createElement(
  "div",
  {
    id: "box"
  },
  /*#__PURE__*/ React.createElement(
    "header",
    {
      className: "header"
    },
    "\u6807\u9898"
  ),
  /*#__PURE__*/ React.createElement(
    "ul",
    null,
    /*#__PURE__*/ React.createElement("li", null, "\u6570\u636E1"),
    /*#__PURE__*/ React.createElement("li", null, "\u6570\u636E2"),
    /*#__PURE__*/ React.createElement("li", null, "\u6570\u636E3"),
    /*#__PURE__*/ React.createElement("li", null, "\u6570\u636E4"),
    /*#__PURE__*/ React.createElement("li", null, "\u6570\u636E5")
  ),
  /*#__PURE__*/ React.createElement(
    "footer",
    {
      className: "footer"
    },
    "\u7ED3\u5C3E"
  )
);

虚拟DOM

虚拟DOM帮助我们从命令式编程转到了声明式编程的模式，React官方的说法：Virtual DOM是一种编程理念。在这个理念中，UI以一种理想化或者说虚拟化的方式保存在内存中，并且它是一个相对简单的JavaScript对象，我们可以通过ReactDOM.render让虚拟DOM和真实DOM同步起来，这个过程中叫做协调 (Reconciliation);

这种编程的方式赋予了React声明式的APl:

你只需要告诉React希望让UI是什么状态，
React来确保DOM和这些状态是匹配的;
你不需要直接进行DOM操作，就可以从手动更改DOM、属性操作、事件处理中解放出来

前端小白学 React 框架（六）