参考这篇文章：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. Lodash js数据操作库

    https://lodash.com/docs/4.17.4

  2. 51Nod 1133 不重叠的线段 | 典型贪心

    Input示例 3 1 5 2 3 3 6 Output示例 2 题意:给出n条一维线段,求不重合的最多线段数. 解析:这个是典型的贪心算法的区间问题. 贪心策略:每次取尽可能短的区间,而且保证相互之 ...

  3. C11工具类：时间处理

    C++11提供时间管理类,包括三种类型:时间间隔duration,时钟clocks,时间点time point. 1.记录时常的duration 1.1 原型 duration表示一段时间间隔,用来记 ...

  4. PowerDesigner16连接mysql5.6逆向生成PDM

    一:首先安装ODBC驱动  https://dev.mysql.com/downloads/connector/odbc/  ,安装32位驱动 二:然后配置好ODBC数据源,控制面板\系统和安全\管理 ...

  5. 4、什么是事务？MySQL如何支持事务？

    什么是事务? 事务是由一步或几步数据库操作序列组成逻辑执行单元,这系列操作要么全部执行,要么全部放弃执行.程序和事务是两个不同的概念.一般而言:一段程序中可能包含多个事务.(说白了就是几步的数据库操作 ...

  6. splay:优雅的区间暴力！

    万年不更的blog主更新啦!主要是最近实在忙,好不容易才从划水做题的时间中抽出一段时间来写这篇blog 首先声明:这篇blog写的肯定会很基础...因为身为一个蒟蒻深知在茫茫大海中找到一个自己完全能够 ...

  7. 去掉每行的特定字符py脚本

    百度下载一个脚本的时候遇到那么一个情况.每行的开头多了一个空格.https://www.0dayhack.com/post-104.html 一个个删就不要说了,很烦.于是就有了下面这个脚本. #! ...

  8. Filecoin：一种去中心化的存储网络（二）

    开始初步了解学习Filecoin,如下是看白皮书的内容整理. 参考: 白皮书中文版 http://chainx.org/paper/index/index/id/13.html 白皮书英文版 http ...

  9. C基础 一个可以改变linux的函数getch

    引言  -  getch简述 引用老的TC版本getch说明. (文章介绍点有点窄,  应用点都是一些恐龙游戏时代的开发细节) #include <conio.h> /* * 立即从客户端 ...

  10. swiper 滑动插件，小屏单个显示滑动，大屏全部显示

    var currSwiperIndex=0; function widthHandle(){ var level = widthLevel(); if(level==1){ //单个显示,滑动 if( ...