React Native中常用ES6语法
一:模块导入导出
//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语法的更多相关文章
- 【转】React Native中ES5 ES6写法对照
		
很多React Native的初学者都被ES6的问题迷惑:各路大神都建议我们直接学习ES6的语法(class Foo extends React.Component),然而网上搜到的很多教程和例子都是 ...
 - React Native之ES5/ES6语法差异对照表
		
很多React/React Native的初学者都被ES6的问题迷惑:各路大神都建议我们直接学习ES6的语法(class Foo extends React.Component),然而网上搜到的很多教 ...
 - react native 中的redux  理解
		
redux 中主要分为三大块,分别是Action Reducer 与Store. 1.Action是js的一个普通对象,是store数据的唯一来源.通过store.dispath()讲action传到 ...
 - React/React Native 的ES5 ES6写法对照表-b
		
很多React/React Native的初学者都被ES6的问题迷惑:各路大神都建议我们直接学习ES6的语法(class Foo extends React.Component),然而网上搜到的很多教 ...
 - React Native 的ES5 ES6写法对照表
		
模块 引用 在ES5里,如果使用CommonJS标准,引入React包基本通过require进行,代码类似这样: //ES5 var React = require("react" ...
 - [转] 在React Native中使用ART
		
http://bbs.reactnative.cn/topic/306/%E5%9C%A8react-native%E4%B8%AD%E4%BD%BF%E7%94%A8art 前半个月捣腾了一下Rea ...
 - 在 React Native 中使用 Redux 架构
		
前言 Redux 架构是 Flux 架构的一个变形,相对于 Flux,Redux 的复杂性相对较低,而且最为巧妙的是 React 应用可以看成由一个根组件连接着许多大大小小的组件的应用,Redux 也 ...
 - [转] 「指尖上的魔法」 - 谈谈 React Native 中的手势
		
http://gold.xitu.io/entry/55fa202960b28497519db23f React-Native是一款由Facebook开发并开源的框架,主要卖点是使用JavaScrip ...
 - 在React Native中,使用fetch网络请求 实现get 和 post
		
//在React Native中,使用fetch实现网络请求 /* fetch 是一个封装程度更高的网络API, 使用了Promise * Promise 是异步编程的一种解决方案 * Promise ...
 
随机推荐
- SharePoint Online 切换经典视图
			
SharePoint online 默认是现代视图,我们可以通过Powershell命令切换默认视图. 以下,是完成的Powershell命令: # This file uses CSOM. Repl ...
 - 无耻之徒(美版)第七季/全集Shameless US迅雷下载
			
英文全名Shameless (US),第7季(2016).本季看点:<无耻之徒>(Shameless)第七季.本季故事起始于「一个月之后」,Frank从昏迷中醒来后得知亲人背叛了他,于是向 ...
 - 用开源项目circular progress button实现有进度条的Button
			
circular progress button可以让button实现进度条,效果和动画都做的很赞,只是有点小bug.需要注意的是按钮上的文字不能太大,否则会出现错位. 项目的地址:https://g ...
 - 一步一步做出属于自己的Eclipse
			
本文将教大家一步一步打造属于自己的eclipse,涉及到地方,不完全之处请谅解. 一.下载 进入eclipse网站:http://www.eclipse.org/downloads/ 下载:Eclip ...
 - 在EditText中限制输入,自定义样式,监听输入的字符,自动换行
			
自动获取焦点 <!-- 添加:<requestFocus /> 会自动获取焦点 --> <EditText android:layout_width="matc ...
 - 记一个js中的map数据结构
			
<html><body> <script type="text/javascript">let arr =[{demo1:123,demo2:& ...
 - 微信二维码扫描无法下载APK文件的解决办法
 - 利用ASP.NET运行数据库的安装脚本
			
在启明星的演示站点里,经常有用户修改演示密码,导致别的用户无法访问. 为此,在登陆页面,增加了一个“初始化数据库”功能,这样,即使用户修改了密码,别的访问者,只要重置数据库,就可以很容易再次进入. 首 ...
 - B. Random Teams(Codeforces Round 273)
			
B. Random Teams time limit per test 1 second memory limit per test 256 megabytes input standard inpu ...
 - Arcgis  ArcMap 10 如何生成msd地图文档定义【 arcgis mxd怎么转换成msd】
			
.mxd是arcgis 的地图文档后缀名. .msd是arcgis 的地图服务定义文件,是 map service definition 的缩写. 基于 MSD 的服务支持 Maplex.制图表达和新 ...