React事件绑定几种方法测试

前提

es6写法的类方法默认没有绑定this,不手动绑定this值为undefined。

因此讨论以下几种绑定方式。

一、构造函数constructor中用bind绑定

class App extends Component {constructor (props) {super(props)this.state = {t: 't'}// this.bind1 = this.bind1.bind(this) 无参写法this.bind1 = this.bind1.bind(this, this.state.t)}// 无参写法 // bind1 () {//   console.log('bind1', this)// }bind1 (t, event) {console.log('bind1', this, t, event)}render () {return (<div><button onClick={this.bind1}>打印1</button></div>)}
}

二、在调用的时候使用bind绑定this

 bind2 (t, event) {console.log('bind2', this, t, event)}render () {return (<div><button onClick={this.bind2.bind(this, this.state.t)}>打印2</button></div>)}
// 无参写法同第一种

三、在调用的时候使用箭头函数绑定this

bind3 (t, event) {console.log('bind3', this, t, event)}render () {return (<div>// <button onClick={() => this.bind3()}>打印3</button> 无参写法<button onClick={(event) => this.bind3(this.state.t, event)}>打印3</button></div>)}

四、使用属性初始化器语法绑定this

  bind4 = () =>{console.log('bind4', this)}render () {return (<div><button onClick={this.bind4}>打印4</button>// 带参需要使用第三种方法包一层箭头函数</div>)}

附加::方法(不能带参,stage 0草案中提供了一个便捷的方案——双冒号语法)

  bind5(){console.log('bind5', this)}render() {return (<div><button onClick={::this.bind5}></button></div>)}

方法一优缺点

优点:

只会生成一个方法实例;
并且绑定一次之后如果多次用到这个方法也不需要再绑定。

缺点:

即使不用到state,也需要添加类构造函数来绑定this,代码量多;
添加参数要在构造函数中bind时指定,不在render中。

方法二、三优缺点

优点:

写法比较简单,当组件中没有state的时候就不需要添加类构造函数来绑定this。

缺点:

每一次调用的时候都会生成一个新的方法实例,因此对性能有影响;
当这个函数作为属性值传入低阶组件的时候,这些组件可能会进行额外的重新渲染,因为每一次都是新的方法实例作为的新的属性传递。

方法四优缺点

优点:

创建方法就绑定this,不需要在类构造函数中绑定,调用的时候不需要再作绑定;
结合了方法一、二、三的优点。

缺点:

带参就会和方法三相同,这样代码量就会比方法三多了。

总结

方法一是官方推荐的绑定方式,也是性能最好的方式。

方法二和方法三会有性能影响,并且当方法作为属性传递给子组件的时候会引起重新渲染问题。

方法四和附加方法不做评论。

大家根据是否需要传参和具体情况选择适合自己的方法就好。

谢谢阅读。


更多专业前端知识,请上 【猿2048】www.mk2048.com

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/362862.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

初始socket模块和巧解粘包问题

1.什么是socket&#xff1f; 两个进程如果需要进行通讯最基本的一个前提能够唯一的标示一个进程&#xff0c;在本地进程通讯中我们可以使用PID来唯一标示一个进程&#xff0c;但PID只在本地唯一&#xff0c;网络中的两个进程PID冲突几率很大&#xff0c;这时候我们需要另辟它径…

100325 雨

回家以后怎么样&#xff1f; 感冒没有严重吧&#xff1f; 你也多喝水 我好些了 鼻涕不像昨天那么多了 就是嗓子疼 药吃了 喝了不少水了转载于:https://www.cnblogs.com/loverain/archive/2010/03/25/1694567.html

Java的挥发性修饰符

不久前&#xff0c;我编写了一个Java servlet过滤器&#xff0c;该过滤器在其init函数中加载配置&#xff08;基于web.xml的参数&#xff09;。 筛选器的配置缓存在私有字段中。 我在字段上设置了volatile修饰符。 后来&#xff0c;当我检查Sonar公司以查看是否在代码中发现任…

webpack常用loader和plugin及打包速度优化

优化 或 也可以用&#xff1a; 备用&#xff1a; 慎用的配置&#xff0c;用的不好会增加打包时间&#xff1a; 代码丑化插件&#xff1a; 更多专业前端知识&#xff0c;请上 【猿2048】www.mk2048.com

nvl 函数

nvl(oie.is_eval,N) <> Y 理解成 oie.is_eval <> Y 转载于:https://www.cnblogs.com/wangchuanfu/p/10818274.html

在自定义HttpHandler中如何使用Session

今天我写了一段程序在HttpHandler中使用Session。结果Session对象报错&#xff0c;“未将对象引用设置到对象的实例”&#xff0c;我郁闷半天&#xff0c;不知道怎么回事。结果我google了一下&#xff0c;原来也有人碰到过这种情况哦。呵呵。网上也有很多人说出了这些问题。解决…

SSH登录太慢(等很久才提示输入密码)的问题

SSH登录太慢(等很久才提示输入密码)的问题 SSH 登录太慢可能是 DNS 解析的问题&#xff0c;默认配置下 sshd 初次接受 ssh 客户端连接的时候会自动反向解析客户端 IP 以得到 ssh 客户端的域名或主机名。 如果这个时候 DNS 的反向解析不正确&#xff0c;sshd 就会等到 DNS 解析超…

开发Eclipse插件

最近&#xff0c;我开始与团队合作开发Eclipse插件。 团队开发了一个很棒的插件&#xff0c;可以实现预期的目的。 因此&#xff0c;我签出了源并尝试构建它。 项目源包含所有必需的库&#xff0c;并且只能在Eclipse中构建。 在当今不断交付的世界中&#xff0c;这是一个主要障…

react-native 热更新react-native-pushy集成遇到的问题

主要步骤按官方文档实现&#xff0c;这里只记录遇到的一些小坑 官方文档 run-android时NDK报错 前提是NDK已安装并且环境变量已设置 根据报错提示在 android/local.properties文件里加入ndk.dir~/Library/Android/android-ndk-r10e //这里改成你自己的ndk路径 cxxbridge找…

[转]在资源管理器中使鼠标右键增加一个命令,运行cmd,同时使得当前路径为资源管理器当前的目录...

[转]在资源管理器中使鼠标右键增加一个命令&#xff0c;运行cmd&#xff0c;同时使得当前路径为资源管理器当前的目录 http://www.cnblogs.com/skywind/archive/2009/05/22/1487138.html 1,找开注册表编辑器&#xff1b; 2,找到HKEY_CLASSES_ROOT\Folder\shell&#xff1b; 3,在…

Keil5 仿真测试出现Cannot Load Flash Device Description 解决方法

1.用ST的烧录软件检测&#xff0c;可以烧录对应的Hex文件。 2.点击魔术棒&#xff0c;Debug选项卡检测芯片型号是否和当前芯片对应 3.在Flash Download选项卡中检查发现没有对应的芯片型号 4.点击Add 选项&#xff0c;选择对应的Flash类型如图&#xff1a; 添加Flash类型后&…

Spring,REST,Ajax和CORS

假设您正在为客户端开发基于JavaScript的项目&#xff0c;并且他通过其余的Web服务向服务器发出Ajax请求&#xff0c;那么您可能会遇到一些麻烦&#xff0c;尤其是如果双方都在单独的域中。 实际上&#xff0c;出于安全原因&#xff0c;未授权从一个域A到另一域B的Ajax请求。 …

位运算实现加减乘除四则运算(Java)

本文是继《一文了解有趣的位运算》的第二篇文章. 我们知道&#xff0c;计算机最基本的操作单元是字节(byte)&#xff0c;一个字节由8个位(bit)组成&#xff0c;一个位只能存储一个0或1&#xff0c;其实也就是高低电平。无论多么复杂的逻辑、庞大的数据、酷炫的界面&#xff0c;…

消息(6)——WCF,构建简单的WCF服务,MTOM编码

构建一个简单的WCF服务。以Web服务类似的步骤由IIS进行宿主服务。建立的步骤&#xff1a;1 新建3.5网站2 添加WCF服务&#xff0c;自动生成契约接口与实现&#xff0c;这里改动一下&#xff0c;添加个字串参数&#xff1a;[ServiceContract]public interface IFirstService{[Op…

Hadoop—MapReducer统计文件的单词出现的个数

1. MapReduce 统计文件的单词出现的个数 Mapper: 处理具体文本&#xff0c;发送结果 Reducer: 合并各个Mapper发送过来的结果 Job: 制定相关配置&#xff0c;框架 Mapper package cn.itcast.hadoop.mr.wordcount;import java.io.IOException;import org.apache.hadoop.io.LongW…

从框架到平台

当我将近十年前作为Java开发人员开始我的职业生涯时&#xff0c;该行业正在经历革命性的变化。 Spring框架&#xff08;于2003年发布&#xff09;Swift发展起来&#xff0c;并成为庞大的J2EE平台的严重挑战者。 经过过渡时间后&#xff0c;我很快发现自己赞成使用Spring框架而不…

关于setTimeout和setInterval的函数参数问题

今天在写验证码倒计时小demo时&#xff0c;用了如下代码&#xff1a; window.setTimeout(count(num),1000);这样直接使用将使count函数立即执行&#xff0c;并将返回值传递给setTimeout函数作为参数&#xff0c;其结果并不是真正需要的&#xff0c;所以会出现问题。 方法一 …

课堂作业2

1、动手动脑 阅读示例: EnumTest.java&#xff0c;运行它&#xff0c;分析运行结果&#xff1f;你能得到什么结论&#xff1f;你掌握了枚举类型的基本用法了吗&#xff1f; public class EnumTest {public static void main(String[] args) {Size sSize.SMALL;Size tSize.LARGE…

(转)详解Vs2008下打包安装程序的一些技巧(含win7下提权限、卸载以及安装时定向到网页)...

1、怎么使得程序窗口左上角和任务栏有图标&#xff0c;如下图所示&#xff1a; 其实这个问题不应该放到程序打包这部分讲&#xff0c;只不过对于一些初学者而言&#xff0c;在这提下也许会有很大的帮助&#xff08;想到自己刚学.net那会了&#xff0c;呵呵&#xff09;。方法之…

复合双重错误

总览 在上一篇文章中&#xff0c;我概述了为什么BigDecimal大部分时间都不是答案。 虽然可以构造double会产生错误的情况&#xff0c;但在BigDecimal遇到错误的情况下构造情况也一样容易。 BigDecimal更容易正确&#xff0c;但更容易出错。 轶事证据表明&#xff0c;初级开发人…