React在ES6中的用法

阿新 • • 發佈：2019-02-16

寫在前面

不管是多麼不樂意待見這個不速之客，但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);

ON DUPLICATE KEY UPDATE在mysql的INSERT語句中用法

1、如果在INSERT語句後面帶上ON DUPLICATE KEY UPDATE 子句，而要插入的行與表中現有記錄的惟一索引或主鍵中產生重複值，那麼就會發生舊行的更新； 2、如果插入的行資料與現有表中記錄的唯一索引或者主鍵****不重複，則執行新紀錄插入操作。示例： creat

Shell中 ${} 用法和例項

Shell中 ${} 用法和例項檔案路徑(如下): /dir1/dir2/dir3/my.file.txt 1. 截斷功能 ${file#*/}: 拿掉第一條 / 及其左邊的字串：dir1/dir2/dir3/my

shell中${}用法

${}配合#及%使用達到字串中特定位置字元刪除操作假設有一個變數： file=/dir1/dir2/fir3/my.file.txt 1、使用${}刪除特定位置字元後得到不同的值 ${file#*/}:刪掉第一個/及其左邊的字串結果 -- dir1/dir2/d

Mybatis之mapper檔案方法標籤中# $用法的區別

簡單來說 #{} 會在將引數加上引號，例如： SELECT * FROM user WHERE username=#{username} ；帶上引數後的SQL語句即： SELECT * FROM user WHERE username="XuLiTo

通過“-”擷取字串，indexOf和substring的scala中用法

val a = "aa-bc-xx" val i = a.indexOf("-") val x = a.indexOf("-",i) val one = a.substring(0,i) print(one) //aa val two = a.substring(

資料庫索引的作用和優點缺點以及索引的11中用法

為什麼要建立索引呢？這是因為，建立索引可以大大提高系統的效能。第一，通過建立唯一性索引，可以保證資料庫表中每一行資料的唯一性。第二，可以大大加快資料的檢索速度，這也是建立索引的最主要的原因。第三，可以加速表和表之間的連線，特別是在實現資料的參考完整性方面特別有意義。第四，在

堆，堆在C++中用法

Heap 堆有最大堆與最小堆，也有對應的push和pop操作。在最大堆中，最大的元素在堆頂，pop會將最大的元素推出，最小堆則反之。 C++中的用法 C++中的堆，要基於向量使用。操作基於三

python中@用法

@修飾符　　‘@’符號用作函式修飾符是python2.4新增加的功能，修飾符必須出現在函式定義前一行，不允許和函式定義在同一行。也就是說＠A def f(): 是非法的。只可以在模組或類定義層內對

簡述一下二級指標以及指標的引用在結構體中用法

我一下討論的都是在不用return把值進行返回的情況，也就是說用指標的情況。很簡單就是指標和引用，引用在新版本的c裡面也有包含，可以使用。系統xp+ide用的 vc6.0：要把一個值通過呼叫函式改變，可以用指標和引用，這個值可以是int int *,char

shell 中| && || () {} 用法以及shell的邏輯與或非

| 運算子管道符號，是unix一個很強大的功能，符號為一條豎線：”|”。用法： command 1 | command 2 他的功能是把第一個命令command 1執行的結果作為command2的輸入傳給command 2。例如：

define在C語言中用法

原來以為什麼是巨集？無非就是定義一個替換的量，好比#define PI 3.1415926，這樣的功能，再深一點就是寫一個類似函式的定義，好比#define MAX(a,b) ((a) > (b) ? (a) : (b))這樣的功能，再問一下巨集是什麼？無非就是預處理階

timestampdiff在mysql與db2中用法

DB2中使用方式計算兩個時間戳記之間的時差：–秒的小數部分為單位 values timestampdiff(1,char(currenttimestamp-timestamp(’2010-01-01-00.00.00’))); –秒為單位 values timestampdiff(2,char(cur

Java 8中用法優雅的Stream，效能也"優雅"嗎？

開發十年，就只剩下這套架構體系了！ >>>

matlab中size函數用法

matlab 元素 size(A)函數是用來求矩陣的大小的。比如說一個A是一個3×4的二維矩陣：1、size（A） %直接顯示出A大小輸出：ans=3 42、s=size（A）%返回一個行向量s，s的第一個元素是矩陣的行數，第二個元素是矩陣的列數輸出：s=3 43、[r,c]=size（A）%將矩陣A

JavaScript中this的用法

屬於指向 cti 用法 func 生成純粹 ava 構造函數 this的使用環境有以下幾種 1、純粹的函數調用純粹的函數調用屬於函數的最常用的用法，屬於全局性調用。在全局函數中，this等於window。 2、作為對象方法的調用當函數不是全局調用，而是作為某個對象

（轉）關於ES6的模塊功能 Module 中export import的用法和註意之處

關於 tle from tool spa 尋找 import 其它模塊關於ES6的模塊功能 Module 中export import的用法和註意之處 export default 的用法 export default命令用於指定模塊的默認輸出。顯然，一個模塊

Linux中wget用法

wordpress 用戶名 targe 是否之前 get robot c斷點續傳常用語法 Wget簡介：Linux系統中wget是一個下載文件的工具，它用在命令行下。對於Linux用戶是必不可少的工具，我們經常要下載一些軟件或從遠程服務器恢復備份到本地服務器。wget支

JavaScript中return的用法詳解

style 返回 www log tle blog 意思 charset fun 1、定義：return 從字面上的看就是返回，官方定義return語句將終止當前函數並返回當前函數的值，可以看下下面的示例代碼： <!DOCTYPE html><html l

JavaScript中字符串分割函數split用法實例

介紹 left order 正則表達式如果 java today script 設計這篇文章主要介紹了JavaScript中字符串分割函數split用法,實例分析了javascript中split函數操作字符串的技巧,非常具有實用價值,需要的朋友可以參考下本文實例講

odoo系統中name_search和name_get用法

打印 per sequence not 添加 product xpath ret 領料單自動帶出工序和工序序號,兩個條件都能搜索,並且兩個都帶出來顯示在前端: # 輸入工序序號會自動帶出工序名// def name_search(self, cr,user,name=

React在ES6中的用法

寫在前面

入門級Demos

“Hello,XXX”輸出

陣列遍歷顯示

ol與li的實現

Click事件

State的用法，以toggel顯示文字為例

onChange事件，以及變數值的同步

定時任務事件的嵌入

從服務端獲取資料

React Native實戰

相關推薦