类的方法默认不会自动绑定 this，在调用时如果忘记绑定 this，那么 this 的值将会是 undefined。 通常如果不是直接调用，应该为方法绑定 this。绑定方式有以下几种：
-
1、在 onClick 时使用匿名(箭头)函数绑定
<button onClick={() => this.handleClick()}>按钮</button> <!-- 传参 -- 该方法 点击 时才会执行 --> <button onClick={() => this.handleClick(data)}>按钮</button> -
2、在 onClick 时使用 bind 绑定 this
Function.prototype.bind 来为事件处理函数传递参数
```
handleClick() {
alert('我点击了按钮');
}
...
<button onClick={this.handleClick.bind(this)}>按钮</button>
<!-- 传参 -- 该方法 点击 时才会执行 -->
<button onClick={this.handleClick.bind(this)}>按钮</button>
```
-
3、在构造函数中使用 bind 绑定上下文
constructor(props) { super(props); this.handleClick = this.handleClick.bind(this); } ... handleClick() { alert('我点击了按钮'); } ... <button onClick={this.handleClick}>按钮</button> <!-- 传参 -- 该方法在 render 时会直接被执行 --> <button onClick={this.handleClick(data)}>按钮</button> -
4、使用属性初始化器语法(箭头函数)绑定 onClick
handleClick = () => { alert('我点击了按钮'); } ... <button onClick={this.handleClick}>按钮</button> <!-- 传参 -- 该方法在 render 时会直接被执行 --> <button onClick={this.handleClick(data)}>按钮</button> -
总结
-
方式1 和 方式2：
在 onClick 时绑定this，影响性能，且当方法作为属性传递给子组件的时候会引起重渲问题
优点：写法比较简单，当组件中没有 state 的时候就不需要添加类构造函数来绑定 this，
传参 -- 该方法 点击 时才会执行缺点：每一次调用的时候都会生成一个新的方法实例，因此对性能有影响，且当这个函数作为属性值传入低阶组件的时候，这些组件可能会进行额外的重新渲染，因为每一次都是新的方法实例作为的新的属性传递。
-
方式3：
在类构造函数中绑定 this，调用的时候不需要再绑定，官方推荐的绑定方式，性能最好的方式
优点：只会生成一个方法实例，并且绑定一次之后如果多次用到这个方法也不需要再绑定。
缺点：即使不用到 state，也需要添加类构造函数来绑定 this，代码量多。
-
方式4：
利用属性初始化语法，将方法初始化为箭头函数，因此在创建函数的时候就绑定了 this，最好的方式
优点：创建方法就绑定 this，不需要在类构造函数中绑定，调用的时候不需要再作绑定，结合了前三种方式的优点。
缺点：需要用 babel 转译
-
方式3 和 方式4：
共同缺点：传参 -- 该方法在 render 时会直接被执行 -
传参
向方法中传参时，使用 方法1 箭头函数(arrow functions) 和 方法2 bind(Function.prototype.bind)
事件对象 e 要放在最后 handleClick(data, e)，作为第二个参数传递
通过箭头函数的方式，事件对象必须显式的进行传递，但是通过 bind 的方式，事件对象以及更多的参数将会被隐式的进行传递
以上内容均为个人总结，如有不对的地方欢迎指正更多文章看这里哦!!!
-
