位置:首页 » 技术 » React-Native入门指南(6)——JSX在React-Native中的应用

React-Native入门指南(6)——JSX在React-Native中的应用

日期:2015-06-01 阅读:1num
Advertisement

React-Native入门指南(六)——JSX在React-Native中的应用

React-Native入门指南

github:https://github.com/vczero/react-native-lession

React-Native:用JavaScript开发你的原生应用,释放Native的UI体验,体验 Hybird开发效率。

React-Native入门指南(6)——JSX在React-Native中的应用

最近一个星期写的文章如下,链接是github page的,其实也可以在系列博客找到相应文章:

还有几篇会时刻更新:

第六篇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:卸载组件
相关文章
  • TornadoWeb 的 Sina App Engine 入门指南

    入门指南 | Getting Started 在本教程中,您将学习如何完成以下操作: 使用 Python 生成 App Engine 应用程序 使用"TornadoWeb"网络应用程序框架 在您的应用程序中使用数据存储区 在您的应用程序中使用模板 将应用程序上传到 App Engine 在本教程结束前,您将实现一个可运行的应用程序 : ---可让用户将消息发布到公共留言板的简单留言簿. https://github.com/ccdjh/SinaAppEnginePython/blob/

  • 为React Native开发写的JS和React入门知识 为React Native开发写的JS和React入门知识

    前言 想来想去,还是需要写一篇文章来介绍下JavaScript和React的基本知识.最初开发ReactNative的时候,完全没接触过React,大学那会简单学了点JS.毕业后一直在某五百强外企上班.做的东西也乱七八糟的,搞过大数据,搞过物联网,不过看我博客的同学应该知道,我对iOS和Android还是比较喜欢的.所以,博客都是写的都是移动端的东西.好像扯的有点多了,本文的目的就是为了那些JS和React小白提供一个快速入门,能够在看React Native语法的时候能够不那么吃力,有过JS经

  • 替React Native开发写的JS和React入门知识 替React Native开发写的JS和React入门知识

    为React Native开发写的JS和React入门知识 来自Leo的原创博客,转载请著名出处 我的stackoverflow 前言 想来想去,还是需要写一篇文章来介绍下JavaScript和React的基本知识.最初开发ReactNative的时候,完全没接触过React,大学那会简单学了点JS.毕业后一直在某五百强外企上班.做的东西也乱七八糟的,搞过大数据,搞过物联网,不过看我博客的同学应该知道,我对iOS和Android还是比较喜欢的.所以,博客都是写的都是移动端的东西.好像扯的有点多了

  • React-Native入门指南(6)——JSX在React-Native中的应用 React-Native入门指南(6)——JSX在React-Native中的应用

    React-Native入门指南(六)--JSX在React-Native中的应用 React-Native入门指南 github:https://github.com/vczero/react-native-lession React-Native:用JavaScript开发你的原生应用,释放Native的UI体验,体验 Hybird开发效率. 最近一个星期写的文章如下,链接是github page的,其实也可以在系列博客找到相应文章: Lession1: Hello React-Native

  • React Router 最新指南与异步加载实践 React Router 最新指南与异步加载实践

    本文从属于笔者的 React入门与最佳实践 系列 Introduction React Router 是基于React的同时支持服务端路由与客户端路由的强大易用的路由框架,可以允许开发者方便地添加新页面到应用中,保证页面内容与页面路由的一致性以及在页面之间进行方便地参数传递.之前React Router作者没有积极地开发与审核Pull Request,结果有个 rrtr 一怒之下要建个独立的分支,不过后来好像又回归到了React Router上. 目前React-Router的官方版本已经达到了

  • react + webpack入门(1)

    react + webpack入门(一) 一.所需文档 1.webpack英文文档首页: https://webpack.github.io/ 2.babel-loader github地址: https://github.com/babel/babel-loader 二.demo开始 1.请检查你的node.js的版本: node -v,如果低于4.0请更新至4.0以上 2.在磁盘上随便创建一个项目:我的是F:\webpack_workspace\test_second, (1)npm ins

  • 面向工资编程:React速度入门。 面向工资编程:React速度入门。

    自从工资长时没升后,小编上了各种招聘app看了各种招聘要求,好吧,小编还是安安定定的呆在这里吧.招聘要求五花八门. 蓝瘦, 香菇. 为了面向工资编程,一起看看怎么入手这么一个react.js吧.纯小白编程入门. -------请关注我:@小萧ovo 一起学习.交流.分享. React 起源于 Facebook 的内部项目,于2013年5月开源.先总结一下: React不是一个完整的MVC框架,最多可以认为是MVC中的V(View),甚至React并不非常认可MVC开发模式: React的服务器端

  • React 测试入门教程 React 测试入门教程

    越来越多的人,使用React开发Web应用.它的测试就成了一个大问题. React的组件结构和JSX语法,不适用传统的测试工具,必须有新的测试方法和工具. 本文总结目前React测试的基本做法和最佳实践,手把手教你如何写React测试. 一.Demo应用 请先安装 Demo . $ git clone https://github.com/ruanyf/react-testing-demo.git $ cd react-testing-demo && npm install $ npm s

  • 超级给力的JavaScript的React框架入门教程

    React 是 Facebook 里一群牛 X 的码农折腾出的牛X的框架. 实现了一个虚拟 DOM,用 DOM 的方式将需要的组件秒加,用不着的秒删.React 扮演着 MVC 结构中 V 的角色, 不过你要是 Flux 搭配使用, 你就有一个很牛X的能让轻松让 M 和 V 同步的框架了,Flux 的事以后再说~ 组件们 在 React 中,你可以创建一个有特殊功能的组件,这在 HTML 元素里你是打着灯笼也找不到的,比如这个教程里的下拉导航.每个组件都有自己的地盘(scope),所以我们定义一

  • React课程系列之In-browser JSX Transform

    React教程系列之In-browser JSX Transform 在浏览器环境下,我们如何使用JSX Transform <script type="text/jsx"> /** @jsx React.DOM */ React.renderComponent(<h1>测试</h1>,document.getElementById('test')); </script> <script src="../build/rea

  • React.js入门学习第一篇 React.js入门学习第一篇

    一.JSX介绍 ①定义 JSX=JavaScript XML,是一种在React组件内部构建标签的类XML语法.React在不使用JSX的情况下一样可以工作,但是使用JSX可以提高组件的可读性,增强JS语义,结构清晰,抽象程度高,代码模块化.因此推荐在React中使用JSX. ②特点 1.元素名首字母大写 2.符合嵌套规则 3.可以写入求值表达式 4.驼峰式命名 5.不能使用javascript原生函数的一些关键词,如for和class.需要替换成htmlFor和className ③使用方法

  • webpack封装调试react并使用babel编译jsx配置方法

    webpack打包调试react并使用babel编译jsx配置方法 安装webpack npm i webpack --save-dev 如果使用 -g参数,可以安装到全局使用,在当前目录安装,可执行文件为 ./node_modules/.bin/webpack 配置webpack.config.js var path = require('path'); module.exports = { entry: path.resolve(__dirname, 'src/index.js'), out

  • React-Native入门指南——第4篇react-native格局实战(二) React-Native入门指南——第4篇react-native格局实战(二)

    React-Native入门指南--第4篇react-native布局实战(二) React-Native入门指南 github:https://github.com/vczero/react-native-lession React-Native:用JavaScript开发你的原生应用,释放Native的UI体验,体验 Hybird开发效率. 最近一个星期写的文章如下,链接是github page的,其实也可以在系列博客找到相应文章: 第1篇hello react-native 第2篇认识代码

  • (二)入门指南——(7)添加jquery代码(Adding our jQuery code) (二)入门指南——(7)添加jquery代码(Adding our jQuery code)

    (2)入门指南--(7)添加jquery代码(Adding our jQuery code) Our custom code will go in the second, currently empty, JavaScript file which we included from the HTML using <script src="01.js"></script>. For this example, we only need three lines of

  • Sencha学习笔记一: Getting Started with Sencha Touch - 官方Sencha Touch入门指南 Sencha学习笔记一: Getting Started with Sencha Touch - 官方Sencha Touch入门指南

    Sencha学习笔记1: Getting Started with Sencha Touch - 官方Sencha Touch入门指南 官方英语原文:http://docs.sencha.com/touch/2.3.1/#!/guide/getting_started What is Sencha Touch? 初识Sencha Touch Sencha Touch is a high-performance HTML5 mobile application framework. You can

  • Cassandra入门指南-装配及配置 Cassandra入门指南-装配及配置

    Cassandra入门指南--安装及配置 今天开始,学习NoSQL数据库之Cassandra,将过程记录下来,也供有兴趣的参考. 简介 Apache Cassandra是一个开源分布式NoSQL数据库系统.最初由Facebook创建,集Google BigTable的数据模型与Amazon Dynamo的完全分布式的架构于一身. 文档: Cassandra的官方文档主要是Wiki:http://wiki.apache.org/cassandra 另外,DataStax公司提供了更为详细的第三方文

  • HTML5 Plus移动App(5+App)开发入门指南 HTML5 Plus移动App(5+App)开发入门指南

    HTML5 Plus移动App,简称5+App,是一种基于HTML.JS.CSS编写的运行于手机端的App,这种App可以通过扩展的JS API任意调用手机的原生能力,实现与原生App同样强大的功能和性能. HTML5 Plus规范 通过HTML5开发移动App时,会发现HTML5很多能力不具备.为弥补HTML5能力的不足,在W3C中国的指导下成立了www.html5plus.org组织,推出HTML5+规范. HTML5+规范是一个开放规范,允许三方浏览器厂商或其他手机runtime制造商实现

  • React 源码剖析系列 - 不可思议的 react diff React 源码剖析系列 - 不可思议的 react diff

    目前,前端领域中 React 势头正盛,使用者众多却少有能够深入剖析内部实现机制和原理.本系列文章希望通过剖析 React 源码,理解其内部的实现原理,知其然更要知其所以然. React diff 作为 Virtual DOM 的加速器,其算法上的改进优化是 React 整个界面渲染的基础,以及性能提高的保障,同时也是 React 源码中最神秘.最不可思议的部分,本文从源码入手,深入剖析 React diff 的不可思议之处. 阅读本文需要对 React 有一定的了解,如果你不知何为 React

  • Mesosphere入门指南--第二部分 Mesosphere入门指南--第二部分

    [编者的话]本文为Mesosphere官方博客中发布的系列文章的第二部分,Mesosphere在本篇系列文章中分享了DC/OS的入门指南,并且做了演示. 在第一部分的指导中,我们已经学习了关于新的开源DC/OS-在Apache Mesos上用最简单的方法去开始部署容器和其他分布系统. 我们来快速回顾一下,DC/OS包含的Apache Mesos和它的所有核心功能,及以下特征: - 一个简单的安装程序:在我们的config.yaml文件中列出你的所有节点的IP和一些配置信息,然后DC/OS将会自动

  • Mesosphere入门指南--第一部分 Mesosphere入门指南--第一部分

    [编者的话]本文为Mesosphere官方博客中发布的系列文章的第一部分,Mesosphere在本篇系列文章中分享了DC/OS的入门指南,并且做了演示. 在Mesosphere,大家都爱用Mesos.显而易见地,这是一个被数以百计的公司成功证明可以运行容器在生产环境中的技术.但是作为我们通常所说的"可扩展"技术,Mesos并不是用于部署的最简单的系统. 假设你想要使用Mesos去用于你的新的微服务架构的宿主系统.在之前老版本的Mesos里,你应该去配置Mesos和Marathon(不简

最新文章
  • 仅仅 iPad Air2 大胜利:需要正确认识 iOS9 “多任务” 的不同功能 仅仅 iPad Air2 大胜利:需要正确认识 iOS9 “多任务” 的不同功能

    iOS9的多任务对于iPad来说有三种功能:Slide Over.Split View.Picture in Picture. 苹果玩文字游戏不是一天两天的了. 给老机型用户泼一盆冷水.直接上图: 按照苹果的解释: Slide Over provides a user-invoked overlay view on the right side of the screen (or on the left side in a right-to-left language version of iO

  • “程序就是算法加数据结构”这句话对于 iOS 开发来说有效吗

    在开发 iOS 程序的过程中你用到了多少数据结构和算法的知识? --cut-- IamI在2014-09-07 17:08:1回答到: 我只被 NSDictionary 坑过无数次-- tonyluj在2014-09-07 17:22:3回答到: 以前写 Android 应用.用 Java 开发网站的时候没感觉 最近在用 C 写个 socks5 代理和 web server + lua 的时候表示非常关键,至关重要,整个程序的灵魂 akfish在2014-09-07 17:40:1回答到: lz

  • 用Linode主机做网站,有没有适应国内用户的第三方加速服务?

    国内访问Linode主机的网站,有没有第三方加速服务? --cut-- TheJuli在2014-01-11 10:15:4回答到: 加速乐什么的? goldof在2014-01-11 10:46:4回答到: 国外服务器的网站不如放在国内快啊

  • SF新版上线,欢迎v2ex的程序员同学前来体验 SF新版上线,欢迎v2ex的程序员同学前来体验

    传送门: http://segmentfault.com/ 新版介绍 http://t.cn/zW1oE5S InfoQ对我们最新的访谈: http://www.infoq.com/cn/news/2012/09/interview-segmentfault-team --cut-- mechille在2012-09-04 14:15:1回答到: 改版后第一时间就看到了,很不错 okidogi在2012-09-04 16:13:0回答到: 你们的自动补全是用什么实现的? okidogi在2012

  • Photoshop给草地人物加上浓厚的阳光色 Photoshop给草地人物加上浓厚的阳光色

    图片主色为草地绿色,调色的时候可以快速把绿色转为暖色,然后把整体调亮,暗部增加蓝色,局部再增加高光即可. 原图 <点小图查看大图> 最终效果 1.打开素材图片,创建色相/饱和度调整图层,分别改吧黄色及绿色颜色,把整体颜色转为黄褐色. <图1> <图2> <图3> 2.创建可选颜色调整图层,对黄.蓝.白.中性.黑进行调整,参数设置如图4 - 8,效果如图9.这一步给图片增加橙红色. <图4> <图5> <图6> <图7

  • 魅族恒大今天发新品 并肩前行基情满满 魅族恒大今天发新品 并肩前行基情满满

    魅族科技(MEIZU)将联手恒大于今天15:00举行魅族813"魅赢够"发布会.今天早上,新浪官方微博@魅族科技晒出一张颇有寓意的海报,并配文称:"魅族结缘恒大,并非一次冲动.回望过去,原来我们一起并肩前行.魅族 & 恒大,今天与你同在.",网友调侃称"好基友,在一起." 魅族今天早上的海报图案元素是魅族第一款智能手机MX和广州恒大淘宝足球俱乐部的队徽,海报上的文字称:"2011年,恒大在中超首冠,魅族MX亮相北京.一次偶然的历

  • 分享天天特价活动攻略 分享天天特价活动攻略

    天天特价是淘宝官方举办的一种高引流平台高人气活动,主要的引流策略就是通过某一款高性价比的产品,以超低价格出售来引流,但是在活动的页面就会搭配各种优惠价格的套餐,起到带动其他产品的销售,从而提高店铺的转化率. 天天特价这种活动虽然引流效果非常不错,但那是相对于会经营的卖家来说,而对于新卖家来说,想要做好天天特价,其实也没有想象中那么容易,做好天天特价需要从多方面来进行考虑. 首先要选好宝贝并且做好备货.因为天天特价的要求不算是很高,一般的卖家都能够达到,但是我们要向做好天天特价活动,还是要把宝贝款

  • 乱斗西游新英雄海若怎么获得 获取方法一览 乱斗西游新英雄海若怎么获得 获取方法一览

    2月9日消息,乱斗西游海若怎么获得?到底都有哪些获得方式呢,不花钱可以获得吗?下面小编给大家介绍一下新英雄海若的免费和付费获取方式. 海若初始是3星,必须要收集90个英魂碎片进行兑换.活动期间,通过灵海诞活动可以获得后羿的海若碎片,初步统计了一下,一共有105个英魂碎片(不用花钱),另外有240个是需要花钱的. 免费获得:合计105个 1.活动期间累计登陆7天,1到6天都是4个,第7天是5个,合计29个 2.进行1次帮战,5个 3.10场排行榜对战,10个 4.抢夺经文10次,5个 5.云游化缘

  • 拯救身材5种吃法

    首先我们要知道,饥饿与食欲完全是两回事,饿是一种生理需要,而食欲却可因为种种外来的刺激而产生,不一定非等到饥饿时才会有胃口.譬如在一个宴会中,明明刚吃饱,可是看到主人送来的美味点心,忍不住就又吃起来.有些人更会在感到压力时不断地吃东西. 错误观点--少吃一顿 正确做法--少食多餐 普通人每天需要2000卡的热量,如果减到1500卡-1600卡热量,身上的赘肉就会减少.也就是说,我们每天可以把1500卡热量吃下去,而不必饿着受罪.再有,进食的时间相隔太长,人体会把热量化成脂肪而贮存起来,因此同样份

  • dw 异常捕获

    dw 错误捕获 dw_1.retrieve(sle_1.text,ls_begin_date,ls_end_date,ls_begin_date1,ls_end_date1) 这个查询 有时各变量会是空值 所以会出错 有什么办法,可以让出现错误时,继续执行,不蹦出那些错误提示. 给点代码最好了 ------解决方案-------------------- 在数据窗口的dberror事件中return 1就可以了

热门推荐
  • 怎么去除剖腹产疤痕 怎么去除剖腹产疤痕 去除剖腹产疤痕的方法1.通过一些除疤痕的药物,例如密丽除疤膏,采用"活血破瘀,软坚消积"的治则,结合现代制药工艺研制成的用于治疗增生性疤痕的外用中药成方制剂.软坚散结,活血消疤.在消除烧伤,烫伤的疤痕外还可以消除剖腹产疤痕.外用,涂敷患处,每日1-2次. 去除剖腹产疤痕的方法2.可以通过食物去除,多吃含有完全蛋白质的食物,因为细胞是由蛋白质组成的,所以加快疤痕的愈合就需要蛋白质的提供生长和连接,这就减少了疤痕,食物如:鱼类,豆浆,鸡蛋等都属于完全蛋白,含有必须氨基酸,因为蛋白质是由氨基
  • 华晨宇《我们都是孤独的》歌词 华晨宇《我们都是孤独的》歌词 本站阅读配图 我们都是孤独的 - 华晨宇 词:代岳东 曲:The Blue Van 制作人:郑楠 他 忘记了 回家的路 街上只剩他 一个人 游荡 他 拥抱过 生命中 相遇后又错失的人 悲伤 雨 在下 在下 一整夜 他 不作声 不作声 他的痛 有谁能懂 他的梦 无人过问 他多么想 多么想 安稳 他 厌倦了 所以活在自己的世界里面 天真 他 明白了 上帝为他关上窗 另开一扇门 在等 雨 在下 在下 一整夜 他 不作声 不作声 他的痛 有谁能懂 他的梦 无人过问 他多么想 多么想 安稳 他多么想 多么
  • 手机电池不耐用?14条小技巧延长电池寿命 手机电池不耐用?14条小技巧延长电池寿命 手机电池不耐用?14条小技巧延长电池寿命 如果用户希望延长电池的有效使用时间,除了充电器的质量要有保证外,正确的充电方法也必不可少,因为质量差的充电器或错误的充电方法都将影响电池的使用时间和循环寿命,下面就是笔者整理出来的有关延长手机充电电池寿命的技巧: 14条小技巧 1.请使用原厂或声誉较好的品牌的充电器,锂电池要用锂电池专用充电器,并遵照指示说明,否则会损坏电池,甚至发生危险. 2.如果新买的手机电池是锂离子,那么前3~5次充电一般称为调整期,应充14小时以上,以保证充分激活锂离子的活性.锂
  • 中赢茂业:受邀参加“互联网+”博览会 中赢茂业:受邀参加“互联网+”博览会 2月12日,"互联网+"博览会于当地金融中心胜利闭幕.自李克强总理提出"互联网+"活动计划,"互联网+"已经成为热门词汇,互联网思维也越来越受到人们的关注,如何把"互联网+"与实践相结合一直以来都是人们热烈讨论的话题. 本次展会由当地对外国际出口贸易委员会主办,旨在推动互联网与产业融合创新发展,实现传统企业与"互联网+"领域的优秀人才.先进技术.雄厚资本的对接,还将鼓励和支持传统产业积极利用互联网技术.平台
  • jQuery 阴影插件代码分享 jQuery 阴影插件代码分享 XP下 FF/遨游3/IE8/IE6(IETester)中的效果 使用方法: 1.先引用jquery,然后引用jquery.textshadow.js(点击下载) 2.给元素加个"text-shadow:x偏移 y偏移 模糊半径 阴影颜色;"的样式(必须,因为插件里面会去找这个样式) 3.给元素应用jquery插件. 4.OK. . 代码如下: <!DOCTYPE HTML> <html lang="zh-CN"> <head>