React 组件和更好的方法

Credits- eduba.com

想了解 react.js 如何帮助创建令人惊叹的用户界面？它是如何让我们如此轻松高效地执行多项任务的？

在本文中，我将介绍其中一个 React.js 基本概念 这简化了 UI 开发人员的工作。这个基本概念是 成分 是构建 React.js 应用程序的基础。您将看到组件是什么以及它们是如何工作的。

你还会发现一个 更好的方法/技术 这无疑将帮助您更好地理解组件，并使它们更容易重用。导致 提高利用率 的组件。

在我们开始之前，我假设您熟悉状态这个术语。

反应组件

您将使用 React 开发或已经开发的每个应用程序都由称为组件的部分组成。组件是独立且可重用的代码块。将它们视为不同的拼图，当它们组合在一起时，将创建整个拼图，这将成为您的 UI。

创建反应组件时，它的名称 必须 总是以大写字母开头。 React 有两种类型的组件：

• 功能组件
• 类组件

功能组件

一个简单的 javascript 函数不是一个反应组件。使 JS 函数成为 React 组件的原因是：

• 如果它正在返回 JSX （一个 javascript 扩展， 结合了 javascript 和 HTML 使逻辑创建更加简单）或...
• 创建反应元素的逻辑。

除此之外，它们的用途与 JavaScript 函数相同，但独立工作。

例子： 展示基于功能的组件开发的程序。

 从“反应”导入反应  
 常量应用 = () => {  
 返回 （<h1>这是一个功能组件</h1>)}  
 导出默认应用程序；

前面提到的在 React 中创建函数式组件的例子很简单。这个函数除了返回一个 HTML 元素之外什么都不做，或者我们可以说 JSX，它将它与常规的 vanilla Javascript 函数区分开来，并将其转换为一个 React 组件。但是，您可以随时增加其功能。这是我想到的最简单的例子。

类组件

一个简单的类是一个反应组件，如果：

• 它是从 反应组件 ( 点击这里 了解更多信息）。
• 有个[ 使成为（）](https://reactjs.org/docs/react-component.html) 方法。

只有类组件有 状态和生命周期 在 React 16.8 版本之前的钩子，但自从 React 16.8 及更高版本中引入了钩子。你可以在不创建类的情况下使用状态和其他 React 特性。

例子： 展示基于类的组件开发的程序。

 从“反应”导入反应；  
 类 App 扩展 React.Component {  
 使成为（） {  
 返回<h1>这是一个类组件</h1>;}

上面的组件扩展 反应组件 并且有一个 使成为 产生 JSX 的方法。因此，由于它满足类组件的要求，我们可以说它是一个。

笔记： 如果您使用的是版本 17 之前的 React，则必须从“react”导入 React。否则，就没有必要了。

F 或本节，我建议您练习编写组件。您可以使用上述信息和示例来执行此操作。例如：尝试用组件编写一些逻辑并打印出来。

更好的方法

如果你已经研究 react 一段时间了，你可能已经熟悉它了。为了更好地理解，我进一步将它们分为两种类型： 展示性和状态性 组件，因为它们有很多名称，如 Container & Presentational、Smart & Dumb 等。但称它们为 smart 和 dim 对于展示组件来说过于苛刻，而且也无法解释它们的不同之处。虽然概念是一样的。实际上，这些是 不是组件的实际类型 但只是一个观点，或者你可以说，一种从不同角度看待组件的方法，以便有效地理解和使用它们。

Credit- 乌扎尔·阿西姆

该图展示了如何从外部看到它们，但也可以反过来，展示组件也可以由有状态组件包装。

演示组件：

• 这样的组件是愚蠢的。
• 关注事物的外观/外观。只输出带有样式和结构的内容。
• 很简单。
• 很少有自己的状态。
• 不要说明数据是如何加载和使用的。
• 可以在其中包含有状态和表示组件。

有状态的组件：

• 有状态的组件更智能。
• 关心事物的运作方式。执行有用的工作，而不仅仅是样式和结构。
• 很复杂。
• 通常，他们管理国家。
• 通过向它们提供数据来与其他表示性和有状态的组件合作。定义他们的行动。
• 可以包含表示性和有状态的组件。

一个很好的策略是将它们组织到不同的文件夹中。

这种方法的优点：

• 更好的可重用性。它们很容易重复使用。特别是显示组件，例如导航栏、侧边栏等。
• 改进的分类。我们可以更有效、更容易地划分它们。
• 另一个好处是……所有表现元素都可以由设计师独立分离和处理，而不会影响应用程序的实际逻辑。

然而，它是 不是必须做的事 .这只是一种使开发人员的工作更轻松的方法。此外，这并不总是可能的，因为有时，将组件分类为智能或愚蠢可能太难了，但我更喜欢新名称作为演示和状态。换句话说，如果您无法做出决定，请不要担心，因为现在做出选择可能还为时过早。

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明

本文链接：https://www.qanswer.top/38662/31302211