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

wpw 发布于2019-08-23 14:26 / 3333人阅读

摘要：前言由于的灵活性，我们在中其实有很多种绑定事件的方式，然而，其实有许多我们常见的事件绑定，其实并不是高效的。所以本文想给大家介绍一下绑定事件的正确姿势。相当于，每次都会创建一次事件函数。看到这里，你也知道到底应该如何绑定事件了。

前言

由于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 {}

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

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

个人网站：http://meckodo.com

服务器托管专线服务 js如何去除事件绑定 js清除绑定的事件事件绑定重复绑定事件

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/100615.html

如何优雅地在React中处理事件响应

摘要：处理事件响应是应用中非常重要的一部分。中，处理事件响应的方式有多种。关于事件响应的回调函数，还有一个地方需要注意。不管你在回调函数中有没有显式的声明事件参数，都会把事件作为参数传递给回调函数，且参数的位置总是在其他自定义参数的后面。 React中定义一个组件，可以通过React.createClass或者ES6的class。本文讨论的React组件是基于class定义的组件。采用cla...

buildupchao 2019-08-20 18:14 评论0 收藏0
[ 一起学React系列 -- 5 ] 如何优雅得使用表单控件

摘要：假如我们从后台拉取一个数据要填入输入框，那么必须得使用受控组件，因为非受控组件只能被用户输入。不影响正常输入填充该输入框的默认值，此时不显示内容。网页中使用的form表单大家肯定都再熟悉不过了，它主要作用是用来收集和提交信息。React中的表单组件与我们普通的Html中的表单及其表现形式没有什么不同，所以如何使用表单我觉得再拿出来说可能是画蛇添足、毫无意义。不过再怎么样也不能辜负大家...

Charlie_Jade 2019-08-26 12:20 评论0 收藏0
前端资源收集整理

摘要：工作原因，最近一年断断续续写了一点前端代码，收集整理了一些资料，和大家共享。工作原因，最近一年断断续续写了一点前端代码，收集整理了一些资料，和大家共享。 Github版本：Front-End Resource Collection 前端相关资源汇总学习指导精华文章 Web前端的路该怎么走？：文章超长，但是干货超级多，值得反复精读！听说2017你想写前端？：适合于已经度过了小白阶...

awesome23 2019-08-20 18:23 评论0 收藏0
前端资源收集整理

摘要：工作原因，最近一年断断续续写了一点前端代码，收集整理了一些资料，和大家共享。工作原因，最近一年断断续续写了一点前端代码，收集整理了一些资料，和大家共享。 Github版本：Front-End Resource Collection 前端相关资源汇总学习指导精华文章 Web前端的路该怎么走？：文章超长，但是干货超级多，值得反复精读！听说2017你想写前端？：适合于已经度过了小白阶...

antyiwei 2019-08-29 13:03 评论0 收藏0
前端资源收集整理

摘要：工作原因，最近一年断断续续写了一点前端代码，收集整理了一些资料，和大家共享。工作原因，最近一年断断续续写了一点前端代码，收集整理了一些资料，和大家共享。 Github版本：Front-End Resource Collection 前端相关资源汇总学习指导精华文章 Web前端的路该怎么走？：文章超长，但是干货超级多，值得反复精读！听说2017你想写前端？：适合于已经度过了小白阶...

KavenFan 2019-08-01 17:16 评论0 收藏0