React应该如何优雅的绑定事件？

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了React应该如何优雅的绑定事件？，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含3470字，纯文字阅读大概需要5分钟。

内容图文

React应该如何优雅的绑定事件？

二哲 web前端开发

前言

由于JS的灵活性，我们在React中其实有很多种绑定事件的方式，然而，其实有许多我们常见的事件绑定，其实并不是高效的。

所以本文想给大家介绍一下React绑定事件的正确知识。

以下是我们常见的两种种错误绑定事件

class ErrorExample1 extends Component {

    balabala(e) {console.log(e)}

    render() {        const { text } = this.state;        
        return (          <Wrapper>
            {text}            <Balabala onClick={(e) => this.balabala(e)}></Balabala>
          </Wrapper>
        )
    }
}

class ErrorExample2 extends Component {
    balabala(e) {console.log(e)}

    render() {        const { text } = this.state;        return (          <Wrapper>
            {text}            <Balabala onClick={this.balabala.bind(this)}></Balabala>
          </Wrapper>
        )
    }
}

这是两种最常见的React绑定事件，但它为什么是错误的？

每当你的text发生变化，就会rerender，只要组件重新render，那就会重新创建新的事件函数，进而绑定事件，这个过程的开销就是极大极大的浪费。相当于，每次rerender都会创建一次事件函数。

这据说是 Best Practice

class Balabala extends Component {
    constructor(p) {
        suprt(p);        this.balabala = this.balabala.bind(this);
    }
    render() {        const { text } = this.state;        return (          <Wrapper>
            {text}            <Balabala onClick={this.balabala}></Balabala>
          </Wrapper>
        )
    }
}

然而我更喜欢的姿势

class Balabala extends Component {
    constructor(p) {
        suprt(p);
    }
    醒来记得想我 = (e) => {
        alert('想你了');
    }
    render() {        const { text } = this.state;        return (          <Wrapper>
            {text}            <Balabala onClick={this.醒来记得想我}></Balabala>
          </Wrapper>
        )
    }
}

利用箭头函数，帮我们bind this。避免了在构造函数里生命一堆的变量。减少键盘的敲击，延长生命。

当然，还有人会问，这样的写法如何传参呢？以前别人会这样写

class 渣男 extends Component {
    constructor(p) {
        suprt(p);
    }
    醒来记得想我 = (e, text) => {
        alert(text); // alert 滚吧，渣男
    }
    render() {        const { text } = this.state;        return (          <Wrapper>
            {text}            <Balabala onClick={this.醒来记得想我.bind(e, '滚吧，渣男')}></Balabala>
          </Wrapper>
        )
    }
}   

但是其实，我们可以这样传参，更加简洁明了

class 渣男 extends Component {
    constructor(p) {
        suprt(p);
    }
    醒来记得想我 = (text) => (event) => {
        alert(text); // 你渣我也喜欢，因为是你
    }
    render() {        const { text } = this.state;        return (          <Wrapper>
            {text}            <Balabala onClick={this.醒来记得想我( '你渣我也喜欢，因为是你')}></Balabala>
          </Wrapper>
        )
    }
}

动态绑定

基于这个我们还可以针对同一事件修改多个input值，进行事件优化

cl```
ass ChangeMyName extends Component {
修改渣男名称 = name => { if (!this.handlers[name]) { this.handlers[name] = event => { this.setState({ [name]: event.target.value });
};
} return this.handlers[name];
}

render() { return ( <>
<input onChange={this.修改渣男名称('男神1号')}/>
<input onChange={this.修改渣男名称('渣男2号')}/>
</>
)
}
}

旁门左道，邪教！(个人不喜欢而已)

import autoBind from 'react-autobind';class Balabala extends Component {
constructor() {
autoBind(this);
}
醒来记得想我 (e) {
alert('想你了');
}
render() { const { text } = this.state; return ( <Wrapper>
{text} <Balabala onClick={this.醒来记得想我}></Balabala>
</Wrapper>
)
}
}

import { BindAll } from 'lodash-decorators';

@BindAll()class Bbb extends Component {}

// 这种写法等同于 bindclass Bbb extends Component {
balabala(){}
render() { const { text } = this.state; return ( <Wrapper>
{text} <Balabala onClick={::this.balabala}></Balabala>
</Wrapper>
)
}
}

基本都大同小异吧，就不过多介绍了。看到这里，你也知道到底应该如何绑定事件了。

内容总结

以上是互联网集市为您收集整理的React应该如何优雅的绑定事件？全部内容，希望文章能够帮你解决React应该如何优雅的绑定事件？所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

---