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 ...
随机推荐
- 浴血黑帮第一季/全集Peaky Blinders迅雷下载
本季第一季Peaky Blinders Season 1 (2013)看点:<浴血黑帮>Peaky Blinders是从战后伯明翰地区走出的一个传奇黑帮家族,时间要追溯到1919年,家族成 ...
- 发展受阻第一至四季/全集Arrested迅雷下载
发展受阻 第一至四季 Arrested Development 1-4 (2013)本季看点:<发展受阻>讲述了一个很有钱的Bluth家庭的故事,主要聚焦家族里的各种古怪事和相互算计带来的 ...
- ADO与ADO.Net
在介绍ADO.Net之前先让我们回想一下在红皮书中学习的ADO的内容. ADO(ActiveX Data Objects).我们称它为一种用于数据訪问的对象模型,<VB.Net>视频中称它 ...
- Unreal Engine 4 减少编辑器的帧率
默认的,打开UE4的编辑器,显卡会以全速渲染场景,在我的机器上.是120FPS. 整个机器就開始轰鸣了.资源占用太凶了.事实上全然不是必需这样,帧率在60左右就足够了. 那怎么改动呢,试了非常多办法. ...
- linux上安装wps办公软件
在rhel6.3上安装 金山WPS rpm包时,容易出现出现错误wps Requires: libstdc++.so.6(GLIBCXX_3.4.14).即使安装成功,也不能够使用,只是缺少了一个li ...
- Deformable Convolutional Networks-v1-v2(可变形卷积网络)
如何评价 MSRA 视觉组最新提出的 Deformable ConvNets V2? <Deformable Convolutional Networks>是一篇2017年Microsof ...
- Java系列: 如何在Eclipse中安装Memory Analyzer插件
一.找到eclipse的插件安装对话框: help->install new software ->work with 二.输入Memory Analyzer的安装路径 具体可以到http ...
- CSS-设置Footer始终在页面底部
Footer顾名思义页脚,如果内容多的时候在底部时感官很好,但是当内容变少(无法撑开一屏的时候)footer不固定在底部,影响美观,对于已经从事前端工作的工作的来说应该是比价工作中入门级别的问题了,由 ...
- iOS开发-UITextField手机号和邮箱验证
不管是网页是手机,用户注册登录的时候绝大数时候都需要手机号码和邮箱地址,而且有些App会限制只能使用手机号注册,iOS方面邮箱正则比较简单,不过手机号码验证找了一下网上的,发现三大运营商的号码段有所变 ...
- distinct 多列详解
1.distinct单列 select distinct(a) from tableA; 2.distinct多列 select distinct a,b,c from tableA; 注意此时是将a ...