React应该如何优雅的绑定事件?
前言
由于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应该如何优雅的绑定事件?的更多相关文章
- React中如何优雅的捕捉事件错误
React中如何优雅的捕捉事件错误 前话 人无完人,所以代码总会出错,出错并不可怕,关键是怎么处理. 我就想问问大家react的错误怎么捕捉呢? 这个时候: 小白:怎么处理? 小白+: ErrorBo ...
- angular,vue,react的基本语法—动态属性、事件绑定、ref,angular组件创建方式
基本语法: 动态属性: vue: v-bind:attr="msg" :attr="msg" react: attr={msg} angular [attr]= ...
- React绑定事件动态化的实现方法
一.什么是绑定事件 1.1 事件 我这里指的事件一般指的是React自带的触发事件,我这里先简单举例几个 onClick //鼠标点击 onMouseEnter //鼠标滑进 onMouseLeave ...
- jq绑定事件的4种方式
jQuery提供了多种绑定事件的方式,每种方式各有其特点,明白了它们之间的异同点,有助于我们在写代码的时候进行正确的选择,从而写出优雅而容易维护的代码.下面我们来看下jQuery中绑定事件的方式都有哪 ...
- jQuery绑定事件的四种方式
jQuery提供了多种绑定事件的方式,每种方式各有其特点,明白了它们之间的异同点,有助于我们在写代码的时候进行正确的选择,从而写出优雅而容易维护的代码.下面我们来看下jQuery中绑定事件的方式都 ...
- jQuery绑定事件的四種方式
这篇文章主要介绍的是jQuery绑定事件的四种方式相关内容,下面我们就与大家一起分享. jQuery绑定事件的四种方式 jQuery提供了多种绑定事件的方式,每种方式各有其特点,明白了它们之间的异同点 ...
- react 使用antd导航组件实现事件传递并局部刷新DOM
我们要实现一个通过点击顶部导航来查询左侧菜单的一个功能 在这个功能中,我们要应用到onClick={this.headNavMenuList.bind(this)}方法来传递点击 不同按钮来传递不同的 ...
- window.onresize绑定事件以及解绑事件
问题描述 在Vue工程中,添加样式,部分需要做到自适应,需要添加resize事件,由于是单页面应用,如果组件初始化的时候绑定事件,在切换页面的时候不去注销事件,如果来回切换,会让resize事件执行多 ...
- 冒泡,setinterval,背景图的div绑定事件,匿名函数问题
1.会冒泡到兄弟元素么? $(function(){ $("#a").click(function(){alert("a")}) $("#b" ...
随机推荐
- gRPC-Web正式发布
前言: gRPC-Web是一个JavaScript客户端库,可以使Web应用程序直接与后端gRPC服务进行通信,而无需HTTP服务器充当中介. 这意味着可以通过使用.proto文件定义客户端和服务器端 ...
- python3精品解析运算符
算数运算符 +:两个对象相加 -:得到负数或者,或者一个数减去另一个数 *:两个数相乘或者是返回一个被重复若干次的字符串 /:5/2等于2.1 5//2=2(/有余数,//取整) %:取模(5%2=1 ...
- 一、基础篇--1.2Java集合-HashMap和HashTable的区别
HashMap和HashTable的区别 1.继承的父类不同,HashMap继承的是AbstractMap类,HashTable继承的是Dictionary类,不过都实现了Map.Clone.Seri ...
- linux下配置服务自动启动
1.切换到/etc/rc.d/init.d目录下 2.新建脚本,step.sh 3.添加开机启动 chkconfig –add step.sh 4.chkconfig step.sh
- n个骰子可能的点数和
让后面的点数比前面的大 package touzi; public class Touzi { public static void main(String[] args) { // TODO Aut ...
- javascript之BOM对象总结
BOM编程基础 全称 Browser Object Model,浏览器对象模型. JavaScript是由浏览器中内置的javascript脚本解释器程序来执行javascript脚本语言的. 为了便 ...
- CentOS6.8安装Oracle11g
===== 这中间还有很多细节问题该文档中并没有说明和指出: 1.如/tmp目录必须单独分出来,不然oracle在以后的使用中会逐渐变慢 2.官网说的512M内存即可,这里纠正下,如果只是测试安装那还 ...
- for...in 与 for...of
在js中, 对于Object,一般for...in 来进行迭代,不能使用for...of // let obj = {a:1,b:2} for(let i of obj){console.lo ...
- C基础知识(4):指针--p=&a和*p=a的区别详解
对于*p,[p = &a]和[*p = a]的区别详解 (1) p=&a就是用a的地址对p赋值,&p不改变,变的是p (2) *p=a就是把p所指向的那一内存空间的值赋值为a, ...
- es6语法图片切换demo
git@github.com:qq719862911/ImageDemo.git