react-bind-once

react-bind-once是一个将JSX事件句柄的this自动绑定到组件实例的工具
你还在构造函数里一一手动绑定吗？
试试react-bind-once
GitHub
npm

安装

$ npm install react-bind-once --save

使用

import React,{ Component } from 'react';
import bindOnce from 'react-bind-once';

class App extends Component {
    constructor(props) {
        super(props);
        bindOnce(this);
    }

    handleClick() {
        console.log('clicked');
    }

    render() {
        return (
            <button onClick={this.handleClick}>Click</button>
        );
    }
}

export default App;

背景

绑定到JSX上的事件句柄，最终会变成事件监听的回调，而回调是指向全局作用域的

而我们需要事件句柄指向组件实例，因为里面可能会访问组件实例的属性

使JSX事件句柄的this指向组件实例的方式有四种：

在JSX里面直接绑定this

这样的问题是每次触发事件都要重新绑定一次

handleClick() {
    console.log('clicked');
}

render() {
    return (
        <button onClick={this.handleClick.bind(this)}>Click</button>
    );
}

包裹一层箭头函数

箭头函数没有this，会保留上级上下文，所以会指向组件实例

这样的问题是每次触发事件都会创建一个箭头函数

handleClick() {
    console.log('clicked');
}

render() {
    return (
        <button onClick={() => this.handleClick()}>Click</button>
    );
}

在构造函数里手动绑定，这是React官方推荐的方式

但是每一个事件句柄都要在构造函数手动绑定，很麻烦

而且这样做的后果就是方法会同时存在于实例和原型上

等号右边的this.handleClick是从原型上获得的

但是等号左边，程序会以为你想赋值给实例

所以实例上有一份该方法，原型上也有一份该方法

constructor(props) {
    super(props);
    this.handleClick = this.handleClick.bind(this);
}

handleClick() {
    console.log('clicked');
}

render() {
    return (
        <button onClick={this.handleClick}>Click</button>
    );
}

方法直接写在实例上

这种方式兼具性能和优雅

但是也有问题，每次实例化都会在实例上复制一份，违背了继承的规范

而且必须要写成箭头函数，如果写成普通函数，this仍然指向undefined

handleClick = () => {
    console.log('clicked');
}

render() {
    return (
        <button onClick={this.handleClick}>Click</button>
    );
}

利益

使用react-bind-once会自动帮你把在