javascript - React.js 中的默认函数

Question

我有一个类似的片段，它有效:

class Button extends React.Component {
    state = { counter : 0 }
  handleClick = () => {
    this.setState({
        counter: this.state.counter+1
    })
  }

  render() {
    return (
        <button onClick={this.handleClick}>
          {this.state.counter}
        </button>
    )
  }
}

上面，handleClick 函数是一个箭头函数。 下面，我尝试使用默认函数(来自 ES5):

 class Button extends React.Component {
    state = { counter : 0 }
  handleClick = function() {
    this.setState({
        counter: this.state.counter+1
    })
  }

  render() {
    return (
        <button onClick={this.handleClick}>
          {this.state.counter}
        </button>
    )
  }
}

ReactDOM.render(<Button/>, mountNode)

第二个snippet不能正常运行的问题是function的写法？或者别的地方？ React js 不处理默认函数？

Answer 1

当你这样写的时候:

class Example {
  handleClick = (e) => {
    this.doStuff(e);
  }
}

它被 Babel 转译为这样的东西:

var Example = function Example() {
  var _this = this;

  this.handleClick = function (e) {
    return _this.doStuff(e);
  };
};

handleClick 方法可以访问对象的实例，因为构造函数将实例存储在变量 _this 中，并且该方法形成一个闭包，其中 _this 在其词法环境 中可用。它使用 _this 而不是关键字 this，因为当不知道原始对象的事件监听器调用时，this 会值 window(如果启用了严格模式，则为 undefined)。

---

现在，当您使用常规 function 而不是箭头函数时，如下所示:

class Test {
  handle = function (e) {
     return this.doStuff(e);
  }
}

它被转译为这样的东西:

var Test = function Test() {
  this.handle = function (e) {
    return this.doStuff(e);
  };
};

如您所见，它现在正试图通过关键字 this 访问实例，当从事件监听器调用该方法时，它不会是对象实例，因此它不会按预期工作。

---

如果你像我一样是一个梦想家，并且你喜欢思考一个“类属性转换”是实际规范的一部分并且我们都在本地使用 ES2xxx 的世界，你可以将箭头函数版本视为等效的到以下内容:

class Example {
  constructor() {
    this.handleClick = (e) => {
      this.doStuff(e);
    }
  }
}

你可以在这里看到它在构造函数中创建了一个箭头函数，并且由于箭头函数从周围的范围中获取它们的 context (即 this 的值)，并且这里的范围是构造函数本身，this 将具有适当的值，无论在何处调用该方法。