React-Native入门指南(六)——JSX在React-Native中的应用
2015-06-29 13:10
896 查看
React-Native入门指南
github:https://github.com/vczero/react-native-lession
React-Native:用JavaScript开发你的原生应用,释放Native的UI体验,体验 Hybird开发效率。最近一个星期写的文章如下,链接是github page的,其实也可以在系列博客找到相应文章:
Lession1: Hello React-Native
Lession2: 认识代码结构
Lession3: css和布局
Lession4: 学会React-Native布局(一)
Lession5: 学会React-Native布局(二)
Lession6: UI组件
Lession7: JSX在React-Native中的应用
还有几篇会时刻更新:
Lession8: 自己动手写组件
Lession9: 模块化开发
Lession10: 搭建项目架构
Lession11: 源码分析
第六篇JSX在React-Native中的应用
一、JSX概述
你一定疑问为什么要用JSX?其实这不是必需,而是建议。只是因为React是作为MVC中的V,是为UI而生,所以,React-Native使用JSX更能像HTML样表达树形结构,其实HTML的超类就是XML,React-Native将这个带到了解放前,不可否认的是JSX相比节省了很多的代码。JSX不是什么新奇的东西,JSX只是对JavaScript进行了拓展,仅此而已。
二、语法介绍
1、类XML UI组件表达,在React-Native中表现为:
render: function() { return ( <View style={styles.container}> <Text style={styles.welcome}> Welcome to React Native! </Text> </View> ); }
2、js表达式 在JSX中,表达式需要{}包裹,例如:
render: function() { return ( <View style={styles.container}> <Text style={styles.welcome}> {0? '第一段': '第二段'} </Text> </View> ); }
上面的代码我们可以看出,style={}是一个表达式;{0? '第一段': '第二段'}是表达式,最后显示的应该是“第二段”。 3、属性
在HTML中,属性可以是任何值,例如:<div tagid="00_1"></div>,tagid就是属性;同样,在组件上可以使用属性。 建议使用以下方式: var props = { tagid: 'GGFSJGFFATQ', poiname: '东方明珠' }; return (<View {...props}></View>);
4、如果需要在调用组件的时候动态增加或者覆盖属性,又该如何呢? 很简单:<View {...props} poiname={'虹桥机场'}></View> 5、关于样式
(1)普通内联样式:{{}},第一层{}是表达式,第二层{}是js对象; <View style={{fontSize:40, width:80,}}> </View> (2)调用样式表:{样式类.属性} <View style={styles.container}></View> (3)样式表和内联样式共存:{[]} <View style={[styles.container, {fontSize:40, width:80}]}> (4)多个样式表:{[样式类1, 样式类2]} <View style={[styles.container, styles.color]}>
6、属性校验 为了实现强类型语言的效果,我们可以使用propTypes来声明数据属性的合法性校验。例如:
React.createClass({ porpTypes:{ username: React.PropTypes.string, age: React.propTypes.number, } });
7、设定默认属性
React.createClass({ getDefaultProps: function(){ return { sign: '这个家伙很懒,什么都没留下' }; } });
8、组件的生命周期 componentWillMount:组件创建之前 getInitialState:初始化状态 render:渲染视图 componentDidMount:渲染视图完成后 componentWillUnmount:组件被卸载之前
三、了解虚拟DOM
React进行了虚拟DOM的封装,所有的视图的更新都是虚拟DOM做了一个校验(diff)后最小更新。为什么这么做,因为现在机器的内存已经足以支撑这样视图UI的diff计算,用内存计算换取UI渲染效率。 1、我们需要获取组件中真实的dom React.findDOMNode(component) 2、第二节已经简单说了组件的生命周期(will, did) 组件的生命周期分为3个部分: Mounting:正在装载组件; Updating:重新计算渲染组件; Unmounting:卸载组件
相关文章推荐
- React-Native入门指南——第4篇react-native布局实战(二)
- React-Native入门指南(一)——环境配置 & Hello World
- React使用jquery方式动态获取数据
- ReactiveCocoa学习
- 《React:引领未来的用户界面开发框架》简读
- ReactiveCocoa源码解析
- ReactJS学习笔记六:感想 - 为什么说Virtual DOM 是React的精髓所在
- ReactJS读书笔记五:DOM操作
- ReactiveCocoa入门教程——第二部分
- ReactiveCocoa入门教程:第一部分
- 201506251428_《react native——安装、》
- ReactiveCocoa入门(一)
- 201506251117_《react——所需知识、主要技术》
- reactor官方文档译文(1)Reactor简介
- ReactJS 傻瓜教程
- react设置innerHTML
- 【Facebook的UI开发框架React入门之八】Image的使用简介(iOS平台)-goodmao
- Reactor模式,或者叫反应器模式
- React实践
- React实践(一)