十八、不使用JSX编写React应用
2017-06-30 15:40
309 查看
十八、不使用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学习(8)—— 高阶应用:不使用ES6、JSX实现React
- 十七、不使用ES6编写React应用
- 编写 "纯HTML" jsp应用--学会使用 JSTL
- 编写" 纯HTML" jsp应用--学会使用 JSTL
- 使用VS2010为Windows7编写一个杀手级WPF应用
- 使用VS2010为Windows“.NET研究”7编写一个杀手级WPF应用
- 使用Google App Engine、Google Closure Library与Clojure编写HTML5应用
- 编写 "纯HTML" jsp应用--学会使用 JSTL
- IOS怎么使用IB编写简单的应用
- Domino允许使用Java编写4种Java应用来访问Domino数据库
- 使用Titanium在Android上编写Javascript应用
- 使用MXML编写纯Flash应用?
- 编写 "纯HTML" jsp应用--学会使用 JSTL
- MOSS 2007 应用随笔(18)-- 使用SPEventHandler事件处理程序(二)编写事件程序
- 使用PB编写不同应用之间的相互通讯
- 在Android 2.3中如何使用native_activity.h编写本地应用
- 编写 "纯HTML" jsp应用--学会使用 JSTL
- 综合应用WPF/WCF/WF/LINQ之二十四:使用UserControl技术编写一个翻页控件
- .NET程序员也用JAVA:使用BlazeDS,SpringFramework,MySql,Flex构建RIA应用 part 2 :Java代码编写.
- 使用python编写您的微博应用