react组件中bind(this)写在哪里好？

开发一款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方法中绑定一次事件，编码起来相当麻烦。

文章来源：https://www.jianshu.com/p/4253b86b8ff8

转载本站文章《react组件中bind(this)写在哪里好？》,
请注明出处：https://www.zhoulujun.cn/html/webfront/ECMAScript/jsBase/2018_0207_8076.html