如何使用现有代码实施生命周期事件

Question

我有一个关于如何正确使用React Class Lifecycle函数的问题。

我创建了一个电子邮件输入字段，该字段在验证后会更改提交按钮的样式。一切都像seen in this Codepen一样工作。但是，我还没有包括任何ComponentDidMount之类的生命周期方法，因此我认为这可能会导致问题。

问题是，在Codepen中创建内容的正确“反应”方式是什么？

Answer 1

React组件不需要使用任何生命周期方法即可正常工作。使用它们完全是可选的，您仅在某些用例中需要它们，而您似乎并不是其中之一。

Answer 2

如果您的组件在不实现任何生命周期方法的情况下可以按预期工作，那么您可能不需要它们（但直到组件变得更加复杂为止）。您不必担心会引起问题，因为您可以根据需要添加它们。

如果您想了解有关如何以及何时向类中添加生命周期的更多信息，最好参考adding lifecycle methods to a class的官方文档。

请注意，由于它在组件中的占位空间很小，因此如今很多人更喜欢使用所谓的 hooks 基于功能的组件，而不是传统的生命周期方法。您可以在官方docs for hooks中阅读它们。

关于如何以其他方式改善您的实施；您可以将onchange方法简化为这样的方式：

onChange = e => {
  this.setState({
    [e.target.name]: e.target.value
  })
}

根据字段的name属性为其设置状态。