何时使用类组件和函数组件？

何时使用类组件和功能组件？

在这篇文章中，让我们了解在 React 中如何使用类组件和函数组件

在深入探讨之前，让我们先了解一下 React 中的组件是什么？

使用 React 开发的网站或 Web 应用程序是不同组件的组合和互连。

组件让您可以独立开发网站的 UI，甚至我们可以使用可重复使用的组件来实现类似的 UI。

React 为开发人员提供了类组件和功能组件

class Welcome extends React.Component {
  render() {
    return <h1>Super Excited to post my first post in Dev Community</h1>;
  }
}

在 React 中编写组件最简单的方法是编写 JavaScript 函数

function welcome(props) {

 return <h1>Super Excited to post my first post in Dev Community</h1>;

}

我们也可以对函数组件使用箭头函数

const welcome = (props) => <h1>Super Excited to post my first post in Dev Community</h1>;

希望我们对类和函数组件有一个简短而良好的回顾

上面两个用类编写的组件和函数组件从 React 的角度来看是等效的。

现在，开发人员的脑海中出现了一个主要问题！

要回答这个问题，我们需要对组件的状态有充分的了解。

要回忆或复习组件的概念state，我建议您参考这个。

在类组件中，每当组件状态发生变化时，都会调用 render 方法。另一方面，函数式组件则根据 props 渲染 UI。

每当我们有组件状态的用例并根据组件状态渲染 UI 时，请使用类组件

每当我们对组件的状态有要求时，都应该优先选择类组件。

在开发人员旅程的初级阶段，我们应该熟悉类组件和功能组件，随着我们向开发人员旅程的高级阶段迈进，我们能够理解 React 提供的更多酷炫的东西，比如Hooks

在 React 16.8 版本中，React 甚至允许开发人员使用Hooks来使用状态和其他 React 功能，即使无需编写Class Component

要了解有关Hooks的更多信息，请参阅

我很欣赏你学习更多知识的热情。

感谢阅读！