React从入门到精通系列之(18)不使用JSX编写React应用

2024年5月31日 96次阅读 来源: 张亚涛

十八、不使用JSX编写React应用

React并不是强制要求使用JSX来编写应用。 当您不想在构建时设置并编译JSX，那么在开发阶段只是单独使用React而不去使用JSX会让应用在构建时变得特别方便。

每个JSX元素只是调用React.createElement(component，props，... children)的语法糖。 所以，你用JSX做的任何事也可以使用纯Javascript来完成。

例如，使用JSX编写一个组件：

class Hello extends React.Component {
    render() {
        return <h1>hello zhangyatao</h1>;
    }
}
ReactDOM.render(<Hello />, document.getElementById('root'));

上面这段代码会被编译为下面这样：

class Hello extends React.Component {
    render() {
        return React.createElement('h1', null, 'hello zhangyatao');
    }
}
ReactDOM.render(<Hello />, document.getElementById('root'));

如果你很想看到更多的JSX如何转换成JavaScript的例子，你可以试试在线Babel编译器。

组件可以是一个字符串，也可以是继承了React.Component的子类，或者是一个没有内部状态的纯函数。

如果您不喜欢一直重复地写React.createElement，可以使用一个变量代替它：

const makeE = React.createElement;

ReactDOM.render(
    makeE('h1', null, 'hello zhangyatao'),
    document.getElementById('root')
)

如果您在使用React.createElement时用了这种方式，那么即便不使用JSX来编写React也是很方便的。

    原文作者：张亚涛
    原文地址: https://segmentfault.com/a/1190000007824857
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