（三）：理解JSX和组件
最后更新于：2022-04-01 23:10:57
> 原文：http://www.infoq.com/cn/articles/react-jsx-and-component
通过前两篇文章的介绍，相信大家对JSX和组件已经有了一定的了解。JSX这种混合使用JavaScript和XML的语言第一眼看上去很“丑”，也很神奇，但是其语法和背后的逻辑却极其简单。相信读完本文你就可以对JSX和组件有一个全面的了解，并能够用JSX来直观的构造用户界面。
**目录**
[TOC]
## 什么是JSX
React的核心机制之一就是虚拟DOM：可以在内存中创建的虚拟DOM元素。React利用虚拟DOM来减少对实际DOM的操作从而提升性能。类似于真实的原生DOM，虚拟DOM也可以通过JavaScript来创建，例如：
~~~
var child1 = React.createElement('li', null, 'First Text Content');
var child2 = React.createElement('li', null, 'Second Text Content');
var root = React.createElement('ul', { className: 'my-list' }, child1, child2);
~~~
使用这样的机制，我们完全可以用JavaScript构建完整的界面DOM树，正如我们可以用JavaScript创建真实DOM。但这样的代码可读性并不好，于是React发明了JSX，利用我们熟悉的HTML语法来创建虚拟DOM：
~~~
var root =(
{todo.text}
);
});
var ul = (
';
- First Text Content
- Second Text Content
Welcome back, {{person.firstName}} {{person.lastName}}!
Please log in.
~~~
在[EmberJS](http://emberjs.com/)中：
~~~
{{#if person}}
Welcome back, {{person.firstName}} {{person.lastName}}!
{{else}}
Please log in.
{{/if}}
~~~
在[Knockoutjs](http://knockoutjs.com/)中：
~~~
Welcome back, {{person.firstName}} {{person.lastName}}!
Please log in.
~~~
模板可以直观的定义UI来展现Model中的数据，你不必手动的去拼出一个很长的HTML字符串，几乎每种框架都有自己的模板引擎。传统MVC框架强调界面展示逻辑和业务逻辑的分离，因此为了应对复杂的展示逻辑需求，这些模板引擎几乎都不可避免的需要发展成一门独立的语言，如上面代码所示，每个框架都有自己的模板语言语法。而这无疑增加了框架的门槛和复杂度。
如果说掌握一种模板语言并不是很大的问题，那么其实由模板带来的架构复杂性则是让框架也变得复杂的重要原因之一，例如：
* 模板需要对应数据模型，即上下文，如何去绑定和实现？
* 模板可以嵌套，不同部分界面可能来自不同数据模型，如何处理？
* 模板语言终究是一个轻量级语言，为了满足项目需求，你很可能需要扩展模板引擎的功能。
为了解决这些复杂度，框架本身需要精心的设计，以及创造新的概念（例如Angular的Directive）。这些都会让框架变得复杂和难以掌握，不仅增加了开发成本，各种难以调试的Bug还会降低开发质量。
正因为如此，React直接放弃了模板而发明了JSX。看上去很像模板语言，但其本质是通过代码来构建界面，这使得我们不再需要掌握一门新的语言就可以直观的去定义用户界面：掌握了JavaScript就已经掌握了JSX。这里不妨再引用之前文章举过的例子，在展示一个列表时，模板语言通常提供名为Repeat的语法，例如在Angular中：
~~~
- {{todo.text}}
-
{lis}
{
person ? Welcome back, {person.firstName} {person.lastName}!
: Please log in
}
);
~~~
既然大括号中是JavaScript，而JSX又允许在JavaScript中使用XML，因此在大括号中仍然可以使用XML来声明组件，不断递归使用。
如果需要展现一组子节点，只需表达式返回一个JavaScript数组，数组的每个元素都是一个React组件，例如上一节的例子，其中lis就是有多个“li”元素的数组。：
~~~
var ul = (
-
{lis}
Hello World.
~~~
乍一看，这段JSX中的大括号是双的，有点奇怪，但实际上里面的大括号只是标准的JavaScript对象表达式，外面的大括号是JSX的语法。所以，样式你也可以先赋值给一个变量，然后传进去，代码会更易读：
~~~
var style = {
color: '#ff0000',
fontSize: '14px'
};
var node = HelloWorld.
;
~~~
在JSX中可以使用所有的的样式，基本上属性名的转换规范就是将其写成驼峰写法，例如“background-color”变为“backgroundColor”, “font-size”变为“fontSize”，这和标准的JavaScript操作DOM样式的API是一致的。
## 使用自定义组件
在JSX中，我们不仅可以使用React自带div, input...这些虚拟DOM元素，还可以自定义组件。组件定义之后，也都可以利用XML语法去声明，而能够使用的XML Tag就是在当前JavaScript上下文的变量名，这一点非常好用，你不必再去考虑某个Tag是如何对应到相应的组件实现。例如React官方教程中的例子：
~~~
class HelloWorld extends React.Component{
render() {
return (
Hello, ! It is {this.props.date.toTimeString()}
); } }; setInterval(function() { React.render(