react在组件内插入标签_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(

点击一

this.handleClickTwo()}>点击二

点击三

点击四

);

}

}

exportdefault 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)')

}

调用时，

点击一

第二种：

handleClickTwo () {

alert('点击二')

console.log('使用 this.handleClickFour = ::this.handleClickFour')

}

调用时，

this.handleClickTwo()}>点击二

第三种：

handleClickThree = () =>{

alert('点击三')

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

}

调用时，

点击三

第四种：

constructor (props) {

super(props)this.handleClickFour = ::this.handleClickFour

}

handleClickFour () {

alert('点击四')

console.log('使用 this.handleClickFour = ::this.handleClickFour')

}

调用时，

点击四

第四种是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