7、React中JSX的使用与理解

React中JSX的使用与理解

1. JSX简介

JSX版本的代码一目了然，看起来像HTML，易于阅读，并且除了自定义组件外，它与渲染的HTML输出部分相同。本质上，JSX是一种具有类似XML语法的小语言，它改变了人们编写UI组件的方式。

早期开发者以类似MVC的方式编写HTML、控制器和视图的JS代码，在不同文件间切换，这源于早期的关注点分离原则。但如今构建高度交互的UI时，JS和HTML紧密耦合，违反了该原则。而React通过将UI描述和JS逻辑结合起来解决了这个问题，使用JSX编写的代码看起来像HTML，更易于读写。

JSX需要通过各种转换器（工具）编译成标准的ECMAScript。它不是有效的JavaScript，不能直接由JavaScript编译器编译，需要先进行转译。浏览器执行React应用时，只会看到生成所需结构的 React.createElement 语句，JSX只存在于编辑器中，转译器会将包含JSX的文件转换为纯JavaScript。

2. 使用JSX的原因

• 代码简洁 ：JSX是 React.createElement 的快捷方式，减少了重复的函数调用，输入越少，出错的可能性就越小，能让开发者更快速、更准确地创建组件和应用。
• 可读性强 ：很多人觉得带有尖括号（ <> ）的代码比大量 React.createElement() 语句的代码更容易阅读。一旦习惯将 &