JSX 是什么?1
JSX 是一个 JavaScript 的语法扩展(由 React 项目组发明并使用),它既不是字符串也不是 HTML。 它本身是一个表达式 ,在编译(Babel)之后,会被转为普通 JavaScript 函数( React.createElement()
)调用,并且对其取值后得到 JavaScript 对象。
以下两种示例完全等效:
const element = (
<h1 className="greeting">
Hello, world!
</h1>
);
// === 完全等效于 ===
const element = React.createElement(
'h1',
{className: 'greeting'},
'Hello, world!'
);
// 如果,你喜欢使用下边这种方式,那么,你就不需要 JSX
React.createElement()
会预先执行一些检查,但实际上它创建了一个这样的对象:
// 注意:这是简化过的结构
const element = {
type: 'h1',
props: {
className: 'greeting',
children: 'Hello, world!'
}
};
这些对象被称为 “React 元素” ,它们描述了你希望在屏幕上看到的内容。React 通过读取这些对象,然后使用它们来构建 DOM 以及保持随时更新。
与浏览器的 DOM 元素不同,React 元素是创建开销极小的普通对象。React DOM 会负责更新 DOM 来与 React 元素保持一致。