•对于业务来说，毫无意义，徒增代码量
•很丑陋，每加一个处理器就要加一条这样的绑定
•冗余，这样重复的代码大量冗余在项目中，在搜索中混淆了原本的方法
避免的方式有很多，就看哪种最对味。下面来看看如何避免写这些绑定方法。
#0行内的绑定
最简单的可以在行内进行绑定操作，这样不用单独写一句出来。
<input type="checkbox" checked={this.state.isChecked} - onChange={this.toggleCheck} + onChange={this.toggleCheck.bind(this)} />
#1箭头函数
因为箭头函数不会创建新的作用域，其上下文是语义上的（lexically）上下文。所以在绑定事件处理器时，直接使用剪头函数是很方便的一种规避方法。
<input type="checkbox" checked={this.state.isChecked} - onChange={this.toggleCheck} + onChange={() => this.toggleCheck()} />
#2将类的方法改成属性
如果将这个处理器作为该组件的一个属性，这个属性作为事件的处理器以箭头函数的形式存在，执行的时候也是能正常获取到上下文的。
- toggleCheck() { + toggleCheck = () => { this.setState(currentState => { return { isChecked: !currentState.isChecked }; }); }
总结
React 组件中，其实跟 React 没多大关系，传递事件处理器，或方法作为回调时，其上下文会丢失。为了修复，我们需要显式地给这个方法绑定一下上下文。除了常用的在构造器中进行外，还可通过箭头函数，公有属性等方式来避免冗余的绑定语句。
您可能感兴趣的文章: