参考这篇文章:Choosing the Best Approach for React Event Handlers

1、function.bind()方式

2、inline arrow function方式

3、Class Property Arrow Functions

第一种方式比较常见,但因为每次父组件render时,会重新生成一个函数,相当于子组件的props发生了改变。子组件的PureComponent会失效。

第二种是一种性能好,书写简单,功能强大的方式。

第三种因为是类的属性,可能涉及到继承、方法调用问题,性能有影响。

https://reactjs.org/docs/handling-events.html

最正确的React事件绑定方式的更多相关文章

  1. React事件绑定的方式

    一.是什么 在react应用中,事件名都是用小驼峰格式进行书写,例如onclick要改写成onClick 最简单的事件绑定如下: class ShowAlert extends React.Compo ...

  2. React事件绑定的几种方式对比

    React事件绑定 由于类的方法默认不会绑定this,因此在调用的时候如果忘记绑定,this的值将会是undefined.通常如果不是直接调用,应该为方法绑定this.绑定方式有以下几种: 1. 在构 ...

  3. jquery事件绑定方式总结(补充)

    总结 : 1.简单事件绑定方式:事件名()  如:click() 2.高级事件绑定方式:bind(事件名,数据参数,function)    3.动态生成元素事件绑定方式:live(事件名,数据参数, ...

  4. react事件绑定的三种常见方式以及解决Cannot update during an existing state transition (such as within `render`). Render methods should be a pure function of props and state问题思路

    在 React 组件中,每个方法的上下文都会指向该组件的实例,即自动绑定 this 为当前组件. 而且 React 还会对这种引用进行缓存,以达到 CPU 和内存的优化.在使用 ES6 classes ...

  5. javaScript事件机制深入学习(事件冒泡,事件捕获,事件绑定方式,移除事件方式,阻止浏览器默认行为,事件委托,模拟浏览器事件,自定义事件)

    前言 JavaScript与HTML之间的交互是通过事件实现的.事件,就是文档或浏览器窗口中发生的一些特定的交互瞬间.可以使用侦听器(或处理程序)来预订事件,以便事件发生时执行相应的代码.这种在传统软 ...

  6. react 入坑笔记(四) - React 事件绑定和传参

    React 事件处理 建议:在了解 js 的 this 取值后食用更佳. 一.react 与 Html 中用法的异同和注意点 html 中的绑定事件的写法: <button onclick=&q ...

  7. 移动端和pc端事件绑定方式以及取消浏览器默认样式和取消冒泡

    ### 两种绑定方式 (DOM0)1.obj.onclick = fn; (DOM2)2. ie:obj.attachEvent(事件名称,事件函数); 1.没有捕获(非标准的ie 标准的ie底下有 ...

  8. React事件绑定与解绑

    React中事件分类 React中事件绑定分为两种: 1.直接添加在React元素上的事件,这是React在基于Virtual DOM的基础上实现的符合w3c规范的合成事件(SyntheticEven ...

  9. DOM常用事件绑定方式与实例

    一.常用的事件 onclick 点击事件 模态框实例 <input type="button" id="b1" style="width:50p ...

随机推荐

  1. mysql 事务,锁,与四大隔离级别

    概念 事务 原子性:事务必须是一个自动工作的单元,要么全部执行,要么全部不执行. 一致性:事务结束的时候,所有的内部数据都是正确的. 隔离性:并发多个事务时,各个事务不干涉内部数据,处理的都是另外一个 ...

  2. Data Mining的十种分析方法——摘自《市场研究网络版》谢邦昌教授

    Data Mining的十种分析方法: 记忆基础推理法(Memory-Based Reasoning:MBR)        记忆基础推理法最主要的概念是用已知的案例(case)来预测未来案例的一些属 ...

  3. HDU 1599 find the mincost route (最短路 floyd)

    题目链接 Problem Description 杭州有N个景区,景区之间有一些双向的路来连接,现在8600想找一条旅游路线,这个路线从A点出发并且最后回到A点,假设经过的路线为V1,V2,....V ...

  4. springmvc4处理get和post请求中文乱码问题

    1.在springmvc4处理get和post请求的问题 参看大牛博客连接:https://blog.csdn.net/qq_41665356/article/details/80234392

  5. HDU 2199 二分

    我们可以发现这个函数是单增的,那么这样二分就好了. 反思:刚转C++,不会用scanf读入实数.(scanf("%lf",&y)) //By BLADEVIL #inclu ...

  6. 原生ES-Module在浏览器中的尝试

    其实浏览器原生模块相关的支持也已经出了一两年了(我第一次知道这个事情实在2016年下半年的时候) 可以抛开webpack直接使用import之类的语法 但因为算是一个比较新的东西,所以现在基本只能自己 ...

  7. python中正则用法举例

    一.根据正则表达式替换字符串 import re text='abc123' text=re.sub(r'\d','-',text) print(text) 输出:abc---将每个数字替换为-,如果 ...

  8. 修改ES使用root用户运行

    默认ES不允许使用root用户运行,如果使用root会报如下图的错误: ,通常建议创建elsearch用户并使用该用户运行ES.但如果必须使用root用户时,按如下设置即可: 1.启动是使用如下命令 ...

  9. 实战手工注入某站,mssql注入

    昨天就搞下来的,但是是工具搞得,为了比赛还是抛弃一阵子的工具吧.内容相对简单,可掠过. 报错得到sql语句: DataSet ds2 = BusinessLibrary.classHelper.Get ...

  10. 网络设备之pci_driver

    每个pci驱动都有一个pci_driver实例,用以描述驱动名称,支持的设备信息,以及对应的操作函数: /* 描述一个pci设备,每个pci驱动必须创建一个pci_driver实例 */ struct ...