使用自动绑定和属性初始化程序，React中是否仍需要构造函数？

Question

我正在重构一个基于es6类的React组件，该组件使用普通构造函数，然后绑定方法，并在构造函数内定义状态/属性。就像这样：

class MySpecialComponent extends React.Component {
  constructor(props) {
   super(props)
   this.state = { thing: true }
   this.myMethod = this.myMethod.bind(this)
   this.myAttribute = { amazing: false }
  }

  myMethod(e) {
   this.setState({ thing: e.target.value })
  }
}

我希望重构这段代码，以便自动绑定函数，并使用属性初始化器来管理状态和属性。现在我的代码大致如下：

class MySpecialComponent extends React.Component {
  state = { thing: true }
  myAttribute = { amazing: false }


  myMethod = (e) => {
   this.setState({ thing: e.target.value })
  }
}

我的问题是，我是否仍需要构造函数？或者props也是自动绑定的？我本来期望仍需要构造函数并包含super(props)，但我的代码似乎可以工作，我感到困惑。

谢谢

- Max Millington

---

如果您没有定义构造函数，父级构造函数会自动使用传递的参数调用。 constructor（...args）{super（...args）;} 基本上是默认构造函数。 - Felix Kling

如果组件的状态取决于其属性，您应该在构造函数中进行必要的初始化。如果状态不受属性影响，就像您的示例一样，那么您可以使用您编写的内容。 - Ross Allen

请注意，所有这些事情仍然发生在构造函数内部，只是语法不同。这可能有点令人困惑。此外，如果您想要从参数值初始化实例，则仍需要一个“constructor”定义，但在React中，一切都被抛到“props”对象中。 - Bergi

Answer 1

据我理解，当使用类属性时（如您的第二个代码示例），您根本不需要键入构造函数。接受的答案指出，如果“需要在初始状态对象中引用props”，则需要一个构造函数，但是如果您正在使用上述的类属性，则您可能正在使用Babel进行转译，在这种情况下，构造函数将被自动创建。因此，即使您在状态中使用props，也不需要自己添加构造函数。

请参见此文章以获取更好的示例和更好的解释。

- Christian Jensen

---

抱歉，您能简单地解释一下吗？谢谢。 - Ajay Gupta

我在文章结尾引用的那篇文章做得很好地解释了这一点，但基本上，你不需要一个构造函数仅仅因为你在使用 OP 提供的示例中使用了 props。Babel 会为你添加一个构造函数并调用 super(props)。 - Christian Jensen

好的。谢谢你的解答。这意味着，如果我没有使用Babel等工具，我就必须编写一个构造函数，对吗？而且仅仅因为我使用了Babel，我就可以跳过编写构造函数的步骤。 - Ajay Gupta

是的，我添加了类似的答案。https://dev59.com/gVQJ5IYBdhLWcg3w05ZM#63109619 - Akshay Vijay Jain

Answer 2

除非您需要在初始状态对象中引用props，否则不需要显式定义构造函数。

- user8826588

---

在没有构造函数的情况下，我们可以引用初始状态中的pops，对吗？例如： state = { loopsRemaining: this.props.maxLoops, }。 - Adam C.

@AdamC. 是正确的。即使您需要在初始状态对象中引用 props，也不需要构造函数。请参见我的答案。 - Christian Jensen

Answer 3

您不需要显式定义构造函数，然后执行super(props)。您可以像下面的示例中一样访问props。即'prop1'

class MySpecialComponent extends React.Component {
    state = { 
    thing: true ,
   prop1:this.props.prop1
  }
  myAttribute = { amazing: false }


 myMethod = (e) => {
  this.setState({ thing: e.target.value })
}


  render(){
  console.log(this.state.prop1);
   return(
       <div>Hi</div>
   );

   }
 }


 ReactDOM.render(<MySpecialComponent prop1={1}/> , mountNode);

- Dhana

---

但请注意，您不需要将属性分配给状态对象上的属性，事实上，您可能不应该这样做。 - Christian Jensen