<React Native移动开发实战>-1-React Native的JSX解决方案
2024-10-21 13:07:58
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之间的树形结构。例如,上述例子中的树形结构是这样的:
Root View (style container) ---- Sub Text 1 (style welcome) ---- Sub Text 2 (style instructions) ---- Sub Text 3 (style instructions)
和我一起学吧,《React Native移动开发实战》
最新文章
- z-index 可以使用负值,CSS相对定位、绝对定位利器
- [Note] changing building platform from vs 2013 to vs community 2015
- [No000049]狗日的中年——姜文
- 【译】为什么这样宏定义#define INT_MIN (-2147483647 - 1)?
- Android图像格式类及图像转换方法
- mybatis(一)安装
- Oracle 中 根据值 查询 所在 表和字段
- js 如何将无限级分类展示出来
- C功底挑战Java菜鸟入门概念干货(二)
- ++i,i++和i += 1的区别
- Solr 17 - Solr的时间为什么比本地少8小时 (附修改方法)
- mongodb导出数据到csv
- nginx gzip配置
- JAVA BufferedReader 类从标准输入读取数据
- android monitor 汉化 ddms
- (转)Xen Server删除Local Storage
- 菜鸟调错(四)——Spring与DWR集成,配置文件报错
- 使用Photoshop实现雪花飘落的效果
- 使用pycharm,追求最优的代码。
- Kotlin 资料
热门文章
- ZooKeeper学习之路 (十)Hadoop的HA集群的机架感知
- JFinal 部署在 Tomcat 下推荐方法(转载)
- 基于Verilog的偶数、奇数、半整数分频以及任意分频器设计
- Oracle(二)SELECT语句执行顺序
- 404 Note Found队 福大助手项目测评
- 【gulp】Gulp的安装和配置 及 系列插件
- dpkg安装失败解决过程
- Linux下onvi支持h265环境的的搭建:gsoap的安装及生产.c .h文件
- 从0开始学golang--2.2--如何去爬园子的数据&#128073;进阶篇,面向对象的单任务版
- 转载: 国内的go get无法连接问题的解决