react事件绑定的三种常见方式以及解决Cannot update during an existing state transition (such as within `render`). Ren

Posted chengeping

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了react事件绑定的三种常见方式以及解决Cannot update during an existing state transition (such as within `render`). Ren相关的知识,希望对你有一定的参考价值。

在 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`). Ren的主要内容,如果未能解决你的问题,请参考以下文章

JavaScript事件的三种绑定方式事件处理程序

事件的三种绑定方式

JS中事件绑定的三种方式

原生JS事件绑定的三种方式

原生JS事件绑定的三种方式

js中的事件绑定的三种方式