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 ...
随机推荐
- jdgui反编译+javac编译=无源文件改动代码
首先我们要知道,打包好的Java程序中都是编译好的字节码文件(*.class).这些class文件会在执行的时候被载入到JVM中. 若想替换掉某一个类,那么仅仅须要将该类的源代码又一次编译然后再替换之 ...
- 深入理解ClassLoader工作机制(jdk1.8)
ClassLoader 顾名思义就是类加载器,ClassLoader 作用: 负责将 Class 加载到 JVM 中 审查每个类由谁加载(父优先的等级加载机制) 将 Class 字节码重新 ...
- Material Designer的低版本兼容实现(一)—— 简介 & 目录
很长一段时间没写东西了,其实是因为最近在研究Material Designer这个东西,熬夜熬的身体也不是很好了.所以就偷懒没写东西,这回开的这个系列文章是讲如何将Material Designer在 ...
- Table中collapseColumns,stretchColumns
collapseColumns 设置需要被隐藏的列序号(序号从0开始) shrinkColumns 设置允许被首夺的列的序号(序号从0开始) stretchColumns 设置允许被拉 ...
- Orchard模块开发全接触7:订单与支付之Event Bus
在这部分,我们要完成的工作有: 1:将购物车内的商品变成真正的订单: 2:理解 父子及一对多关系: 3:写一个针对 Event Bus 的扩展点: 4:实现一个针对该扩展点的模拟的 支付服务: 一:创 ...
- JQuery中的对象和事件
一:JQuery 对象和 Dom 对象 在使用 JQuery 过程中,我们一般(也是绝大多数情况下,除非我们使用了第二个框架)只有两类对象,即:JQuery 对象和 Dom 对象.Dom 对象指的是普 ...
- 如何解决rar文件解压缩失败
附件经常会是一系列的压缩文件,下载是默认文件名是一个随机数字.因而下载完会出现压缩文件解压缩失败解决方法:下载时重命名为带一定顺序的文件名,如文件1,文件2,文件3等 如何解决单个文件解压失败?论坛中 ...
- Android图片载入框架最全解析(一),Glide的基本使用方法
转载请注明出处:http://blog.csdn.net/guolin_blog/article/details/53759439 本文同步发表于我的微信公众号.扫一扫文章底部的二维码或在微信搜索 郭 ...
- Fedora 18/19没有注销
sudo yum install dconf-editor -y 定位到org > gnome > shell 勾选always-show-log-out http://www.ryan ...
- JavaScript学习笔记——错误处理
说明:参见<JavaScript高级程序设计>第14章. 一. 错误分类 1. 语法错误 也称为解析错误,发生在传统编程语言的编译时,在JavaScript中发生在 ...