前言

由于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值,进行事件优化


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 (
<>
<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 {}

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

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

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

React应该如何优雅的绑定事件?的更多相关文章

  1. React中如何优雅的捕捉事件错误

    React中如何优雅的捕捉事件错误 前话 人无完人,所以代码总会出错,出错并不可怕,关键是怎么处理. 我就想问问大家react的错误怎么捕捉呢? 这个时候: 小白:怎么处理? 小白+: ErrorBo ...

  2. angular,vue,react的基本语法—动态属性、事件绑定、ref,angular组件创建方式

    基本语法: 动态属性: vue: v-bind:attr="msg" :attr="msg" react: attr={msg} angular [attr]= ...

  3. React绑定事件动态化的实现方法

    一.什么是绑定事件 1.1 事件 我这里指的事件一般指的是React自带的触发事件,我这里先简单举例几个 onClick //鼠标点击 onMouseEnter //鼠标滑进 onMouseLeave ...

  4. jq绑定事件的4种方式

    jQuery提供了多种绑定事件的方式,每种方式各有其特点,明白了它们之间的异同点,有助于我们在写代码的时候进行正确的选择,从而写出优雅而容易维护的代码.下面我们来看下jQuery中绑定事件的方式都有哪 ...

  5. jQuery绑定事件的四种方式

      jQuery提供了多种绑定事件的方式,每种方式各有其特点,明白了它们之间的异同点,有助于我们在写代码的时候进行正确的选择,从而写出优雅而容易维护的代码.下面我们来看下jQuery中绑定事件的方式都 ...

  6. jQuery绑定事件的四種方式

    这篇文章主要介绍的是jQuery绑定事件的四种方式相关内容,下面我们就与大家一起分享. jQuery绑定事件的四种方式 jQuery提供了多种绑定事件的方式,每种方式各有其特点,明白了它们之间的异同点 ...

  7. react 使用antd导航组件实现事件传递并局部刷新DOM

    我们要实现一个通过点击顶部导航来查询左侧菜单的一个功能 在这个功能中,我们要应用到onClick={this.headNavMenuList.bind(this)}方法来传递点击 不同按钮来传递不同的 ...

  8. window.onresize绑定事件以及解绑事件

    问题描述 在Vue工程中,添加样式,部分需要做到自适应,需要添加resize事件,由于是单页面应用,如果组件初始化的时候绑定事件,在切换页面的时候不去注销事件,如果来回切换,会让resize事件执行多 ...

  9. 冒泡,setinterval,背景图的div绑定事件,匿名函数问题

    1.会冒泡到兄弟元素么? $(function(){ $("#a").click(function(){alert("a")}) $("#b" ...

随机推荐

  1. gRPC-Web正式发布

    前言: gRPC-Web是一个JavaScript客户端库,可以使Web应用程序直接与后端gRPC服务进行通信,而无需HTTP服务器充当中介. 这意味着可以通过使用.proto文件定义客户端和服务器端 ...

  2. python3精品解析运算符

    算数运算符 +:两个对象相加 -:得到负数或者,或者一个数减去另一个数 *:两个数相乘或者是返回一个被重复若干次的字符串 /:5/2等于2.1 5//2=2(/有余数,//取整) %:取模(5%2=1 ...

  3. 一、基础篇--1.2Java集合-HashMap和HashTable的区别

    HashMap和HashTable的区别 1.继承的父类不同,HashMap继承的是AbstractMap类,HashTable继承的是Dictionary类,不过都实现了Map.Clone.Seri ...

  4. linux下配置服务自动启动

    1.切换到/etc/rc.d/init.d目录下 2.新建脚本,step.sh 3.添加开机启动   chkconfig –add step.sh 4.chkconfig step.sh

  5. n个骰子可能的点数和

    让后面的点数比前面的大 package touzi; public class Touzi { public static void main(String[] args) { // TODO Aut ...

  6. javascript之BOM对象总结

    BOM编程基础 全称 Browser Object Model,浏览器对象模型. JavaScript是由浏览器中内置的javascript脚本解释器程序来执行javascript脚本语言的. 为了便 ...

  7. CentOS6.8安装Oracle11g

    ===== 这中间还有很多细节问题该文档中并没有说明和指出: 1.如/tmp目录必须单独分出来,不然oracle在以后的使用中会逐渐变慢 2.官网说的512M内存即可,这里纠正下,如果只是测试安装那还 ...

  8. for...in 与 for...of

    在js中, 对于Object,一般for...in 来进行迭代,不能使用for...of     // let obj = {a:1,b:2} for(let i of obj){console.lo ...

  9. C基础知识(4):指针--p=&a和*p=a的区别详解

    对于*p,[p = &a]和[*p = a]的区别详解 (1) p=&a就是用a的地址对p赋值,&p不改变,变的是p (2) *p=a就是把p所指向的那一内存空间的值赋值为a, ...

  10. es6语法图片切换demo

    git@github.com:qq719862911/ImageDemo.git