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