Arvin Xiang

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

bind 方法进行绑定

这个方法可以帮助我们绑定事件处理器内的 this ，并可以向事件处理器中传 递参数，如下图清晰明了：

bind 方法绑定

箭头函数进行绑定

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

也可以是下面这种：

class App extends Component {
  handleClick(e) {
    console.log(e);
  }

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

构造器内声明

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

undefined

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

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

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

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

https://www.cnblogs.com/chengeping/p/10517690.html