React在ES6中的用法

写在前面

不管是多么不乐意待见这个不速之客，但ES6已经一点点渗透进了我的生活里，就连我最爱的React到React Native，默认都把ES6做为首选标准。这是FaceBook有计划、有声势地要把ES6推起来，请问还有谁有狗胆站住来堵着路不走。所以我毅然捧着阮一峰老师的《ES6标准入门》在一旁看了起来……那好，今天就谈谈如何把React用ES6愉快地跑起来。

入门级Demos

先来几个简单的demo体验一把。注意，例子里ES5的require请通过browserfiy或webpack来实现，如果你还不会用这两样东西，请出门后往前看。

“Hello,XXX”输出

ES5写法：

var React = require('react');

var HelloMessage = React.createClass({
render: function() {
return (<h1>Hello,{this.props.name}!</h1>);
}
});

module.exports = React.createClass({
render: function() {
return (
<div>
<HelloMessage name = "John" />
</div>
);
}
});

ES6写法：

import React,{Component} from 'react';
class HelloMessage extends Component{
constructor() {
super();
}
render(){
return <h1>Hello {this.props.name}</h1>;
}
}
class Output extends Component{
constructor() {
super();
}
render(){

return (
<div>
<HelloMessage name="John" />
</div>
);
}
}
export default Output;

数组遍历显示

ES5写法：

var React = require('react');
var RepeatArray = React.createClass({
render: function() {
var names = ['Alice', 'Emily', 'Kate'];
var arrs = [
<h1>Hello World</h1>,
<h2>React is awesome</h2>
];
return (
<div>
{arr}
{
names.map(function (name) {return <div>Hello, {name}!</div>;});
}
</div>
);
}
});

module.exports = RepeatArray;

ES6写法：

import React,{Component} from 'react';
class RepeatArray extends Component{
constructor() {
super();
}
render(){
var arr = [
<h1>Hello world!</h1>,
<h2>React is awesome</h2>,
];
var names = ['Alice', 'Emily', 'Kate'];
return (
<div>
{arr}
{
names.map((name) =>{return <div>Hello, {name}!</div>;} )
}
</div>
);
}
}
export default RepeatArray;

ol与li的实现

ES5写法:

var React = require('react');
var RepeatLi = React.createClass({
render: function() {
return(
<ol>
{
this.props.children.map(function(child) {
return <li>{child}</li>;
});
}
</ol>
);
}
});
module.exports = React.createClass({
render: function() {
return (
<div>
<RepeatLi>
<span>hello</span>
<span>world</span>
</RepeatLi>
</div>
);
}
});

ES6写法：

import React,{Component} from 'react';
class RepeatLi extends Component{
render(){
return (
<ol>
{
this.props.children.map((child)=>{return <li>{child}</li>})
}
</ol>
);
}
}
class RepeatArray extends Component{
constructor() {
super();
}
render(){
return (
<div>

<RepeatLi>
<span>hello</span>
<span>world</span>
</RepeatLi>

</div>
);
}
}
export default RepeatArray;

Click事件

ES5写法：

var React = require('react');
var MyComponent = React.createClass({
handleClick: function() {
React.findDOMNode(this.refs.myTextInput).focus();
},
render: function() {
return (
<div>
<input type="text" ref="myTextInput" />
<input type="button" value="Focus the text input" onClick= {this.handleClick} />
</div>
);
}
});

module.exports = React.createClass({
render: function() {
return (
<div>
<MyComponent />
</div>
);
}
});

ES6写法：

import React,{Component} from 'react';
class FocusText extends Component{
handleClick(){
React.findDOMNode(this.refs.myText).focus();
}
render(){
return(
<div>
<input type="text" ref="myText" />
<input type="button" value="focus the text input" onClick={this.handleClick.bind(this)} />
</div>
);
}
}
class RepeatArray extends Component{
constructor() {
super();
}
render(){
return (
<div>
<FocusText />
</div>
);
}
}
export default RepeatArray;

State的用法，以toggel显示文字为例

ES5写法：

var React = require('react');
var LikeButton = React.createClass({
getInitialState: function() {
return {liked: false};
},
handleClick: function(e) {
this.setState({liked: !this.state.liked});
},
render: function() {
var text = this.state.liked ? 'like' : 'haven\'t liked';
return (
<p onClick = {this.handleClick}>
You {text} this.Click to toggle.
</p>
);
}
});

module.exports = React.createClass({
render: function() {
return (<div><LikeButton /></div>);
}
});

ES6写法：

import React,{Component} from 'react';
class StateUse extends Component{
constructor(){
super();
this.state={
like:true
}
}
handleClick(){
this.setState({like:!this.state.like});
}
render(){
var text = this.state.like?'Like':"Unlike";
return(
<div>
<p onClick={this.handleClick.bind(this)}>
You {text} this.Click the toggle;
</p>
</div>
);
}
}
class RepeatArray extends Component{
constructor() {
super();
}
render(){
return (
<div>
<StateUse />
</div>
);
}
}
export default RepeatArray;

