2、JSX
最后更新于：2022-04-02 06:08:22
JSX既不是字符串，也不是HTML，而是一种类似XML，用于描述用户界面的JavaScript扩展语法，如下代码所示。在使用JSX时，为了避免自动插入分号时出现问题，推荐在其最外层用圆括号包裹，并且必须用一个元素包裹（例如下面的元素）其它元素或文本，所有的元素还必须得闭合。
~~~html
(
)
~~~
JSX为视图和数据架起了一座沟通的桥梁，它看起来与模板语言类似，但没有创造新的模板语法，因为JSX最终会被编译成普通的JavaScript对象，所以能够直接使用JavaScript语法。
## 一、元素
JSX中的元素称为React元素，分为两种类型：DOM元素和组件元素，前者对应原生的HTML元素，标签的首字母要小写；后者对应自定义元素，标签的首字母要大写，如下所示。
~~~html
; //DOM元素
自定义按钮 ; //组件元素
~~~
**1）React.createElement()**
无论是DOM元素还是组件元素，最终都会通过Babel编译器将它们转换成React.createElement()方法的调用，例如下面的元素。
~~~js
//编译成
React.createElement(button, { className: "btn" }, "搜索");
~~~
React.createElement()能接收3个参数（如下所示），其中type是元素类型，也就是它的名称；props是一个由元素属性组成的对象；children是它的子元素（即内容），可以是文本也可以是其它元素。
~~~js
React.createElement(type, [props], [...children])
~~~
方法的返回值是一个元素对象，简化过的对象如下所示。
~~~json
{
type: "button",
props: {
className: "btn",
children: "搜索"
}
}
~~~
为了避免在多人协作时出现相同名称的元素，可以为元素添加命名空间，例如调用UI模块中的Btn元素，可以像下面这么写。
~~~js
const UI = {
Btn: function(props) {
return ;
}
}
搜索
~~~
**2）注释**
JSX中的注释需要像下面这样，用一对花括号、斜杠和星号包裹。
~~~js
{/* 表单中的提交按钮 */}
~~~
**3）表达式**
在JSX的任意位置都能插入表达式，但必须用花括号包裹住才能有效，例如像下面这样调用getName()函数。注意，在JSX中不能插入语句。
~~~js
function getName() {
return "strick";
}
~~~
## 二、属性
React对元素属性进行了一次封装，不仅规范了属性的命名，还完善了浏览器的兼容性。在JSX中，DOM元素的属性对应标准的DOM属性和特性；而组件元素的属性都是无对应关系的自定义属性。除了以“data-”和“aria-”为前缀的元素属性要用小写命名之外，其余的都得遵循小驼峰命名法，例如maxlength变成maxLength、onclick变成onClick等。还有两个比较特殊的属性：class和for，由于它们是JavaScript的关键字，因此需要变成className和htmlFor后才能使用。
**1）默认值**
属性的默认值是true，下面的两个元素是等价的，页面上的显示如图1所示。
~~~html
~~~
:-: 
:-: 图 1 带默认值的文本框
在标准的DOM中，诸如checked、disabled等布尔属性，它们的值要么为空要么为对应的关键字，例如“checked”、“disabled”；而JSX中的布尔属性，它们的值只能是true或false。
**2）字符串和表达式**
当属性的值是字符串时，其值需要用双引号包裹；当属性的值是表达式时，其值需要用花括号包裹，如下所示。
~~~html
~~~
**3）扩展属性**
如果存在一个由元素属性组成的属性对象，那么就能利用ES6新增的扩展运算符，把属性对象展开并传递给元素，如下所示。
~~~js
var props = { type: "text", value: "1" };
//相当于
~~~
相比直接在元素上设置属性，这种方式操作起来更加灵活。
## 三、虚拟DOM
HTML文档能被抽象成一棵由多种类型的节点构成的DOM树，而每次对DOM节点执行增删改查等操作，往往会触发非常消耗性能的重绘和重排。为了解决这个性能瓶颈，React引入了虚拟DOM。虚拟DOM（Virtual DOM）是构建在真实DOM之上的一层抽象，它将DOM元素映射成内存中的JavaScript对象（即通过React.createElement()得到的React元素），形成一棵JavaScript对象树。
在React中，将虚拟DOM转换成真实DOM的过程叫做调和（Reconciliation），而diff算法是保证调和高效的关键，因为diff算法会找出新旧虚拟DOM之间的差异部分，随后只更新真实DOM中需要变化的节点，而不是将整棵DOM树重新渲染一遍。经过虚拟DOM的隔离，开发人员已经不用再直接与页面上的真实DOM打交道了，如图2所示。
:-: 
:-: 图 2 新的开发模式
虚拟DOM还有一大亮点，那就是将它与其他渲染器配合能够集成到指定的终端，即将React元素映射成对应的原生控件，前文所描述的是用react-dom在Web端渲染，还可以使用react-native在手机端（Android或iOS）渲染。
*****
> 原文出处：
[博客园-React躬行记](https://www.cnblogs.com/strick/category/1455720.html)
[知乎专栏-React躬行记](https://zhuanlan.zhihu.com/pwreact)
已建立一个微信前端交流群，如要进群，请先加微信号freedom20180706或扫描下面的二维码，请求中需注明“看云加群”，在通过请求后就会把你拉进来。还搜集整理了一套[面试资料](https://github.com/pwstrick/daily)，欢迎浏览。
';
{getName()}
~~~
由于JSX本身就是一种表达式，因此它可以作为函数的参数、返回值或变量的值，如下所示。
~~~js
if (true) {
let fragment = {getName()}
;
}
~~~
在JSX中传入的值都会自动被HTML转义，这样可以防止XSS攻击，例如输入“\\
”，输出“\<p\>\</p\>”，如下所示。 ~~~js //<p></p>{""}
~~~
如果要输出不转义的值，那么可以用React提供的dangerouslySetInnerHTML属性，如下代码所示。它的值是一个包含\_\_html属性的对象，其作用相当于调用DOM元素的innerHTML属性。
~~~html
"}}>
~~~
**4）内容**
当元素的内容是字符串时，JSX会移除字符串中的空行，其内部的换行会被替换成一个空格，下面的两个元素是等价的。
~~~html
freedom strick
freedom strick
~~~ 当元素的内容是false、null、undefined或true时，它们都不会被渲染到DOM结构中，因此下面的五个元素是等价的。 ~~~html{false}
{null}
{undefined}
{true}
~~~ **5）渲染** 如果要将React元素渲染到页面的DOM结构中，可以调用ReactDOM.render()方法，此方法接收3个参数，如下所示。 ~~~js ReactDOM.render(element, container[, callback]) ~~~ element是要渲染的元素；container是页面中的一个节点，在此处起到容器的作用，element会被渲染到container中；callback是可选的回调函数，会在组件被渲染或更新之后触发。此方法的使用可参考下面的示例。 ~~~htmlfreedom
~~~
当第一次调用ReactDOM.render()方法时，容器内部的元素会被全部替换掉，也就是执行上面的代码得到的结果如下所示，原先的字符串“freedom”被替换成了元素。
~~~html
strick