一个为解决React事件绑定痛点而制定的Babel插件

babel-plugin-react-scope-binding

开发一款React应用离不开大量的事件绑定，
首先一起来回顾回顾React组件事件绑定的几种方式。

以onClick事件为例

1. 最粗鲁的方式

class MyComponent extends Component {
    handleClick(e) {
        this.setState({
            key: 'value'
        })
    }
    render() {
        return (
            <div onClick={this.handleClick.bind(this)}></div>
        )
    }
}

直接把bind函数写到render方法里，这是许多新手易犯的错误，后果是导致组件状态变更重新渲染时重复触发bind函数的执行，严重影响性能，要避免这种做法。

2. 较好的方式

class MyComponent extends Component {
    handleClick = e => {
        this.setState({
            key: 'value'
        })
    }
    render() {
        return (
            <div onClick={this.handleClick}></div>
        )
    }
}

使用ES7类属性箭头函数，自动绑定类作用域，需要transform-class-properties支持，缺点是该语法属于实验性质，并没有正式被划入标准，并且把类方法当作属性来用并不推荐。

3. 最合理的方式

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