onChange事件，以及变量值的同步

ES5写法：

var React = require('react');
var InputComponent = React.createClass({
getInitialState: function() {
return {value: 'Hello!'};
},
handleChange: function(e) {
this.setState({value: e.target.value})
},
render: function() {
var value = this.state.value;
return (
<div>
<input type="text" value={value} onChange={this.handleChangle} />
<p>{value}</p>
</div>
);
}
});
module.exports = React.createClass({
render: function() {
return (<div><InputComponent /></div>)
}
});

ES6写法：

import React,{Component} from 'react';
class AsyncText extends Component{
constructor(){
super();
this.state={
value:'Hello!'
}
}
handleChange(e){
this.setState({value:e.target.value});
}
render(){
var value= this.state.value;
return(
<div>
<input type="text" value={value} onChange={this.handleChange.bind(this)} />
<p>
{value}
</p>
</div>
);
}
}
class RepeatArray extends Component{
constructor() {
super();
}
render(){
return (
<AsyncText />
</div>
);
}
}
export default RepeatArray;

定时任务事件的嵌入

ES5写法：

var React = require('react');
var Hello = React.createClass({
getInitState: function() {
return {
opacity: 1.0
};
},
componentDidMount: function() {
this.timer = setInterval (function() {
var opacity = this.state.opacity;
opacity -= .05;
if (opacity < 0.1) {
opacity = 1.0;
}
this.setState({
opacity: opacity
});
}.bind(this), 100);
},
render: function() {
return (
<div style={{opacity: this.state.opacity}}>
Hello {this.props.name}
</div>
);
}
});

module.exports = React.createClass({
render: function() {
return (<div><Hello name="world" /></div>);
}
});

ES6写法：

import React,{Component} from 'react';
class OpacityWord extends Component{
constructor(){
super();
this.state={
opacity:1.0
}
}
componentWillMount(){
let time  =  setInterval(()=>{
let opacity = this.state.opacity;
opacity -= 0.5;
if (opacity<0.1) {
opacity=1.0;
}
this.setState({opacity:opacity});
}.bind(this),100);
}
render(){
return (
<div style={{ opacity:this.state.opacity }}>
Hello, {this.props.name}!
</div>
);
}

}

class RepeatArray extends Component{
constructor() {
super();
}
render(){
return (
<div>
<OpacityWord />
</div>
);
}
}
export default RepeatArray;

从服务端获取数据

ES5写法：

var React = require('react');
var UserGist = React.createClass({
getInitState: function() {
return {
username: '',
lastGistUrl: ''
};
},
componentDidMount: function() {
$.get(this.props.source, function(result) {
var lastGist = result[0];
this.setState({
username: lastGist.owner.login,
lastGistUrl: lastGist.html_url
});
}.bind(this));
},
render: function() {
return (
<div>
{this.state.username}s last gist is <a href={this.state.lastGistUrl}> here </a>.
</div>
);
}
});

module.exports = React.createClass({
render: function() {
return (
<div>
<UserGist source="https://api.github.com/users/octocat/gists" />
</div>
);
}
});

ES6写法：

import React,{Component} from 'react';
class UserGist extends Component{
constructor(){
super();
this.state={
username:'',
lastGistUrl:''
}
}
componentWillMount(){
$.get(this.props.source, function(result) {
var lastGist = result[0];
//if (this.isMounted()) {
this.setState({
username: lastGist.owner.login,
lastGistUrl: lastGist.html_url
});
//}
}.bind(this));
}
render(){
return(
<div>
{this.state.username} ..
<a href={this.state.lastGistUrl} >here</a>
</div>
);
}
}
class RepeatArray extends Component{
constructor() {
super();
}
render(){
return (
<div>
<UserGist source="https://api.github.com/users/octocat/gists" />
</div>
);
}
}
export default RepeatArray;

React Native实战

写一个简单的页面，支持输入关键字然后以列表形式呈现github里搜索出来的结果。效果如下：





ES5写法：

'use strict';
var React = require('react-native');
var {
Image,
ListView,
TextInput,
AppRegistry,
Component,
StyleSheet,
Text,
View,
} = React;

var BASE_URL = "https://api.github.com/search/repositories?q=";

