JSX: Core Concepts

23rd March 2020 at 4:34pm
JSX

JSX 是什么?

JSX is a JavaScript syntax extension that looks similar to XML. You can use a simple JSX syntactic transform with React. - JSX In Depth

即是说,它是一个 JS 的扩展语法,它本质是还是 JS 只是长得像 XML:

var CommentBox = React.createClass({
  render: function() {
    return (
      <div className="commentBox">
        Hello, world! I am a CommentBox.
      </div>
    );
  }
});

你可以用 Babel 把它编译成纯粹的 JS:

var CommentBox = React.createClass({
  displayName: "CommentBox",

  render: function render() {
    return React.createElement(
      "div",
      { className: "commentBox" },
      "Hello, world! I am a CommentBox."
    );
  }
});

可以观察到,JSX 部分被替换成 React.createElement。Facebook 在 JSX 的 规范 中表示,JSX 只是一种语言扩展,并无意变成 JS 的合法语法加入 ECMAScript 规范中,只适用于各种 transpiler 做转换;而且它也不是 XML/HTML,不会遵循 XML/HTML 的规范,只是让大家感觉熟悉而已。

核心细节

不同类型的组件

JSX 中分两种类型:

  1. 一种类似 HTML 结点的结构,tag 用小写:<div>
  2. 自定义组件类型,tag 首字母大写:<MyComponent>

注意,第一种结构跟浏览器 DOM 并不一样,是 React 自己维护的一种 DOM。

在类 HTML 组件中:

  1. 如果是 HTML 规范中定义的 tag 名(比如 div),那它的属性只能是 HTML 规范中存在的属性,否则会被忽略
    • 如果你想要带自定义数据,需要使用 data-* 形式
    • 因为 class, for 是 JS 定义的关键字,因此不能被当作属性名,需要相应替换成 className, htmlFor
  2. 如果是 custom element,则任意的属性名都可以使用
    • 可以直接使用 class, for

在自定义组件中,属性名需要用 camelCase,这是为了跟 JS 的代码风格一致。

参考文档:

  1. JSX in Depth - React
  2. DOM Elements - React
  3. JSX Specification