首页 > 编程学习 > React 组件和更好的方法

React 组件和更好的方法

发布时间:2022/9/22 11:41:45

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

Copyright © 2010-2022 mfbz.cn 版权所有 |关于我们| 联系方式|豫ICP备15888888号