• 不使用 JSX 的 React

    不使用 JSX 的 React

    React 并不强制要求使用 JSX。当你不想在构建环境中配置有关 JSX 编译时,不在 React 中使用 JSX 会更加方便。

    每个 JSX 元素只是调用 React.createElement(component, props, …children) 的语法糖。因此,使用 JSX 可以完成的任何事情都可以通过纯 JavaScript 完成。

    例如,用 JSX 编写的代码:

    1. class Hello extends React.Component {
    2. render() {
    3. return <div>Hello {this.props.toWhat}</div>;
    4. }
    5. }
    6. ReactDOM.render(
    7. <Hello toWhat="World" />,
    8. document.getElementById('root')
    9. );

    可以编写为不使用 JSX 的代码:

    1. class Hello extends React.Component {
    2. render() {
    3. return React.createElement('div', null, `Hello ${this.props.toWhat}`);
    4. }
    5. }
    6. ReactDOM.render(
    7. React.createElement(Hello, {toWhat: 'World'}, null),
    8. document.getElementById('root')
    9. );

    如果你想了解更多 JSX 转换为 JavaScript 的示例,可以尝试使用 在线 Babel 编译器。

    组件可以是字符串,也可以是 React.Component 的子类。当组件为无状态组件时,它也可以是一个普通的函数。

    如果你不想每次都键入 React.createElement,通常的做法是创建快捷方式:

    1. const e = React.createElement;
    2. ReactDOM.render(
    3. e('div', null, 'Hello World'),
    4. document.getElementById('root')
    5. );

    如果你使用了 React.createElement 的快捷方式,那么在没有 JSX 的情况下使用 React 几乎一样方便。

    或者,你也可以参考社区项目,如:react-hyperscripthyperscript-helpers,它们提供了更简洁的语法。