一:模块导入导出
//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)。
四:解构赋值
为数组操作、多值传递提供便利。