在 React 组件中,每个方法的上下文都会指向该组件的实例,即自动绑定 this 为当前组件。 而且 React 还会对这种引用进行缓存,以达到 CPU 和内存的优化。在使用 ES6 classes 或者纯 函数时,这种自动绑定就不复存在了,我们需要手动实现 this 的绑定。

1.bind方法进行绑定,这个方法可以帮助我们绑定事件处理器内的 this ,并可以向事件处理器中传 递参数,如下图清晰明了:

bind方法绑定

2.箭头函数进行绑定,箭头函数不仅是函数的“语法糖”,它还自动绑定了定义此函数作用域的 this, 因此我们不需要再对它使用 bind 方法如下图:

箭头函数1

也可以是下面这种:

class App extends Component {

handleClick(e) { console.log(e); }

render() {return <button onClick={() => this.handleClick()}>Test</button>}

}

3.构造器内声明。在组件的构造器内完成了 this 的绑定,这种绑定方式的好处在于仅需要 进行一次绑定,而不需要每次调用事件监听器时去执行绑定操作

构造器内声明

以上就是三种事件绑定的方式,我个人觉得第三种比较好,只需要进行一次绑定操作优化性能。

最后附上一张渲染报错的例子如下:

Warning: Cannot update during an existing state transition (such as within `render`). Render methods should be a pure function of props and state

出现如上的提示说明事件并没有绑定到this实例上,按上述三种方式解决即可!!!

本人才疏学浅,有不对的地方请多多指教,共同进步!!!

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

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

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

  2. JS中事件绑定的三种方式

    以下是搜集的在JS中事件绑定的三种方式.   1. HTML onclick attribute     <button type="button" id="upl ...

  3. JavaScript 中事件绑定的三种方式

    以下是在 JS 中事件绑定的三种方式.   1. HTML onclick attribute     <button type="button" id="uplo ...

  4. JavaScript事件绑定的三种方式

    (一)事件绑定的三种方式 (1)通过on的形式 <script type="text/javascript"> var div = document.getElemen ...

  5. React事件绑定的方式

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

  6. Javascript事件绑定的几种方式

    Javascript的事件绑定主要有四种方法(一下在IE中运行正常,但不保证其他浏览器): [注:onXXX为某一事件,fun为某一function,domId为某一DOM对象id,event类型见后 ...

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

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

  8. React事件绑定与解绑

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

  9. react事件绑定,事件传参,input单向数据绑定

    import React, { Component } from 'react'; class New extends Component { constructor(props){ super(pr ...

随机推荐

  1. 宋宝华: 关于Linux进程优先级数字混乱的彻底澄清

    宋宝华: 关于Linux进程优先级数字混乱的彻底澄清 原创: 宋宝华 Linux阅码场 9月20日 https://mp.weixin.qq.com/s/44Gamu17Vkl77OGV2KkRmQ ...

  2. JAVA高并发秒杀API项目的学习笔记

    一步一步的搭建JAVA WEB项目,采用Maven构建,基于MYBatis+Spring+Spring MVC+Bootstrap技术的秒杀项目学习的视频:http://www.imooc.com/l ...

  3. C语言答案解析

    1.设整型变量 a=2,则执行下列语句后,浮点型变量b的值不为0.5的是(  B ) A) b=1.0/a            B) b=(float)(1/a) C) b=1/(float)a   ...

  4. Python中基本数据类型与对字符串处理的方法

    一.基本数据类型(int,bool,str) 1.基本数据类型: int 整数 整数 str字符串  一般不用来存放大量的数据 bool布尔值 用来判断(True,False) list 列表.用来存 ...

  5. 在 CentOS 上安装 vsftp 服务

    在 CentOS 上安装 vsftp 服务 1.查看当前 CentOS 服务器是否已安装了 vsftpd 服务: rpm -q vsftpd 如果打印如下类似的信息则表明已安装 vsftpd 服务: ...

  6. angular2-组件样式

    组件样式: :host 选择器 使用:host伪类选择器,用来选择组件宿主元素中的元素(相对于组件模板内部的元素) 这是我们能以宿主元素为目标的唯一方式.除此之外,我们将没办法指定它, 因为宿主不是组 ...

  7. pm2的的常用命令及用法

    使用pm2启动静态文件服务器的方法如下: pm2 serve path port pm2 serve . 9001 这样就可以把当前文件夹下的静态文件跑起来了,而且端口号是9001, 同样也支持进阶的 ...

  8. three.js一个简单demo学些和讲解

    叉口裁剪球体案例 二话不说先上效果图: 全部代码带注释 <!DOCTYPE html> <html lang="en"> <head> < ...

  9. mybatis由JDBC的演化过程分析

    我们知道,mybatis是对JDBC的封装,那么他是如何演变过来的呢? 摘自传智传媒Java培训资料 关于mybatis的演化原理,我们先看看我们最熟悉也是最基础的通过JDBC查询数据库数据,一般需要 ...

  10. 利用ASP.NET里自带的站点地图工具制作网站站点地图

    站点地图很方便能快速给我们导航我们要去访问的地址,能按层级关系分门别类,给用户一个很好的用户体验,很好的看到自己当前所在的网站位置 站点地图,又称网站地图,它就是一个页面,上面放置了网站上所有页面的链 ...