<React Native移动开发实战>-1-React Native的JSX解决方案
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移动开发实战》
<React Native移动开发实战>-1-React Native的JSX解决方案的更多相关文章
- React Native移动开发实战-5-Android平台的调试技巧
Android平台的调试和其他平台的调试也很类似,例如:在Android Studio打开的工程中,打开源码MainActivity.java,然后,将鼠标移至代码编辑区的左侧后,单击鼠标即可添加断点 ...
- React Native移动开发实战-4-Android平台的适配原理
打开Android开发工具Android Studio,选择菜单 Open an existing AndroidStudio project,打开ch04项目的android文件夹,如图5.8所示. ...
- React Native移动开发实战-3-实现页面间的数据传递
React Native使用props来实现页面间数据传递和通信.在React Native中,有两种方式可以存储和传递数据:props(属性)以及state(状态),其中: props通常是在父组件 ...
- React Native移动开发实战-2-如何调试React Native项目
在实际开发中,还有一个影响开发效率的重要因素:调试. 在1.4.3节中已经介绍了Enable Live Debugger的使用.本节来介绍另一个非常重要的调试选项:Debug JSRemotely选项 ...
- 《React+Redux前端开发实战》笔记3:基于Webpack构建的Hello World案例(下)
2.使用React编码 下面正式开始使用React来编写前端代码. (1)npm安装react和react-dom: npm install react react-dom -S (2)用下面代码替换 ...
- React Native入门 开发第一个React Native应用
1. 首先创建一个目录(比如ReactNativeDir),用于存放各个ReactNative工程的代码 2.使用React Native命令工具来创建(初始化)一个ReactNative项目(tes ...
- React前端有钱途吗?《React+Redux前端开发实战》学起来
再不学React就真的跟不上大前端的形式了,目前几乎所有前端的招聘条件都是精通React者优先,看看拉勾网的React薪资,都是15K-20K,这个暑假,必须动起来了. 如果你熟悉JavaScript ...
- 《React+Redux前端开发实战》笔记2:基于Webpack构建的Hello World案例(上)
这次搭建分为两部分:一部分是前期必要配置,一部分是开发React代码. [基于Webpack的React Hello World项目] 1.前期必要配置 (1)首先要确保读者的开发设备上已经安装过No ...
- 《React+Redux前端开发实战》笔记1:不涉及React项目构建的Hello World案例
本小节实现一个不涉及项目构建的Hello World. [React的第一个Hello World网页] 源码地址:https://jsfiddle.net/allan91/2h1sf0ky/8/ & ...
随机推荐
- BZOJ2435:[NOI2011]道路修建 (差分)
Description 在 W 星球上有 n 个国家.为了各自国家的经济发展,他们决定在各个国家 之间建设双向道路使得国家之间连通.但是每个国家的国王都很吝啬,他们只愿 意修建恰好 n – 1条双向道 ...
- 4719: [Noip2016]天天爱跑步
Time Limit: 40 Sec Memory Limit: 512 MB Submit: 1986 Solved: 752 [Submit][Status][Discuss] Descripti ...
- PhotoSwipe-一个好用的图片放大缩小插件
通过GitHub 下载PhotoSwipe https://github.com/dimsemenov/PhotoSwipe 相关的库 <link rel="stylesheet&qu ...
- 多线程之ThreadLocal(转)
相信读者在网上也看了很多关于ThreadLocal的资料,很多博客都这样说:ThreadLocal为解决多线程程序的并发问题提供了一种新的思路:ThreadLocal的目的是为了解决多线程访问资源时的 ...
- ArrayProxy-Emberjs
ember 2.18版本API翻译之Ember.ArrayProxy import ArrayProxy from '@ember/array/proxy'; ArrayProxy(数组代理)包装实现 ...
- 大数据入门:Maven项目的创建及相关配置
目录 Maven项目的创建及相关配置 一.Maven的介绍 1.Maven是什么: 2.Maven作用: 3.Maven项目的目录结构: 4.Maven的三点坐标: 5.maven的pom文件: 6. ...
- 常用模块 - openpyxl模块
一.简介 xlrd/xlwt 主要是针对Office 2003或更早版本的XLS文件格式 缺点:不支持XLSX文件格式 OpenPyXL 能读能写能修改 缺点:不支持XLS Microsoft Exc ...
- 微信小程序<每日查看>开发总结
之前一直在做iOS平台的App和SDK开发,发现微信小程序还蛮有意思的,花了将近几天的时间,从看书学习到萌发想法,最后开发出一款小应用,现在花点时间总结一番!作为自我勉励和后续继续学习动力- 先上效果 ...
- 理解IaaS、PaaS、SaaS 的区别
作者:何足道链接:https://www.zhihu.com/question/21641778/answer/62523535来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明 ...
- WCF知识点记录
1:WCF有两种序列化器,XmlSerializer和DataContractSerializer,XmlSerializer能够直接对数据对象进行序列化输出,而DataContractSeriali ...