react中实现在类定义的组件中绑定this上下文的效果的几种方法总结

bind方法。 

这个方法可以帮助我们绑定事件处理器的this，并可以向事件处理器中传递参数，比如：

import React, { Component } from 'react';

class App extends Component {
    handleClick(e, arg) {
        console.log(e, arg);
    }

    render() {
        //通过bind方法实现，可以传递参数
        return <button onClick={this.bandleClick.bind(this, 'test')}></button>;
    }
}

如果方法只绑定，不传参，那stage()草案中提供了一个便捷的方案---双冒号语法，其作用与this.bandClick(this)一致，并且Bable已经实现了该提案。比如：

import React, { Component } from 'react';

class App extends Component {
    handleClick(e) {
        console.log(e);
    }

    render() {
        return <button onClick={::this.bandleClick}></button>;
    }
}

构造器内声明。

在组件的构造器内完成了this的绑定，这种绑定方式的好处在于仅需要进行一次绑定，而不需要每次调用事件监听器时去执行绑定操作。

import React, { Component } from 'react';

class App extends Component {
    constructor(props) {
        super(props);
         
        this.bandleClick = this.bandleClick.bind(this);
    }
    handleClick(e) {
        console.log(e);
    }

    render() {
        return <button onClick={this.bandleClick}></button>;
    }
}

箭头函数

箭头函数不仅是函数的“语法糖”，它还自动绑定了定义此函数作用域的this，因此我们不需要再对它使用bind的方法。比如，以下方式就能运行：

import React, { Component } from 'react';

class App extends Component {
    const handleClick = (e) => {
        console.log(e);
    }

    render() {
        return <button onClick={this.bandleClick}></button>;
    }
}

//或
import React, { Component } from 'react';

class App extends Component {
    handleClick(e) {
        console.log(e);
    }

    render() {
        return <button onClick={()=>this.bandleClick()}></button>;
    }
}