React系列bind this

在实际开发中遇到事件不执行的情况，一直不理解bind函数，正好理理，代码如下

 handleClick() {
      this.setState({
        text: 'Clicked'
      });
    }

    render() {
      return <h1 onClick={this.handleClick}>
        {'Hello ' + this.state.text}
      </h1>;
    }

this.handleClick中this作用域的callback的问题，实际中this.state.text不会发生变化。
React官网上找到三个解决方案

在constructor中加上bind

使用箭头函数1

使用箭头函数2

还可以直接在onClick方法上bind

handleClick() {
      this.setState({
        text: 'Clicked'
      });
    }

    render() {
      return <h1 onClick={this.handleClick.bind(this)}>
        {'Hello ' + this.state.text}
      </h1>;
    }

bind函数的含义

**bind()方法会创建一个新函数，当这个新函数被调用时，它的this值是传递给bind()的第一个参数, 它的参数是bind()的其他参数和其原本的参数. **

bind() 最简单的用法是创建一个函数，使这个函数不论怎么调用都有同样的 this 值。JavaScript新手经常犯的一个错误是将一个方法从对象中拿出来，然后再调用，希望方法中的 this 是原来的对象。（比如在回调中传入这个方法。）如果不做特殊处理的话，一般会丢失原来的对象。从原来的函数和原来的对象创建一个绑定函数，则能很漂亮地解决这个问题.

总结下bind使用就是为了保证this时时刻刻指向当前对象。