当前位置:网站首页 > React Native移动开发 > 正文

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移动开发实战》一一1.6 小 结2024-10-30 23:33:06
  • 跨平台移动应用开发:React Native vs. Flutter2024-10-30 23:33:06
  • vscode 前端最佳插件配置_vscode前端插件推荐2024-10-30 23:33:06
  • React Native开发环境搭建,VS Code运行项目步骤详解2024-10-30 23:33:06
  • React Native移动开发实战-2-如何调试React Native项目2024-10-30 23:33:06
  • 号外,号外,《React Native移动开发实战》出版啦_基于react native开发的app2024-10-30 23:33:06
  • react native app案例_react native教程2024-10-30 23:33:06
  • React Native移动开发实战-5-Android平台的调试技巧2024-10-30 23:33:06
  • 深度分析:React Native、Flutter、UniApp、Taro、Vue的差异_reactnative和uniapp2024-10-30 23:33:06
  • 绘制一个可以移动的矩形,当矩形碰到屏幕边界时,矩形都将会改变颜色2024-10-30 23:33:06
  • 全屏图片