React在ES6中的用法

写在前面

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

入门级Demos

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

“Hello,XXX”输出

ES5写法：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

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写法：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23

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写法：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

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写法：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

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写法:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26

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写法：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30

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写法：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24

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写法：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27

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写法：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23

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写法：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35

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写法：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23

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写法：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35

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写法：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33

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写法：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41

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写法：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35

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写法：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42

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写法：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136

'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写法：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136

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