JSX

JSX 是一个预处理器步骤,它为 JavaScript 添加了 XML 语法。你绝对可以在没有 JSX 的情况下使用 React,但 JSX 使 React 更加优雅。

就像 XML 一样,JSX 标签有标签名称,属性和子标签。如果属性值包含在引号中,则该值为字符串。否则,将值包装在大括号中,值是随附的 JavaScript 表达式。

从根本上说,JSX 只为 React.createElement(component, props, ...children) 函数提供语法糖。

那么,以下 JSX 代码:

class HelloMessage extends React.Component {
  render() {
    return <div>Hello {this.props.name}</div>;
  }
}

ReactDOM.render(<HelloMessage name="Kalo" />, mountNode);

编译为以下 JavaScript 代码:

class HelloMessage extends React.Component {
  render() {
    return React.createElement(
      "div",
      null,
      "Hello ",
      this.props.name
    );
  }
}

ReactDOM.render(React.createElement(HelloMessage, { name: "Kalo" }), mountNode);

总之,请注意 JSX的以下行既不是字符串也不是 HTML

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

它被称为 JSX,它是 JavaScript语法扩展。JSX 可能会提醒你一种模板语言,但它具有 JavaScript 的全部功能。

React 团队在他们的文档中说他们建议使用它来描述 UI 应该是什么样子。