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

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

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

class ErrorExample1 extends Component {    balabala(e) {console.log(e)}        render() {        const { text } = this.state;                return (          
     
                  {text}            
      
        this.balabala(e)}>          
      
             )    }}

class ErrorExample2 extends Component {    balabala(e) {console.log(e)}        render() {        const { text } = this.state;        return (          
     
                  {text}            
      
                 
      
             )    }}

这是两种最常见的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 (          
     
                  {text}            
      
                 
      
             )    }}

然而我更喜欢的姿势

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

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

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

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

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

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

动态绑定

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

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

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

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

import { BindAll } from 'lodash-decorators';@BindAll()class Bbb extends Component {}

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

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

郑州专业不孕不育医院:http://jbk.39.net/yiyuanzaixian/zztjyy/

　　郑州不孕不育医院×××:http://jbk.39.net/yiyuanzaixian/zztjyy/