ES6代码样式最佳实践

Question

最近，我开始学习ReactJS，因此- ES6。我对ES5相当熟悉，但有些事情对我来说并不那么清楚。

示例1:方法语法

以下两种方法有什么区别？

export class InvoiceForm extends React.Component {
    methodName1() {
    }

    methodName2 = () => {

    };
}

示例2：之外的类属性

class Greeting extends React.Component {
  render() {
    return (
      <h1>Hello, {this.props.name}</h1>
    );
  }
}

Greeting.propTypes = {
  name: PropTypes.string
};

propTypes不在课堂上。但是为什么呢？我来自python，对于我来说，以下是更正确的

class Greeting extends React.Component {
  static propTypes = {
    name: PropTypes.string
  }
  render() {
    return (
      <h1>Hello, {this.props.name}</h1>
    );
  }
}

Answer 1

以下两种方法有什么区别？

 methodName1() {   }

上面是一个普通函数，这个函数中的this关键字指的是函数本身的上下文。

因此，如果您尝试访问像this.setState这样的类属性/函数，您将得到一个错误(如果您没有为methodName1使用绑定，比如：

this.methodName1 = this.methondName1.bind(this) prefarbaly --您想要在构造函数方法中这样做。

如果您想了解更多关于this绑定的信息，可以看到本条款

然而，在第二种methodName2语法中，函数是使用Arrow函数语法编写的。

 methodName2 = () => {
    };

箭头函数没有自己的--参数、超级函数或new.target函数。因此，此函数中的关键字将引用React类(React.Component)的上下文，如所述的这里

关于你的第二个问题

外部类属性

我相信，由于它使用了JSX，而且巴贝尔和ES6都支持它，因此几乎肯定不会涉及定义类变量的语法。您可以阅读更多it 这里

Answer 2

以下两种方法有什么区别？

第一种是原型方法( prototype method，this.__proto__.methodName1)，它不绑定到this上下文，在ES6中有效。第二个是实例方法(this.methodName1)，它绑定到this上下文和提案的一部分。

propTypes不在课堂上。但是为什么呢？

因为ES6中不支持类字段。由于该示例使用JSX，并且应该以任何方式使用Babel构建，所以使用ES.next特性和static propTypes = ...字段是有意义的。