开发一款React应用离不开大量的事件绑定，
首先一起来回顾回顾React组件事件绑定的几种方式。
以onClick事件为例
- 最粗鲁的方式
class MyComponent extends Component {
handleClick(e) {
this.setState({
key: 'value'
})
}
render() {
return (
<div onClick={this.handleClick.bind(this)}></div>
)
}
}
直接把bind函数写到render方法里，这是许多新手易犯的错误，后果是导致组件状态变更重新渲染时重复触发bind函数的执行，严重影响性能，要避免这种做法。
- 较好的方式
class MyComponent extends Component {
handleClick = e => {
this.setState({
key: 'value'
})
}
render() {
return (
<div onClick={this.handleClick}></div>
)
}
}
使用ES7类属性箭头函数，自动绑定类作用域，需要transform-class-properties支持，缺点是该语法属于实验性质，并没有正式被划入标准，并且把类方法当作属性来用并不推荐。
- 最合理的方式
class MyComponent extends Component {
constructor() {
super()
this.handleClick = this.handleClick.bind(this)
}
handleClick(e) {
this.setState({
key: 'value'
})
}
render() {
return (
<div onClick={this.handleClick}></div>
)
}
}
把bind函数写入constructor方法中，仅当组件初始化时调用，绑定自身作用域，这是最合理的做法，缺点是组件中每增加一个新的事件，就要在constructor方法中绑定一次事件，编码起来相当麻烦。
思考
比较以上三种方式，结论是在constructor中绑定事件最为合理。
但是，痛点在哪里？
痛点是当一个app包含大量的DOM事件需要访问this对象时，你需要逐一手动在constructor方法中去绑定事件作用域，大量冗余重复式的代码。
那么，如何解决这个问题？
我们可以用Babel插件实现作用域绑定自动化，减少没必要的重复劳动力，简化工作流程，提升开发效率。
这就是我开发这款Babel插件的起因。
有了这款插件后，你无需手动显示绑定事件的作用域，this指针永远指向组件本身。
因此，你可以写出类似下面的代码
class MyComponent extends Component {
handleClick(e) {
this.setState({
key: 'value'
})
}
render() {
return (
<div onClick={this.handleClick}></div>
)
}
}
开启插件高级语法特性后，甚至可以很轻易得传递参数
class MyComponent extends Component {
handleClick(e, val) {
this.setState({
key: 'value'
})
console.log(val) // 'hello'
}
render() {
return (
<div onClick={this.handleClick('hello')}></div>
)
}
}
插件帮我们做了什么？
在组件内部查找需要绑定作用域的事件名称，并把bind语句注入到constructor方法中。
对于传参语法，自动转换成箭头函数，类似(e) => {this.handleClick(e, item)}
实现原理
众所周知，Babel是一款JavaScript语法转译器，工作流程大致可理解为先通过词法分析把字符串形式的代码转换为tokens流，接着进行语法解析，把tokens流转换为一棵抽象语法树，然后进入转换阶段，深度遍历抽象语法树，对节点进行增删改，也是你的Babel插件工作的部分，最后解析转换后的抽象语法树，输出生成目标字符串文本。
抽象语法树中每一个节点可以用一个JavaScript对象来描述，包含节点类型及其它若干属性，你的Babel插件可以更改这些属性或者直接替换节点、删除节点，插入新构造的节点，用插件以访问者模式注入的思想帮我们做更多的事。
源码地址: https://github.com/chikara-chan/babel-plugin-react-scope-binding
网友评论