为什么箭头函数可以在ReactJS类上使用而不能在纯ES6类上使用？

Question

I was wondering to know if I can write a pure ES6 class using arrow functions. Here is my class example:

class PhoneNumber {
    constructor(phoneNumber) {
        this.phoneNumber = phoneNumber;
    }

    testEmpty() {
        if (!this.phoneNumber) return true;
        return false;
    }
}

Doen't seem that I can write it as:

class PhoneNumber {
    constructor = phoneNumber => {
        this.phoneNumber = phoneNumber;
    }

    testEmpty = () => {
        if (!this.phoneNumber) return true;
        return false;
    }
}

Altough I can write something similar on React:

   class PhoneNumber extends React.Component {
         state = {
              phoneNumber: this.props.phoneNumber;
         }

         testEmpty = () {
             if (!this.state.phoneNumber) return true;
             return false;
         }
     }

Why React component, even being a class, accepts the ES6 arrow function and my pure class doesn't ?

Answer 1

Constructor cannot be an arrow function at all. You can create arrow methods in react because react uses proposals for class fields under the hood. You can add them to your project with babel proposal plugins. The benefit of using arrow class methods is that value of this in such a method would refer to class itself inside a callback. So you can use arrow methods inside of an event listener without wrapper function or without bind().