React中jsx语法糖的本质？

提示：别忘了点关注哦 ~

---

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、什么是jsx?

• Jsx是一种JavaScript的语法扩展，也是在很多地方称之为JavaScript XML，使因为看起来就像是一段XML语法
• 它用于描述我们的UI界面，并且完成可以和JavaScript融合在一起使用
• 它不同于vue中的模块语法，不需要转恶魔你学习模块语法中的一些指令（例如：v-bin 、 v-for 、v-if 、 v-else）

二、React中jsx语法糖的本质？

1、jsx本质上就是React.createElement的语法糖，不在使用React.createElement的繁琐写法，而是使用更加直观的声明式语法，与HTML结构相同，降低了React的学习成本，提高了开发效率

该方法接收三个参数：

type，当前ReactElement的类型，如果是标签元素，那么使用字符串表示“div”，如果是组件元素直接使用组件的名称就可以。
config，我们在JSX中绑定的属性会在config对象中以键值对的形式存在。
children，存放标签中的内容，以children数组的形式存储
我们知道JSX是通过babel进行解析的，我们编写JSX需要依赖babel，我们可以在babel官网查看转换的过程

三、基本使用体验

// 引入依赖包
import React from 'react';
import ReactDOM from 'react-dom';

// jsx语法糖 用于简化React.createElement()的写法
const ulNode = (
  <div>
    <ul>
      <li>香蕉</li>
      <li>火龙果</li>
      <li>荔枝</li>
    </ul>
  </div>
);

ReactDOM.render(ulNode, document.querySelector('#root'));

---