一:模块导入导出

//ES6
import React, {
Component,
PropTypes,
} from 'react';
import {
Image,
Text
} from 'react-native'

导出单个类:

//ES6
export default class MyComponent extends Component{
...
}

二:定义组件:继承React.Component

//ES6
class Photo extends React.Component {
render() {
return (
<Image source={this.props.source} />
);
}
}

组件内的方法定义:给组件定义方法不再用 名字: function()的写法,而是直接用  名字(),在方法的最后也不用再写逗号。

组件内属性类型与默认属性值定义:使用static成员来实现:

class Video extends React.Component {
static propTypes = {//属性声明
autoPlay: React.PropTypes.bool.isRequired,
maxLoops: React.PropTypes.number.isRequired,
posterFrameSrc: React.PropTypes.string.isRequired,
videoSrc: React.PropTypes.string.isRequired,
}; // 注意这里有分号
static defaultProps = {//设置属性默认值
autoPlay: false,
maxLoops: 10,
}; // 注意这里有分号
//方法定义
render() {
return (
<View />
);
} // 注意这里既没有分号也没有逗号
}

三:箭头函数

箭头函数实际上是在这里定义了一个临时的函数,箭头函数的箭头=>之前是一个空括号、单个的参数名、或用括号括起的多个参数名,而箭头之后可以是一个表达式(作为函数的返回值),或者是用花括号括起的函数体(需要自行通过return来返回值,否则返回的是undefined)。

四:解构赋值

为数组操作、多值传递提供便利。

React Native中常用ES6语法的更多相关文章

  1. 【转】React Native中ES5 ES6写法对照

    很多React Native的初学者都被ES6的问题迷惑:各路大神都建议我们直接学习ES6的语法(class Foo extends React.Component),然而网上搜到的很多教程和例子都是 ...

  2. React Native之ES5/ES6语法差异对照表

    很多React/React Native的初学者都被ES6的问题迷惑:各路大神都建议我们直接学习ES6的语法(class Foo extends React.Component),然而网上搜到的很多教 ...

  3. react native 中的redux 理解

    redux 中主要分为三大块,分别是Action Reducer 与Store. 1.Action是js的一个普通对象,是store数据的唯一来源.通过store.dispath()讲action传到 ...

  4. React/React Native 的ES5 ES6写法对照表-b

    很多React/React Native的初学者都被ES6的问题迷惑:各路大神都建议我们直接学习ES6的语法(class Foo extends React.Component),然而网上搜到的很多教 ...

  5. React Native 的ES5 ES6写法对照表

    模块 引用 在ES5里,如果使用CommonJS标准,引入React包基本通过require进行,代码类似这样: //ES5 var React = require("react" ...

  6. [转] 在React Native中使用ART

    http://bbs.reactnative.cn/topic/306/%E5%9C%A8react-native%E4%B8%AD%E4%BD%BF%E7%94%A8art 前半个月捣腾了一下Rea ...

  7. 在 React Native 中使用 Redux 架构

    前言 Redux 架构是 Flux 架构的一个变形,相对于 Flux,Redux 的复杂性相对较低,而且最为巧妙的是 React 应用可以看成由一个根组件连接着许多大大小小的组件的应用,Redux 也 ...

  8. [转] 「指尖上的魔法」 - 谈谈 React Native 中的手势

    http://gold.xitu.io/entry/55fa202960b28497519db23f React-Native是一款由Facebook开发并开源的框架,主要卖点是使用JavaScrip ...

  9. 在React Native中,使用fetch网络请求 实现get 和 post

    //在React Native中,使用fetch实现网络请求 /* fetch 是一个封装程度更高的网络API, 使用了Promise * Promise 是异步编程的一种解决方案 * Promise ...

随机推荐

  1. 对于多个button要在同一个监听器中实现自己的单击事件的方法小诀窍。

    在网上的一些教程中往往是把一个button加入多个监听器,却非常少有人会把多个button在同一个监听器中去实现他们的单击事件,并且这杨的事实上是非常有用的,比方说在制作一个简单的计算器是就须要0-9 ...

  2. <A>标签锚标记

    链接到本页面 – 锚记标签用于使用户“跳”到文档的某个部分 – HTML 的NAME 属性用于创建锚标记 <A NAME = “marker”>主题名称</A> – 为达到这种 ...

  3. 将java中数组转换为ArrayList的方法实例(包括ArrayList转数组)

    方法一:使用Arrays.asList()方法   1 2 String[] asset = {"equity", "stocks", "gold&q ...

  4. spring mvc 返回乱码SpringMVC使用@ResponseBody注解返回中文字符串乱码的问题

    原文地址:https://www.cnblogs.com/fzj16888/p/5923232.html 先说一下我的经历,以及解决问题的而过程. 在使用SpringMVC的时候,最开始的时候在配置文 ...

  5. go语言之进阶篇网络编程

    一.网络编程 1.网络分层架构 2.每层协议的功能 3.网络通信条件 网卡,mac地址(不需要用户处理)  arp --->通过IP找mac 逻辑地址,ip地址(需要用户指定)  ---> ...

  6. 在Asp.Net中使用jQueryEasyUI(转)

    最近做一个小工具,列表显示页面准备使用jQuery的UI框架,因为之前知道有jQWidgets这个框架,所以直接就下载下来使用了,jQWidgets的功能很强大,Demo和文档也非常详细,但使用后发现 ...

  7. iOS开发-Launch Image和Launch Screen

    Launch Image是App的启动图片,LaunchScreen是iOS8之后的功能,两者都可以设置app的启动图片.iOS8之后官方的推荐了使用Launch screen.xib,在xib的中通 ...

  8. iOS开发-16进制颜色转换

    项目中经常会用到颜色转换,有的是通过十六进制转成数字转颜色,想简单的点直接通过字符串转一下,简单扩展了一下分类UIColor,代码如下: +(UIColor *)colorWithHex:(NSStr ...

  9. TNTSearch 轻量级全文索引 + 中文分词

    TNTSearch 轻量级全文索引+中文分词 选用 TNTSearch 的原因:轻,方便移植,不需要额外安装服务,能减少后期维护的工作量.搜索的效果也还不错,可以满足大多数项目场景,如果对性能和精准度 ...

  10. 【Spark】SparkStreaming-foreachrdd foreachpartition

    SparkStreaming-foreachrdd foreachpartition foreachrdd foreachpartition_百度搜索 SparkStreaming之foreachRD ...