react回调函数_React中的回调中自动绑定ES6类函数

在使用ES6类的React组件时，您必须遇到这种现象，必须显式绑定类函数，然后将其传递给诸如onClick。例如，采用以下示例。

import React from 'react';class MyComponent extends React.Component {constructor(props) {super(props);this.state = {clicked: false};this.btnClick = this.btnClick.bind(this);}btnClick() {this.setState({clicked: true})}render() {return(<div><ul><li onClick={this.btnClick}>Hello World</li></ul></div>);}
}

如您在上面的示例中看到的那样，为了使btnClick工作正常，我们需要在构造函数中明确地“绑定”该方法。如果我们没有这样做，JavaScript将无法this在该btnClick方法中识别。这是因为在JavaScript中，默认情况下未绑定类方法。因此，在使用绑定方法后bind()，它将创建一个新的绑定函数，这是一个包装原始函数对象的奇异函数对象（来自ECMAScript 2015的术语）。这将提供this对回调函数的访问。在我们的情况下为btnClick。

使用公共类字段语法

基本上，公共类字段语法是Babel提供的实验功能。在这里，您可以使用类字段正确绑定回调。这是上面的示例使用此语法的样子。

import React from 'react';class MyComponent extends React.Component {state = {clicked: false}btnClick = () => {this.setState({clicked: true})}render() {return(<div><ul><li onClick={this.btnClick}>Hello World</li></ul></div>);}
}

正如您在上面看到的，我们不再需要定义类的构造函数，因为class字段将实例化该类实例的属性值。除此之外，由于我们现在使用JavaScript的数组函数语法，我们不再需要显式绑定该函数，因为this箭头函数内的作用域指向父作用域。

在回调中使用箭头功能

import React from 'react';class MyComponent extends React.Component {constructor(props) {super(props);this.state = {clicked: false};}btnClick() {this.setState({clicked: true})}render() {return(<div><ul><li onClick={(e) => this.btnClick(e)}>Hello World</li></ul></div>);}
}

但是，这种方法有一个缺点。因此，基本上，每次MyComponent渲染都会创建一个不同的回调。如果将此回调作为对较低组件的支持而传递，则可能会出现问题，这些组件可能会进行额外的重新渲染，这可能会降低渲染组件时的性能。

文章参考来源：React中的回调中自动绑定ES6类函数