var customView = React.createClass({

getInitialState: function() {
return {
dataSource: new ListView.DataSource({
rowHasChanged: (row1, row2) => row1 !== row2,
}),
};
},

render: function() {
if (this.state.dataSource.getRowCount() === 0) {
console.log('YES');
}
var content = this.state.dataSource.getRowCount() === 0 ?
<Text style={styles.blankText}>
Please enter a search term to see results.
</Text> :
<ListView
ref="listview"
dataSource={this.state.dataSource}
renderRow={this.renderRow}
automaticallyAdjustContentInsets={false}
keyboardDismissMode="onDrag"
keyboardShouldPersistTaps={true}
showsVerticalScrollIndicator={false} />;

return (
<View style={styles.container}>
<TextInput
autoCapitalize="none"
autoCorrect={false}
placeholder="Search for a project..."
style={styles.searchBarInput} onEndEditing={this.onSearchChange}/>
{content}
</View>
);
},

onSearchChange: function(event: Object) {
var searchTerm = event.nativeEvent.text.toLowerCase();
var queryURL = BASE_URL + encodeURIComponent(searchTerm);

fetch(queryURL)
.then((response) => response.json())
.then((responseData) => {
if (responseData.items) {
this.setState({
dataSource: this.state.dataSource.cloneWithRows(responseData.items),
});
}
}).done();
},

renderRow: function(repo: Object) {
return (
<View>
<View style={styles.row}>
<Image source={{uri: repo.owner.avatar_url}}
style={styles.profPic}/>
<View style={styles.textContainer}>
<Text style={styles.title}>
{repo.name}
</Text>
<Text style={styles.subTitle}>
{repo.owner.login}
</Text>
</View>
<View style={styles.cellBorder}></View>
</View>
</View>
);
},
});

var styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#ffffff',
},
searchBarInput: {
marginTop: 30,
padding: 5,
fontSize: 15,
height: 30,
backgroundColor: '#EAEAEA',
},
row: {
alignItems: 'center',
backgroundColor: 'white',
flexDirection: 'row',
padding: 5,
},
cellBorder: {
backgroundColor: 'rgba(0,0,0,0.1)',
height: 1,
marginLeft: 4,
},
profPic: {
width: 50,
height: 50,
},
title: {
fontSize: 20,
marginBottom: 8,
fontWeight: 'bold',
},
subTitle: {
fontSize: 16,
marginBottom: 8,
},
textContainer: {
paddingLeft: 10,
},
blankText: {
padding: 10,
fontSize: 20,
}
});

AppRegistry.registerComponent('customView', () => customView);

ES6写法：

import React, {
Image,
ListView,
TextInput,
AppRegistry,
Component,
StyleSheet,
Text,
View,
}
from 'react-native';
const BASE_URL = "https://api.github.com/search/repositories?q=";

class customView extends Component {

constructor() {
super();
}

state = {
dataSource: new ListView.DataSource({
rowHasChanged: (row1, row2) => row1 !== row2,
}),
}

render() {
if (this.state.dataSource.getRowCount() === 0) {
console.log('YES');
}
var content = this.state.dataSource.getRowCount() === 0 ?
<Text style={styles.blankText}>
Please enter a search term to see results.
</Text> :
<ListView
ref="listview"
dataSource={this.state.dataSource}
renderRow={this.renderRow}
automaticallyAdjustContentInsets={false}
keyboardDismissMode="onDrag"
keyboardShouldPersistTaps={true}
showsVerticalScrollIndicator={false} />;

return (
<View style={styles.container}>
<TextInput
autoCapitalize="none"
autoCorrect={false}
placeholder="Search for a project..."
style={styles.searchBarInput} onEndEditing={this.onSearchChange}/>
{content}
</View>
);
}

onSearchChange(event: Object) {
var searchTerm = event.nativeEvent.text.toLowerCase();
var queryURL = BASE_URL + encodeURIComponent(searchTerm);

fetch(queryURL)
.then((response) => response.json())
.then((responseData) => {
if (responseData.items) {
this.setState({
dataSource: this.state.dataSource.cloneWithRows(responseData.items),
});
}
}).done();
}

renderRow(repo: Object) {
return (
<View>
<View style={styles.row}>
<Image source={{uri: repo.owner.avatar_url}}
style={styles.profPic}/>
<View style={styles.textContainer}>
<Text style={styles.title}>
{repo.name}
</Text>
<Text style={styles.subTitle}>
{repo.owner.login}
</Text>
</View>
<View style={styles.cellBorder}></View>
</View>
</View>
);
}
}

const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#ffffff',
},
searchBarInput: {
marginTop: 30,
padding: 5,
fontSize: 15,
height: 30,
backgroundColor: '#EAEAEA',
},
row: {
alignItems: 'center',
backgroundColor: 'white',
flexDirection: 'row',
padding: 5,
},
cellBorder: {
backgroundColor: 'rgba(0,0,0,0.1)',
height: 1,
marginLeft: 4,
},
profPic: {
width: 50,
height: 50,
},
title: {
fontSize: 20,
marginBottom: 8,
fontWeight: 'bold',
},
subTitle: {
fontSize: 16,
marginBottom: 8,
},
textContainer: {
paddingLeft: 10,
},
blankText: {
padding: 10,
fontSize: 20,
}
});

AppRegistry.registerComponent('customView', () => customView);

参考 ReactJS结合ES6入门Template