React 组件

以前，开发人员编写数千行代码来开发单页应用程序。这些应用程序遵循传统的 DOM 结构，对其进行更改是一项非常具有挑战性的任务。如果发现任何错误，则手动搜索整个应用程序并进行相应更新。引入了基于组件的方法来克服这个问题。在这种方法中，整个应用程序被分成一个小的逻辑代码组，称为组件。

组件被认为是 React 应用程序的核心构建块。它使构建 UI 的任务更容易。每个组件存在于同一空间中，但它们彼此独立工作，并在一个父组件中合并，这将是您应用程序的最终 UI。

每个 React 组件都有自己的结构、方法和 API。它们可以根据您的需要重复使用。为了更好地理解，可以将整个 UI 视为一棵树。在这里，根是起始组件，其他每一部分都成为分支，然后再细分为子分支。

在 ReactJS 中，我们主要有两种类型的组件。它们是

1. 函数组件
2. 类组件

函数组件

在 React 中，函数组件是编写仅包含一个 render 方法且没有自己状态的组件的一种方法。它们只是可能接收也可能不接收数据作为参数的 JavaScript 函数。我们可以创建一个将 props（属性）作为输入并返回应该渲染的内容的函数。下面的例子可以展示一个有效的函数组件。

函数组件也被称为无状态组件，因为它们不保存或管理状态。可以在下面的示例中进行解释。

示例

输出

类组件

类组件比函数组件更复杂。它要求您从 React.Component 扩展并创建一个 render 函数，该函数返回一个 React 元素。您可以将数据从一个类传递到其他类组件。您可以通过定义一个扩展 Component 并具有 render 函数的类来创建一个类。下面的示例显示了有效的类组件。

类组件也被称为有状态组件，因为它们可以保存或管理本地状态。可以在下面的示例中进行解释。

示例

在本例中，我们正在创建无序元素列表，其中我们将为数据数组中的每个对象动态插入 StudentName。在这里，我们使用 ES6 箭头语法 (=>)，它看起来比旧的 JavaScript 语法干净得多。它帮助我们使用更少的代码行来创建我们的元素。当我们需要创建包含大量项目的列表时，它特别有用。

输出