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

标签：app   箭头函数   多多指教   ansi   load   而且   png   内存   ima   

在 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问题思路

标签：app   箭头函数   多多指教   ansi   load   而且   png   内存   ima   

原文地址：https://www.cnblogs.com/chengeping/p/10517690.html