参考这篇文章：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. java线程的基本概念

    进程和线程 进程的诞生 操作系统中有2个任务A,B,任务A先执行,执行到一半需要io,因此要大量时间,在这个时间段内cpu是空闲的,浪费了资源,于是就有进程,当A暂时无法利用cpu,但是又不能销毁时, ...

  2. [USACO11FEB] Cow Line

    https://www.luogu.org/problem/show?pid=3014 题目描述 The N (1 <= N <= 20) cows conveniently number ...

  3. 2015/9/17 Python基础(13)：函数

    函数是对程序逻辑进行结构化或过程化的一种编程方法. Python的函数返回值当什么也不返回时,返回了None和大多数语言一样,Python返回一个值或对象.只是在返回容器对象时,看起来像返回多个对象. ...

  4. MSSQL Export Excel

    输出Excel: -- To allow advanced options to be changed. GO -- To update the currently configured value ...

  5. 验证组件——FluentValidation

          FluentValidation FluentValidation是与ASP.NET DataAnnotataion Attribute验证实体不同的数据验证组件,提供了将实体与验证分离开 ...

  6. mysql 服务端事务和客户端事务对比分析

    之前做mysql事务测试的时候都是在mysql服务端存储过程里面包含事务. 例如: CREATE DEFINER=`root`@`localhost` PROCEDURE `Test`(out deb ...

  7. Robot Framework 自定义关键字 Ignore error

    以上是关键字的完整写法. 一下是调用该关键字的实例.

  8. 【NOIP】提高组2015 跳石头

    [算法]二分查找 [题解]最小值最大化问题. 从1..l内二分枚举答案,将每个答案最少移开的石头数与最大移开数m比较. 精简写法学自:https://vijos.org/p/1981/solution ...

  9. 【BZOJ】2190 [SDOI2008]仪仗队

    [算法]欧拉函数 欧拉线性筛 [题解]将图从左至右,从下至上,分别标号0~n-1. 除了坐标0,一个点会被观察到当且仅当其坐标(i,j)的i与j互质,否则会被(i/d,j/d)挡住. 所以累加2~n- ...

  10. 【BZOJ】2151 种树

    [算法]贪心+堆 [题意]n个数字的序列,要求选择互不相邻的k个数字使和最大. [题解] 贪心,就是按一定顺序选取即可最优,不会反悔. 考虑第一个数字选择权值最大的,那么它相邻的两个数字就不能选择,那 ...