React.Component的組件里面方法綁定四種方式

react官方推薦使用類似class B extends React.Component這樣的方式來寫組件，相比於React.createClass({})這種方式，React.createClass的this是自動綁定到組件本身，

即var component = React.createClass({});   //{}里面的this指向component本身

而extends React.Component不會這樣，要手動指向組件本身。在es6的react寫法里面有四個方法：

直接上代碼...

import React from 'react'

class B extends React.Component {
    constructor (props) {
        super(props)
        this.handleClickOne = this.handleClickOne.bind(this)
        this.handleClickFour = ::this.handleClickFour
    }

    handleClickOne () {
        alert('點擊一')
        console.log('使用   this.handleClickOne = this.handleClickOne.bind(this)')
    }

    handleClickTwo () {
        alert('點擊二')
        console.log('使用   this.handleClickFour = ::this.handleClickFour')
    }

    handleClickThree = () => {
        alert('點擊三')
        console.log('使用   handleClickThree = () => {alert("點擊三")}')
    }

    handleClickFour () {
        alert('點擊四')
        console.log('使用   this.handleClickFour = ::this.handleClickFour')
    }

    render () {
        return(
        <div className="content">
        <p>
            <button onClick={this.handleClickOne}>點擊一</button>
            <br /><br />
            <button onClick={ () => this.handleClickTwo()}>點擊二</button>
            <br /><br />
            <button onClick={this.handleClickThree}>點擊三</button>
            <br /><br />
            <button onClick={this.handleClickFour}>點擊四</button>
            <br /><br />
        </p>
        </div>);
    }
}

export default B

handleClickOne,handleClickTwo,handleClickThree,handleClickFour分別代表四種不同的綁定和調用方式

第一種：

constructor (props) {
        super(props)
        this.handleClickOne = this.handleClickOne.bind(this) }

handleClickOne () {
        alert('點擊一') console.log('使用 this.handleClickOne = this.handleClickOne.bind(this)') }

調用時，

 <button onClick={this.handleClickOne}>點擊一</button>

第二種：

handleClickTwo () {
        alert('點擊二') console.log('使用 this.handleClickFour = ::this.handleClickFour') } 

調用時，

<button onClick={ () => this.handleClickTwo()}>點擊二</button>

第三種：

handleClickThree = () => { alert('點擊三') console.log('使用 handleClickThree = () => {alert("點擊三")}') }
調用時，

<button onClick={this.handleClickThree}>點擊三</button>

第四種：

constructor (props) {
        super(props) this.handleClickFour = ::this.handleClickFour }  handleClickFour () { alert('點擊四') console.log('使用 this.handleClickFour = ::this.handleClickFour') }

調用時，

<button onClick={this.handleClickFour}>點擊四</button>

 

第四種是es7的寫法，雙冒號 this.handleClickFour = ::this.handleClickFour 是this.handleClickOne = this.handleClickOne.bind(this)

在 ES7 中，有一個關於 bind 語法 的提議，提議將 :: 作為一個新的綁定操作符，該操作符會將左值和右值(一個函數)進行綁定。

function map(func) {
var mapped = new Array(this.length);
for(var i = 0; i < this.length; i++) {
mapped[i] = func(this[i], i);
}
return mapped;
}
console.log([1, 2, 3]::map(x => x * 2)) //[2, 4, 6]

github地址：https://github.com/fengnovo/diary/tree/master/react/20161128