React 中是不是仍需要带有自动绑定和属性初始值设定项的构造函数

Posted 2023-02-22

【中文标题】React 中是不是仍需要带有自动绑定和属性初始值设定项的构造函数

【英文标题】：Is the constructor still needed in React with autobinding and property initializersReact 中是否仍需要带有自动绑定和属性初始值设定项的构造函数

【发布时间】：2017-11-24 20:27:41

【问题描述】：

我正在重构一个基于 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 )
  

我的问题是，我还需要构造函数吗？还是道具也自动绑定？我原以为仍然需要构造函数并包含super(props)，但我的代码似乎可以正常工作，我很困惑。

谢谢

【问题讨论】：

如果不定义构造函数，父构造函数会自动调用传递的参数。 constructor(...args) super(...args); 基本上是默认构造函数。

如果组件的状态依赖于它的 props，你需要在构造函数中进行必要的初始化。如果无论道具如何，状态都是相同的，就像您的示例中的情况一样，那么您可以按照自己写的内容进行操作。

请注意，所有这些事情仍然发生在构造函数中，只是语法不同。这可能有点令人困惑。此外，如果您想从参数值初始化您的实例，您仍然需要一个 constructor 定义，但无可否认，无论如何，所有内容都会被放入 props 对象中。

【参考方案1】：

据我了解，在使用 class properties 时，您根本不需要输入构造函数（如您的第二个代码示例中所示）。接受的答案指出，如果您“需要在初始状态对象中引用道具”，则确实需要一个，但如果您使用的是所述类属性，那么您可能正在使用 Babel 对其进行转译，在这种情况下是构造函数已使用，只是在幕后完成。因此，即使在 state 中使用 props，也不需要自己添加构造函数。

请参阅this aricle 以获得更好的示例和更好的解释。

【讨论】：

很抱歉，您能更简单地解释一下吗？谢谢

我最后参考的文章在解释它方面做得很好，但本质上，你不需要构造函数，因为你在 OP 提供的示例中使用了道具。 Babel 会添加一个构造函数并为你调用super(props)。

好的。感谢那。所以这意味着，如果我不使用 Babel 等，我将不得不编写一个构造函数，对吗？仅仅因为我使用的是 Babel，我可以跳过编写构造函数

是的，我添加了类似的答案***.com/a/63109619/2761641

【参考方案2】：

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

【讨论】：

我们可以在没有构造函数的情况下在初始状态下引用pops，对吧？喜欢：state = loopsRemaining: this.props.maxLoops,

@AdamC。是正确的。即使您需要在初始状态对象中引用道具，也不需要构造函数。见my 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);

【讨论】：

但请注意，您不需要为您的状态对象上的属性分配道具，实际上您probably shouldn't