《React Native移动开发实战》一一2.3 React Native的JSX解决方案

简介: 本节书摘来自华章出版社《React Native移动开发实战》一 书中的第2章,第2.3节,作者:袁林 著 ,更多章节内容可以访问云栖社区“华章计算机”公众号查看。

2.3 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
05
06 Welcome to React Native!
07
08
09 To get started, edit index.ios.js
10
11
12 Press Cmd+R to reload,{'n'}
13 Cmd+D or shake for dev menu
14
15
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)

相关文章
|
3天前
|
XML 前端开发 JavaScript
|
2月前
|
前端开发 JavaScript
学习react基础(3)_setState、state、jsx、使用ref的几种形式
本文探讨了React中this.setState和this.state的区别,以及React的核心概念,包括核心库的使用、JSX语法、类与函数组件的区别、事件处理和ref的使用。
65 3
学习react基础(3)_setState、state、jsx、使用ref的几种形式
|
3月前
|
XML JavaScript 前端开发
React Jsx语法入门
【8月更文挑战第13天】React Jsx语法入门
42 4
|
3天前
|
JavaScript 前端开发 容器
React零基础入门02--JSX语法基础
React零基础入门02--JSX语法基础
React零基础入门02--JSX语法基础
|
20天前
|
XML 前端开发 JavaScript
React JSX
React 使用 JSX(一种类似 XML 的 JavaScript 语法扩展)来替代传统 JavaScript 编写 UI。JSX 使代码更简洁、执行更快且类型安全。例如,`<h1>Hello, world!</h1>` 实际上是创建一个 React 元素,通过 `ReactDOM.render()` 渲染到 DOM。注意,JSX 中使用 `className` 替代 HTML 的 `class` 属性。
|
3天前
|
存储 前端开发 JavaScript
react之jsx编译原理
react之jsx编译原理
|
30天前
|
XML 前端开发 JavaScript
React JSX
10月更文挑战第7天
13 2
|
29天前
|
设计模式 缓存 前端开发
React中样式解决方案有哪些?
本文首发于微信公众号“前端徐徐”,探讨了React开发中的样式管理方法,包括内联样式、常规CSS、CSS-Module、CSS-in-JS及使用CSS框架等五种常见方案,分析了各自的优缺点,帮助开发者根据项目需求选择合适的样式解决方案。
28 0
|
3月前
|
前端开发 JavaScript
React Server Component 使用问题之添加jsx的组件化能力,如何操作
React Server Component 使用问题之添加jsx的组件化能力,如何操作
|
3月前
|
前端开发 JavaScript 开发者
React组件与JSX之间的区别是什么
【8月更文挑战第9天】 React组件与JSX之间的区别是什么
61 4