React绑定事件的四种方法

今天给大家分享一下react绑定事件的四种方法，也许会有不准确的地方，欢迎指点出来，大家一起进步~

首先要先了解，在js中class的方法默认不会绑定this，默认情况下是undefined，所以就需要我们手动的去绑定this，这样才能在回调函数中使用到this。

第一种方法：在构造器中绑定this（这也是官方推荐的方法）

export default class Test extends Component {
    constructor(props){
        super(props)
        this.handleClick = this.handleClick.bind(this)
    }

    handleClick(){
        console.log('点击了',this)
    }

    render(){
        return (
            <div onClick={ this.handleClick }>click btn</div>
        )
    }
}

优点就是这种方法只会生成一个方法实例，并且绑定一次以后可以多次使用。

第二种方法：属性初始化器语法(class fields)绑定回调函数

export default class Test extends Component {

    handleClick=()=>{
        console.log('点击了',this)
    }

    render(){
        return (
            <div onClick={ this.handleClick }>click btn</div>
        )
    }
}

这种方法的好处就不用说了，首先在代码上就精简了很多。但是官方文档中说这个是"实验性"的语法，所以还是需要babel转义的。不过Create React App默认是启用这种语法的，所以还是可以放心使用的。

第三种方法：在调用的时候绑定this

export default class Test extends Component {

    handleClick(){
        console.log('点击了',this)
    }

    render(){
        return (
            <div onClick={ this.handleClick.bind(this) }>click btn</div>
        )
    }
}

第四种方法：使用箭头函数绑定this

export default class Test extends Component {

    handleClick(){
        console.log('点击了',this)
    }

    render(){
        return (
            <div onClick={ ()=> this.handleClick() }>click btn</div>
        )
    }
}

第二、三、四种方法的好处就是在不需要state的时候，不用额外的多写一个constructor构造函数。

但是第三、四种方法的问题在于每次渲染这个组件的时候，都会创建不同的回调函数，这样会对性能产生影响，而且如果和子组件通讯时作为props传入子组件，这些组件可能会进行额外的重新渲染，因为每一次都是新的方法实例作为新的属性在传递。

所以如果考虑性能问题的话，还是应该避免第三种和第四种的写法。官方推荐的还是第一种和第二种方法来绑定this。