组件化的思想就是做聚合，把属于一个组件组件的所有模块聚合在一起。

HMTL 片段是一个组件的重要组成部分。在 React 中，使用模板语言 JSX 来表现 HTML。他与 HTML 标签类似，但是又不是 HTML 标签，因此我们常常会称之为虚拟DOM。

const element = <h1>Hello, world!</h1>;

与 html 一样，JSX 可以很好的描述 UI 组件之间的相互关系，我们可以简单的将其理解为一种渲染数据的模板语言。它的本质仍然是 JavaScript 代码。通过上一章节的学习我们知道，每一个标签，都是一个实例。

在 React 中，JSX 代码所在的文件后缀名应该为 .jsx 或者 .tsx。

并且只有引入了 React 才能正确识别 JSX 代码。

1
// xxx.jsx
2
// 必不可少
3
import React from 'react';

JSX 具有大多数模板语言都具备的特性。

1、可以在 JSX 中使用表达式

1
const ele1 = <h1>Hello, {name}!</h1>
2

3
const ele2 = <h1>{sayHello('alex')}!</h1>
4

5
const ele3 = <h1>{condition ? 'React' : 'React Native'}!</h1>

我们可以在大括号中，放置任何有效的 JavaScript 表达式。

2、 每一个标签都可以接收属性

1
const element = <div tabIndex="0">注意观察属性</div>
2
const element = <div tabIndex={0}>注意观察属性</div>
3
const element = <div tabIndex={num}>接收变量</div>

JSX 默认支持所有 html 标签，并且支持所有 html 标签默认的属性。不过需要注意的是，为了与创建类的关键字 class 区分开，html 标签的 class 属性在 JSX 中使用 className 代替。

const element = <div className="index">Hello world.</div>

3、JSX 可以作为返回结果

在引入了 React 的模块中，我们可以自定一个返回 JSX 模板的函数，也可以让 JSX 参与到条件判断中。

10
import React from 'react';
20

30
...
40

50
function getResult(type) {
60
  if(type === 'React') {
70
    return <div>React</div>
80
  } else {
90
    return <div>React Native</div>
10
  }
11
}

当需要自定义组件时，这种场景会用得非常多，往往我们都需要根据传入的不同状态值动态判断具体返回什么样的 JSX。

4、使用 [].map 展示列表数据

当我们想要渲染一列数据时，可以借助数组中的 map 方法。

1
const data = [1, 2, 3, 4, 5, 6, 7];
2

3
<div className="wrapper">
4
  {data.map((item, i) => (
5
    <div className="num" key={i}>{item}</div>
6
  ))}
7
</div>

实践中，我们有时候会逼不得已需要在 JSX 中处理许多逻辑代码，这时就必须要将逻辑代码放入 中来处理。

1
const condition = true;
2

3
<div className="wrapper">
4
  {condition && <div>hello</div>}
5
</div>

但是如果使用不善，会导致 JSX 的可读性变得非常低，因此如果大家在使用过程中发现 JSX 变得越来越乱越来越复杂，则建议有意识的去寻找优化方法。

讲个题外话。

最近发现了一个非常有意思的事情。

一个 Java 开发的哥们儿在群里问 React 到底比 jQuery 好在哪？可能很多搞前端的人会觉得这是一个很傻的问题，然而这个 Java 开发的哥们儿确实从心底认为 jquery 很好用，反而 React 学习成本很高，也用的不太舒服，所以它的好处到底在哪里，为什么大家都不用 easyUI 了？

本来这是一件很小的事情，但是突然想到之前也遇到一个类似的事情，一个组里的小伙伴很疑惑为什么我们要用 async/await？我试图解释了半天他也理解不了这个东西到底好在哪里。

同样的事情还发生在我自己身上，为什么我们还要去费劲心思去学typescript？JavaScript 不是很好用嘛，干嘛要去学一个超集？当初 ts 刚出来的时候名声大噪，也动手去尝试了它的语法，真的感觉很麻烦，用起来加那么多限制条件，鼓捣了一下午也没觉得 typescript 到底好在哪里。于是放弃。正是因为认知的原因，傻乎乎的错过了好久typescript，直到 3.0 出来了，才在机缘巧合之下惊喜的发现哇靠，typescript 简直就是神器，这才深深的感受到自己真的错过了太多。

最近我特别留意了蛮多正在学习 React 的同学，或者已经学了很长时间甚至已经在工作中使用 React 的同学，发现很多人并没有觉得 React 到底好在哪里。而大家关注的重点往往是，某个功能用 React 应该怎么实现，而不是 React 这样实现，好在哪里，往往大家学习 React 的起因也不是因为已经感受到了 React 带来的好处才去学的。这样不同的认知与不同的学习源动力，自然会导致截然不同的学习效果。就连学习效率也会天差地别。

正如我之前说过的，工作经验丰富「非工作年限」的开发人员更能够直接的体会到新东西(React/Typescript)等的优势，因为经历过前端开发刀耕火种的年代，自然就明白模块化组件化虚拟 DOM 等概念的重要意义，也就更容易把这些知识看得更加重要，视若珍宝。而初学者直接上来就接触这些概念，就常常只会把他们当成一个普通的知识点去学，然后遗忘，所以同样的东西在不同的人眼中就不一样。

so, 经验丰富的前端开发者也不会有想要去嘲讽 jQuery 怎么这么难用，因为我们确确实实经过了一些事情，那个年代 jQuery 就是神器，尽管现阶段 jQuery 已经慢慢被弃用，但是它在整个前端发展历程中的意义仍然无法替代。所以如果我们在技术群里偶尔看到某个程序员用着 React/vue 嘲讽 jQuery 的时候，就凭这一点就可以知道这个人一定资历尚浅，强行装逼。

对于新手来说，要怎么去感受到 React 的好，我也没有什么切实可行的办法，只是告诉大家有这样的一个现象，因为我自己也深陷其中，也许到了某个阶段，自然就明悟了也说不定，我只能在文章里告诉大家这个东西很重要，但是总归没有自己切身体会来得深刻，毕竟搞得全文都是重点最终给人的感觉也只是全文都不是重点，所以学习这种东西，看努力，不过要走在行业前列，更看天赋，看领悟，看运气。大抵如此。

2021 年我会更新一系列深入学习 React 相关的文章，电子版会首发在专栏React 魔道。

我的目标是让这本书成为最好的 React 教学类书籍。大家可以期待一下。