脚本宝典收集整理的这篇文章主要介绍了React从入门到精通系列之(18)不使用JSX编写React应用,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
十八、不使用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也是很方便的。
以上是脚本宝典为你收集整理的React从入门到精通系列之(18)不使用JSX编写React应用全部内容,希望文章能够帮你解决React从入门到精通系列之(18)不使用JSX编写React应用所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。