一:模块导入导出

//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. Xcode修改项目的Build Location

    Xcode默认project通过build输出的目录,存放于目录 /Users/用户名/Library/Developer/Xcode/DerivedData/产品名称-hjwqiconnjhpjle ...

  2. 数据更新后让ListView自动滚动到底部

    在做聊天界面的时候想要发送新的数据后,listview自动滚动到底部,显示出最新的数据.网上找了两个方法,觉得不错,记录一下. 方法一: 给listview添加下面两个属性 android:stack ...

  3. Kubernetes基础:Pod的详细介绍

    本文的演练环境为基于Virtualbox搭建的Kubernetes集群,具体搭建步骤可以参考kubeadm安装kubernetes V1.11.1 集群 1. 基本概念 1.1 Pod是什么 Pod是 ...

  4. Java多线程知识-Callable和Future

    Callable和Future出现的原因 创建线程的2种方式,一种是直接继承Thread,另外一种就是实现Runnable接口. 这2种方式都有一个缺陷就是:在执行完任务之后无法获取执行结果. 如果需 ...

  5. Deformable Convolutional Networks-v1-v2(可变形卷积网络)

    如何评价 MSRA 视觉组最新提出的 Deformable ConvNets V2? <Deformable Convolutional Networks>是一篇2017年Microsof ...

  6. LeetCode 754. Reach a Number到达终点数字

    题目 在一根无限长的数轴上,你站在0的位置.终点在target的位置. 每次你可以选择向左或向右移动.第 n 次移动(从 1 开始),可以走 n 步. 返回到达终点需要的最小移动次数. 示例 1: 输 ...

  7. 如何让Domain里的其他系统通过DC来进行外网的DNS解析

    搭建一个测试环境, 一般会建立一个DC, 然后再建立许多虚机加入到这个新DC的domain. 我们有个DNS服务器的地址, 哪台虚机要上外网, 就把这个DNS地址填到这台虚机的DNS server a ...

  8. Angular CLI 使用教程指南参考

    Angular CLI 使用教程指南参考 Angular CLI 现在虽然可以正常使用但仍然处于测试阶段. Angular CLI 依赖 Node 4 和 NPM 3 或更高版本. 安装 要安装Ang ...

  9. linux命令学习——tar

    tar命令用来处理压缩,压缩和解压.在linux上经常遇到tar命令,总结如下: tar-c: 建立压缩档案-x:解压-t:查看内容-r:向压缩归档文件末尾追加文件-u:更新原压缩包中的文件这五个是独 ...

  10. AOP中Advice执行两遍的原因

    在我的spring项目中,Aop的Advice执行了两边,就好像拦截了两遍一样. 原因是:切面应该切到接口的实现类上,而不是接口上