首页 > webfront > ECMAS > react > > 正文

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

发布人:zhoulujun    点击:

开发一款React应用离不开大量的事件绑定,首先一起来回顾回顾React组件事件绑定的几种方式。以onClick事件为例最粗鲁的方式:classMyCompon

开发一款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