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 或者纯 函数时,这种自动绑定就不复存在了,我们需要手动实现 this 的绑定。
1.bind方法进行绑定,这个方法可以帮助我们绑定事件处理器内的 this ,并可以向事件处理器中传 递参数,如下图清晰明了:

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

也可以是下面这种:
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问题思路的更多相关文章
- React事件绑定的几种方式对比
React事件绑定 由于类的方法默认不会绑定this,因此在调用的时候如果忘记绑定,this的值将会是undefined.通常如果不是直接调用,应该为方法绑定this.绑定方式有以下几种: 1. 在构 ...
- JS中事件绑定的三种方式
以下是搜集的在JS中事件绑定的三种方式. 1. HTML onclick attribute <button type="button" id="upl ...
- JavaScript 中事件绑定的三种方式
以下是在 JS 中事件绑定的三种方式. 1. HTML onclick attribute <button type="button" id="uplo ...
- JavaScript事件绑定的三种方式
(一)事件绑定的三种方式 (1)通过on的形式 <script type="text/javascript"> var div = document.getElemen ...
- React事件绑定的方式
一.是什么 在react应用中,事件名都是用小驼峰格式进行书写,例如onclick要改写成onClick 最简单的事件绑定如下: class ShowAlert extends React.Compo ...
- Javascript事件绑定的几种方式
Javascript的事件绑定主要有四种方法(一下在IE中运行正常,但不保证其他浏览器): [注:onXXX为某一事件,fun为某一function,domId为某一DOM对象id,event类型见后 ...
- react 入坑笔记(四) - React 事件绑定和传参
React 事件处理 建议:在了解 js 的 this 取值后食用更佳. 一.react 与 Html 中用法的异同和注意点 html 中的绑定事件的写法: <button onclick=&q ...
- React事件绑定与解绑
React中事件分类 React中事件绑定分为两种: 1.直接添加在React元素上的事件,这是React在基于Virtual DOM的基础上实现的符合w3c规范的合成事件(SyntheticEven ...
- react事件绑定,事件传参,input单向数据绑定
import React, { Component } from 'react'; class New extends Component { constructor(props){ super(pr ...
随机推荐
- 宋宝华: 关于Linux进程优先级数字混乱的彻底澄清
宋宝华: 关于Linux进程优先级数字混乱的彻底澄清 原创: 宋宝华 Linux阅码场 9月20日 https://mp.weixin.qq.com/s/44Gamu17Vkl77OGV2KkRmQ ...
- JAVA高并发秒杀API项目的学习笔记
一步一步的搭建JAVA WEB项目,采用Maven构建,基于MYBatis+Spring+Spring MVC+Bootstrap技术的秒杀项目学习的视频:http://www.imooc.com/l ...
- C语言答案解析
1.设整型变量 a=2,则执行下列语句后,浮点型变量b的值不为0.5的是( B ) A) b=1.0/a B) b=(float)(1/a) C) b=1/(float)a ...
- Python中基本数据类型与对字符串处理的方法
一.基本数据类型(int,bool,str) 1.基本数据类型: int 整数 整数 str字符串 一般不用来存放大量的数据 bool布尔值 用来判断(True,False) list 列表.用来存 ...
- 在 CentOS 上安装 vsftp 服务
在 CentOS 上安装 vsftp 服务 1.查看当前 CentOS 服务器是否已安装了 vsftpd 服务: rpm -q vsftpd 如果打印如下类似的信息则表明已安装 vsftpd 服务: ...
- angular2-组件样式
组件样式: :host 选择器 使用:host伪类选择器,用来选择组件宿主元素中的元素(相对于组件模板内部的元素) 这是我们能以宿主元素为目标的唯一方式.除此之外,我们将没办法指定它, 因为宿主不是组 ...
- pm2的的常用命令及用法
使用pm2启动静态文件服务器的方法如下: pm2 serve path port pm2 serve . 9001 这样就可以把当前文件夹下的静态文件跑起来了,而且端口号是9001, 同样也支持进阶的 ...
- three.js一个简单demo学些和讲解
叉口裁剪球体案例 二话不说先上效果图: 全部代码带注释 <!DOCTYPE html> <html lang="en"> <head> < ...
- mybatis由JDBC的演化过程分析
我们知道,mybatis是对JDBC的封装,那么他是如何演变过来的呢? 摘自传智传媒Java培训资料 关于mybatis的演化原理,我们先看看我们最熟悉也是最基础的通过JDBC查询数据库数据,一般需要 ...
- 利用ASP.NET里自带的站点地图工具制作网站站点地图
站点地图很方便能快速给我们导航我们要去访问的地址,能按层级关系分门别类,给用户一个很好的用户体验,很好的看到自己当前所在的网站位置 站点地图,又称网站地图,它就是一个页面,上面放置了网站上所有页面的链 ...