React中文网

编写React的时候，JSX并不是必须的。当你不想在你的构建环境中安装相关编译工具的时候，不使用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 。它们都提供了一些简洁的语法。


相关npm包集合


相关站点资源