不使用 JSX

JSX 对使用React 不是必须的。当你不想在你的构建环境中设置编译器，那么不使用 JSX 的 React 是非常方便的。

每一个 JSX 元素都是调用 React.createElement(component, props, ...children) 的语法糖，因此，任何你使用 JSX 来做事都可以通过纯 JavaScript 实现。

例如，下面代码是通过JSX实现的:

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

ReactDOM.render(
  <Hello toWhat="World" />,
  document.getElementById('root')
);

可以被编译成不使用JSX的代码:

class Hello extends React.Component {
  render() {
    return React.createElement('div', null, `Hello ${this.props.toWhat}`);
  }
}

ReactDOM.render(
  React.createElement(Hello, {toWhat: 'World'}, null),
  document.getElementById('root')
);

如果你想查看更多JSX如果转化为 JavaScript 的实例，你可以尝试在线Babel编译器。

组件可以通过字符串提供，也可以通过 React.Component 的子类提供，或者通过普通函数实现的无状态组件。

如果你厌倦了使用 React.createElement ，另一个常见的模式是将其赋值给一个缩写:

const e = React.createElement;

ReactDOM.render(
  e('div', null, 'Hello World'),
  document.getElementById('root')
);

如果你使用 React.createElement 的缩写形式，就可以很方便的在不通过 JSX 情况下，使用React。

其它选择的话，你可以去参考社区上的项目例如 react-hyperscript 和 hyperscript-helpers 。它们都提供了一些简洁的语法。

Edit this page