JSX 与组件 (Components)

React 课程的一部分

上一课里，你看到一个组件返回了看着像 HTML 的东西：return <h1>Hello, React</h1>;。那时你多半觉得有点不对劲。JavaScript 函数返回的是数字、字符串、对象这类值，它们可不返回尖括号。之所以能在 JavaScript 函数里直接写标记，是因为中间有一层叫 JSX 的东西，而它自带一小套规则，这些规则跟 HTML 差得够多，凡是以为自己早就懂了的人都会被绊一下。这些规则只要讲清楚一次，就不再让人意外了，而用组件搭页面也就不再像什么障眼法，开始像搭积木一样自然。

JSX 是 JavaScript XML 的缩写。它是一种语法扩展，让你能在 JavaScript 代码里直接写出看着像 HTML 标签的东西。有个构建工具（就是上一课提到的那类编译器）会读到 <h1>Hello</h1>，在你的浏览器看见它之前，就把它变成一次普通的 JavaScript 函数调用，大致是 createElement("h1", null, "Hello")。这行函数调用你永远不用自己写，但知道它在那儿，下面每一条规则就都说得通了：既然 <h1>...</h1> 私底下是一次函数调用，那你放进它里面的东西，就必须是函数调用能接受的东西，而不是随便什么 HTML。 ...