Question

当我们将前面的代码翻译成ES2015语法时，一些函数被转换为不同的语法。其中一些是funcName()，其中一些是funcName = () =>。有什么区别？

import React, { Component, PropTypes } from 'react';

export default class Stopwatch extends Component {
    state = {
      running: false,
      previouseTime: 0,
      elapsedTime: 0,
    }

    componentDidMount() {
      this.interval = setInterval(this.onTick);
    }

    componentWillUnmount() {
      clearInterval(this.interval);
    }

    onStart = () => {
      this.setState({
        running: true,
        previousTime: Date.now(),
      });
    }

    onStop = () => {
      this.setState({
        running: false,
      });
    }

    onReset = () => {
      this.setState({
        elapsedTime: 0,
        previousTime: Date.now(),
      });
    }

    onTick = () => {
      if (this.state.running) {
        var now = Date.now();
        this.setState({
          elapsedTime: this.state.elapsedTime + (now - this.state.previousTime),
          previousTime: Date.now(),
        });
      }
    }

    render() {
    var seconds = Math.floor(this.state.elapsedTime / 1000);
    return (
      <div className="stopwatch" >
        <h2>Stopwatch</h2>
        <div className="stopwatch-time"> {seconds} </div>
        { this.state.running ?
          <button onClick={this.onStop}>Stop</button>
          :
          <button onClick={this.onStart}>Start</button>
        }
        <button onClick={this.onReset}>Reset</button>
      </div>
    )
  }
}

Answer 1

JavaScript类中的

funcName()将向原型添加一个函数。这些函数只存在一次，附在原型上。如果没有类语法，您将按如下方式定义原型函数：

Stopwatch.prototype.funcName = function() { /* ... */ };

其他函数实际上是作为包含匿名函数的属性创建的，每个实例存在一次，并且在实例化类时在构造函数中创建。这相当于在构造函数中创建它们，如下所示：

class Stopwatch /* ... */ {
    constructor() {
        this.onStart = () => { /* ... */ };
    }
}

执行此操作的原因是使用=>语法创建函数会导致函数永久绑定到每个实例的this值。因此，它们可以传递给其他东西（例如设置为事件处理程序），当它们被调用时，this将始终指向函数内的正确对象。

这是一个好主意还是简单不可读/太棘手也许是品味问题。

为什么他们中的一些＆＃34; funcName（）＆＃34;其中一些＆＃34; funcName =（）=＆gt;＆＃34;？

1 个答案: