<React Native移动开发实战>-1-React Native的JSX解决方案
2017-08-02 21:19
239 查看
JSX并不是一门新的开发语言,而是Facebook提出的语法方案:一种可以在JavaScript代码中直接书写HTML标签的语法糖,所以,JSX本质上还是JavaScript语言。
小知识:语法糖(Syntactic sugar)是由英国计算科学家彼得·兰丁(https://zh.wikipedia.org/ wiki/%E5%BD%BC%E5%BE%97%C2%B7%E5%85%B0%E4%B8%81)发明的一个术语,指计算机语言中添加的某种语法,这种语法对语言的功能并没有影响,但是更方便程序员使用。语法糖让程序更加简洁,有更高的可读性。
在React和React Native开发中,不一定非要使用JSX,也可以直接使用JavaScript进行开发。但是,强烈建议读者使用JSX!因为JSX在定义类似HTML这种树形结构时,简单明了,极大地提高了开发和维护的效率。
下面以1.4节第一个React Native应用中的代码为例:
在上述代码中,组件的render()方法函数是用于渲染页面的,它的返回值是一个View的对象,但是为什么没有发现创建对象和设置属性的代码呢?原来,JSXTransformer帮我们把代码中XML-Like语法编译转换成真实可用的JavaScript代码,它不仅仅创建View对象、设置View样式和布局,同时更加贴心的是,还构建了View之间的树形结构。例如,上述例子中的树形结构是这样的:
和我一起学吧,《React Native移动开发实战》
![](https://oscdn.geek-share.com/Uploads/Images/Content/201708/17644894391d293fb990c332b4b95da0.png)
小知识:语法糖(Syntactic sugar)是由英国计算科学家彼得·兰丁(https://zh.wikipedia.org/ wiki/%E5%BD%BC%E5%BE%97%C2%B7%E5%85%B0%E4%B8%81)发明的一个术语,指计算机语言中添加的某种语法,这种语法对语言的功能并没有影响,但是更方便程序员使用。语法糖让程序更加简洁,有更高的可读性。
在React和React Native开发中,不一定非要使用JSX,也可以直接使用JavaScript进行开发。但是,强烈建议读者使用JSX!因为JSX在定义类似HTML这种树形结构时,简单明了,极大地提高了开发和维护的效率。
下面以1.4节第一个React Native应用中的代码为例:
01 export default class ch02 extends Component { // 每个页面可以理解成一个组件 02 render() { // 渲染页面的函数 03 return ( 04 <View style={styles.container}> // 页面根View 05 <Text style={styles.welcome}> 06 Welcome to React Native! 07 </Text> 08 <Text style={styles.instructions}> 09 To get started, edit index.ios.js 10 </Text> 11 <Text style={styles.instructions}> 12 Press Cmd+R to reload,{'\n'} 13 Cmd+D or shake for dev menu 14 </Text> 15 </View> 16 ); 17 } 16 }
在上述代码中,组件的render()方法函数是用于渲染页面的,它的返回值是一个View的对象,但是为什么没有发现创建对象和设置属性的代码呢?原来,JSXTransformer帮我们把代码中XML-Like语法编译转换成真实可用的JavaScript代码,它不仅仅创建View对象、设置View样式和布局,同时更加贴心的是,还构建了View之间的树形结构。例如,上述例子中的树形结构是这样的:
Root View (style container) ---- Sub Text 1 (style welcome) ---- Sub Text 2 (style instructions) ---- Sub Text 3 (style instructions)
和我一起学吧,《React Native移动开发实战》
![](https://oscdn.geek-share.com/Uploads/Images/Content/201708/17644894391d293fb990c332b4b95da0.png)
![](https://oscdn.geek-share.com/Uploads/Images/Content/201708/b17888ff5d3f7bba898c214bc4a4753a.jpg)
相关文章推荐
- React Native移动开发实战-1-React Native的JSX解决方案
- 使用ionic框架的<ion-scroll>进行水平滚动时,导致页面难以上下滑动的解决方案
- <item> tag requires a 'drawable' attribute"-selector设置颜色报错-原因及解决方案
- XML中如果有特殊字符,比如> < 解决方案
- <welcome-file>index.action</welcome-file>直接设置action,404和struts2中的解决方案
- Kylin 环境 搭建 报错 <----寻求解决方案
- React Native入门:关于JSX语法
- three20 报出 <Three20/Three20.h> 文件 no such file or directory的原因以及解决方案
- React Native 工程初始化过慢解决办法+运行时产生的问题解决方案
- <常见错误>"Delegate already added to touch dispatcher."的解决方案
- struts2的<s:a href=""></a>超链接里面加EL表达式不能用的解决方案
- React Native 添加启动屏教程,React Native启动白屏解决方案
- <welcome-file>index.action</welcome-file>直接设置action,404和struts2中的解决方案
- <welcome-file>index.action</welcome-file>直接设置action,404和struts2中的解决方案
- <ubuntu ping响应慢 延迟严重解决方案>
- <转载>android 编译慢解决方案 (插件介绍 JRebel for Android)
- <a>标签中的onclick调用js方法传递多个参数的解决方案
- React Native遇到的一些报错信息及解决方案
- React Native和原生iOS Objective-C的交互解决方案
- react ,jsx ,react native 一些相关的学习网站材料