一个为解决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函数的执行,严重影响性能,要避免这种做法。

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

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

  1. 最合理的方式
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

推荐阅读更多精彩内容