58

根据这个babel 文档，将 ES6+ 与 React 一起使用的正确方法是像这样初始化组件：

class Video extends React.Component {
  static defaultProps = {
    autoPlay: false,
    maxLoops: 10,
  }
  static propTypes = {
    autoPlay: React.PropTypes.bool.isRequired,
    maxLoops: React.PropTypes.number.isRequired,
    posterFrameSrc: React.PropTypes.string.isRequired,
    videoSrc: React.PropTypes.string.isRequired,
  }
  state = {
    loopsRemaining: this.props.maxLoops,
  }
}

但是一些官方的例子，比如 Dan Abramov 自己的React DnD模块，使用 ES6+ 但仍然在构造函数中定义状态：

constructor(props) {
    super(props);
    this.moveCard = this.moveCard.bind(this);
    this.state = {
       // state stuff
    }
}

现在 Dan Abramov，作为 React 的重要贡献者，可能知道他可以在构造函数之外定义状态，但仍然选择在构造函数中进行。

所以我只是想知道哪种方式更好，为什么？

4

3 回答 3

74

我相信这是个人喜好的问题。转译后的输出在语义方面是相同的。

于 2016-06-13T11:18:08.503 回答
8

它们是等价的，因为类字段提案是构造函数主体代码的语法糖。

如果不需要显式构造函数（创建临时局部变量等），constructor可以省略以支持类字段。

显式构造函数的问题是super参数（props）经常被错误地省略，这可能会导致问题：

constructor() {
    super();
    this.state = { foo: this.props.foo } // this.props is undefined
}

显式构造函数可能有利于可读性。方法被常规放置在下面constructor，甚至是箭头属性。这不会按预期工作，因为类字段是按照它们列出的顺序分配的：

state = { foo: { method: this.someMethod } } // this.someMethod is undefined

someMethod = () => ...;

在这种情况下，显式构造函数可能会产生更易读的代码：

constructor(props) {
    super(props);

    // <-- this is the place where this.someMethod is really assigned

    this.state = { foo: { method: this.someMethod } }
}

someMethod = () => ...;
于 2018-10-07T13:07:18.490 回答
1

Dan 的代码实际上有一个微妙的错误，这就是为什么我建议尽可能使用初始化程序。React 组件构造函数有两个参数 - props 和context。他没有将它传递给父构造函数，并且其他需要它的开发人员很容易错过它。

有时您别无选择，例如当初始化程序依赖于构造函数参数时，请记住将所有参数传递给父级。

在尝试了一些事情之后，看起来 React 没有我想要的问题。你可以将任何你想要的东西传递给父构造函数，它会很好。例如：

class MyComponent extends React.Component {
  constructor(props) {
    super({})
  }

  render() {
    // this.props will still be set correctly here
  }
}

我仍然建议使用初始化程序，因为不必调用父构造函数是一件需要考虑的事情。

于 2016-06-14T02:41:43.033 回答