在 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. TCP连接的ISN、连接建立超时及TCP的长短连接

    问题现象: 一.TCP连接的ISN         之前我们说过初始建立TCP连接的时候的系列号(ISN)是随机选择的,那么这个系列号为什么不采用一个固定的值呢?主要有两方面的原因 防止同一个连接的不 ...

  2. 性能测试工具LoadRunner06-LR之Virtual User Generator 事务(Transaction)

    定义 为了衡量某个操作的性能,需要在操作的开始和结束位置插入这样一个范围,这就定义了一个transaction. 原因 从性能测试的角度出发,我们需要知道不同的操作所花费的时间,这样就能衡量不同的操作 ...

  3. MATLAB特殊矩阵以及矩阵转置

    特殊矩阵 通用特殊矩阵 zeros函数:产生全0矩阵,即零矩阵. ones函数:产生....1矩阵,即幺矩阵. eye函数:产生对角线为1的矩阵,当矩阵是方正时,得到单位矩阵. rand函数:产生(0 ...

  4. java多线程通过管道流实现不同线程之间的通信

    java中的管道流(pipeStream)是一种特殊的流,用于在不同线程间直接传送数据.一个线程发送数据到输出管道,另外一个线程从输入管道中读取数据.通过使用管道,实现不同线程间的通信,而不必借助类似 ...

  5. 异步对象(XMLHttpRequest)的帮助脚本

    异步对象五部曲 这是post请求的. //1.00创建异步对象 var xhr = new XMLHttpRequest(); //2.0 xhr.open("post", url ...

  6. gof23 适配器模式

    namespace Adapter { class Program { static void Main(string[] args) { //原实现 ClassBase customa = new ...

  7. maven下nutz与servlet报错org.nutz.mvc.NutFilter cannot be cast to javax.servlet.Filter

    使用maven搭建nutz时,加入servlet报错:org.nutz.mvc.NutFilter cannot be cast to javax.servlet.Filter 十二月 03, 201 ...

  8. Struts2_默认Action

    配置Struts2默认跳转的Action <package name="default" namespace="/" extends="stru ...

  9. [总结]SHAREPOINT - CAML列表查询(上)

    首先要了解的是CAML(Collaboration Application Markup Language)不仅仅是用在对列表.文档库的查询,字段的定义,站点定义等处处使用的都是CAML. 简单的提一 ...

  10. 新版mysql 5.7的group_by非常不和谐

    sqlalchemy.exc.OperationalError OperationalError: (_mysql_exceptions.OperationalError) (1055, " ...