React Native移动开发实战-1-React Native的JSX解决方案
2017-08-03 20:46
323 查看
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应用中的代码为例:
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之间的树形结构。例如,上述例子中的树形结构是这样的:
和我一起学吧,《React Native移动开发实战》
小知识:语法糖(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移动开发实战》
相关文章推荐
- <React Native移动开发实战>-1-React Native的JSX解决方案
- ASP.NET项目开发实战<<一键创建解决方案>>
- 跨平台移动开发实战(四)------Android开发环境网络连通解决方案
- React Native商城项目实战11 - 个人中心头部内容
- 20170124L07-03-01老男孩linux运维实战培训-生产环境大于254台机器网段划分及路由解决方案案例
- 记录 廖雪峰老师 实战 学习到 Day10的bug 以及解决方案
- log4j不打日志问题之实战解决方案(二)
- 【React Native 实战】旋转图片验证码
- Android实战开发之ViewPager图片回收处理内存溢出完美解决方案(含Fragment)
- React Native 项目实战(一)
- 用JavaScript搭建高性能App - React Native实战教程
- 王家林的81门一站式云计算分布式大数据&移动互联网解决方案课程第14门课程:Android软硬整合设计与框架揭秘: HAL&Framework &Native Service &App&HTML5架构设计与实战开发
- 实战Memcached缓存系统(8)Memcached异步实时读写问题的解决方案SAC
- vue 实战报错解决方案
- 记录 廖雪峰老师 实战 学习到 Day10的bug 以及解决方案
- 爱普生Me1+打印机清零实战手记(打印机的部件到了使用寿命解决方案)
- React Native商城项目实战09 - 个人中心自定义cell
- 【稀饭】react native 实战系列教程之项目介绍
- 【React Native 实战】商品分类
- Storm实战常见问题及解决方案