通过分层架构提高 React 组件的可维护性

佚名 2024-02-12 原文

可维护性是我们在实际开发系统时，需要认真考虑的的一个重要方面。它决定了系统修改、修复和更新的难易程度。只有当所有组件都得到良好维护并且软件项目没有什么不同时，系统才会以最佳方式运行。

如果您的项目具有可维护高的良好架构，开发人员可以轻松了解项目并进行准确的更改以获得性能，同时缩短开发、测试和发布周期。

项目的架构是决定项目组件维护难易程度的关键因素。分层架构是为 React 等前端框架编写可维护组件的最佳架构之一。

因此，本文将讨论如何使用分层架构在 React 中编写易于维护的组件以及您应该避免的错误。

什么是分层架构，为什么要使用它？

分层架构是一种软件设计模式，它将应用程序组织成多个层或层，每个层都有一组特定的职责。这些层按层次组织，较高层依赖较低层的功能。大多数分层架构具有三个或四个标准层。

在分层架构中，每一层都可以独立开发和测试，改变一层不会影响其他层。这种分离允许开发人员创建更易于维护和更新的有组织、模块化和可扩展的系统。

此外，这种方法允许对应用程序进行更改而无需重写大部分代码，从而降低引入错误或破坏现有功能的风险。

让我们以 3 层架构为例，看看它如何改善开发体验。

三层架构

顾名思义，三层架构由三个主要层组成：

表现层
业务逻辑层
数据访问层

表示层管理用户交互并将数据呈现给用户。该层可以采用 Web 界面、桌面应用程序或移动应用程序的形式。它与业务逻辑层通信以执行操作和检索数据。

业务逻辑层负责实施应用程序的业务规则和工作流。该层应该完全独立于表示层并且不了解用户界面。它应该包含所有应用程序逻辑和算法，并与数据访问层通信以检索所需的数据。

数据访问层负责与应用程序的数据源进行交互。该层负责数据的检索和存储，应与业务逻辑层分开。它应该包括与数据库访问、API 调用和其他外部数据源相关的所有代码。

如何在 React 中使用三层架构

现在让我们看看如何将分层架构原则应用到我们的 React 应用程序中。

数据访问层

该层通常实现为一组实用函数，可以被各种自定义 Hooks 重用。考虑以下用于检索 API 数据的 fetchData() 实用程序函数。

export default async function fetchData() {
  const response = fetch('https://jsonplaceholder.typicode.com/users/1').then(
    (res) => {
      if (res.ok) return res.json();
      return Promise.reject(res);
    }
  );
  return response;
}

每当您需要检索 API 数据而无需编写重复代码时，都可以在业务逻辑层中使用此功能。您可以用道具替换获取 URL，并随着项目的增长根据需要修改功能。在测试 API 调用时，您可以使用模拟数据调用此函数以简化过程。

业务逻辑层

该层通常实现为一组可以跨组件重用的自定义 Hook。考虑以下 useUserData() 自定义 Hook，它用于检索用户数据。

import React from "react";
import fetchData from "../util/fetchData";


const useUserData = () => {
  const [userData, setUserData] = useState([]);
  useEffect(() => {
    fetchData()
      .then((data) => setUserData(data))
      .catch((res) => console.error(res.status));
  }, []);
  return [userData];
};


export default useUserData;

如您所见，此处调用了数据访问层的 fetchData() 函数。为了使这个钩子更易于重用，将 URL 路径作为 prop 传递给自定义 Hook，并将其传递给 fetchData() 函数。

表示层

表示层应该包含负责呈现数据和响应 React 应用程序中的用户操作的所有 UI 组件。这些组件中不应有业务逻辑或数据获取代码。

查看下面的 UserProfile 组件示例。

import React from "react";
import useUserData from "./customHooks/useUserData";


const UserProfile = () => {
  const [userData] = useUserData();
  return (
    <div>
      {userData.id ? (
        <div>
          <ul> {userData.name} </ul>
          <ul> {userData.email} </ul>
        </div>
      ) : (
        <p>Loading data...</p>
      )}
    </div>
  );
}


export default UserProfile;

组件中使用useUserData()自定义Hook与业务逻辑层通信，获取用户数据展示给用户。除了返回函数，唯一应该包含在 UI 组件中的是业务逻辑层的函数调用，如本例所示。

这为您提供了清晰干净的 UI 组件，使查找和修复与 UI 相关的错误变得更加容易。下面的存储库链接将带您到完整的 React 分层架构示例项目。

GitHub：https://github.com/Manusha17/layered-architecture-example-project

使用分层架构时要避免的错误

过度工程——保持简单且可扩展的架构，避免使用不遵循 React 模式的设计，例如基于继承的设计。
紧耦合——当层紧密耦合时，在不影响其他层的情况下更改一个层可能很困难。通过使用适当的模式和技术（例如依赖注入和接口）来减少耦合。
忽略性能——如果实施不当，分层架构会影响应用程序性能。在优化架构以提高性能时，请考虑代码拆分、延迟加载和缓存等因素。
糟糕的命名约定——为你的层、组件和函数使用清晰一致的命名约定。否则，从长远来看，开发人员将很难理解和维护代码。
缺乏测试——每一层都应该进行彻底的测试，以确保它按预期工作。未能测试每一层可能会导致最终应用程序中出现错误和其他问题。
缺乏凝聚力——每一层都具有高度的凝聚力。内聚性是指一个层内的功能和职责的相关程度。低内聚性会导致代码难以理解和维护。

结论

作为 Web 开发框架，React 不强制执行特定的架构。因此，开发人员有责任选择合适的体系结构，从长远来看可以提高代码的可维护性。本文探讨了使用分层架构来创建高度可维护的 React 组件，以及我们应该避免的常见错误有哪些。

我希望本文能帮助您使用分层架构构建维护良好的可扩展 React 应用程序。

感谢您的阅读。

有关通过分层架构提高 React 组件的可维护性的更多相关文章

ruby - 通过 rvm 升级 rubygems 的问题 - 2
尝试通过RVM将RubyGems升级到版本1.8.10并出现此错误:$rvmrubygemslatestRemovingoldRubygemsfiles...Installingrubygems-1.8.10forruby-1.9.2-p180...ERROR:Errorrunning'GEM_PATH="/Users/foo/.rvm/gems/ruby-1.9.2-p180:/Users/foo/.rvm/gems/ruby-1.9.2-p180@global:/Users/foo/.rvm/gems/ruby-1.9.2-p180:/Users/foo/.rvm/gems/rub
ruby - 通过 erb 模板输出 ruby 数组 - 2
我正在使用puppet为ruby程序提供一组常量。我需要提供一组主机名，我的程序将对其进行迭代。在我之前使用的bash脚本中，我只是将它作为一个puppet变量hosts=>"host1,host2"我将其提供给bash脚本作为HOSTS=显然这对ruby不太适用——我需要它的格式hosts=["host1","host2"]自从phosts和putsmy_array.inspect提供输出["host1","host2"]我希望使用其中之一。不幸的是，我终其一生都无法弄清楚如何让它发挥作用。我尝试了以下各项:我发现某处他们指出我需要在函数调用前放置“function_”……这
ruby - 通过 ruby 进程共享变量 - 2
我正在编写一个gem，我必须在其中fork两个启动两个webrick服务器的进程。我想通过基类的类方法启动这个服务器，因为应该只有这两个服务器在运行，而不是多个。在运行时，我想调用这两个服务器上的一些方法来更改变量。我的问题是，我无法通过基类的类方法访问fork的实例变量。此外，我不能在我的基类中使用线程，因为在幕后我正在使用另一个不是线程安全的库。所以我必须将每个服务器派生到它自己的进程。我用类变量试过了，比如@@server。但是当我试图通过基类访问这个变量时，它是nil。我读到在Ruby中不可能在分支之间共享类变量，对吗？那么，还有其他解决办法吗？我考虑过使用单例，但我不确定这是
ruby - 通过 RVM (OSX Mountain Lion) 安装 Ruby 2.0.0-p247 时遇到问题 - 2
我的最终目标是安装当前版本的RubyonRails。我在OSXMountainLion上运行。到目前为止，这是我的过程:已安装的RVM$\curl-Lhttps://get.rvm.io|bash-sstable检查已知(我假设已批准)安装$rvmlistknown我看到当前的稳定版本可用[ruby-]2.0.0[-p247]输入命令安装$rvminstall2.0.0-p247注意:我也试过这些安装命令$rvminstallruby-2.0.0-p247$rvminstallruby=2.0.0-p247我很快就无处可去了。结果:$rvminstall2.0.0-p247Search
ruby-on-rails - Enumerator.new 如何处理已通过的 block ？ - 2
我在理解Enumerator.new方法的工作原理时遇到了一些困难。假设文档中的示例:fib=Enumerator.newdo|y|a=b=1loopdoy[1,1,2,3,5,8,13,21,34,55]循环中断条件在哪里，它如何知道循环应该迭代多少次(因为它没有任何明确的中断条件并且看起来像无限循环)？最佳答案 Enumerator使用Fibers在内部。您的示例等效于:require'fiber'fiber=Fiber.newdoa=b=1loopdoFiber.yieldaa,b=b,a+bendend10.times.m
ruby - 寻找通过阅读代码确定编程语言的ruby gem？ - 2
几个月前，我读了一篇关于rubygem的博客文章，它可以通过阅读代码本身来确定编程语言。对于我的生活，我不记得博客或gem的名称。谷歌搜索“ruby编程语言猜测”及其变体也无济于事。有人碰巧知道相关gem的名称吗？最佳答案是这个吗:http://github.com/chrislo/sourceclassifier/tree/master 关于ruby-寻找通过阅读代码确定编程语言的rubygem？，我们在StackOverflow上找到一个类似的问题：
通过 MacPorts 的 RubyGems 是个好主意吗？ - 2
从MB升级到新的MBP后，Apple的迁移助手没有移动我的gem。我这次是通过macports安装rubygems，希望在下次升级时避免这种情况。有什么我应该注意的陷阱吗？最佳答案如果你想把你的gems安装在你的主目录中(在传输过程中应该复制过来，作为一个附带的好处，会让你以你自己的身份运行geminstall，而不是root)，将gemhome:键设置为您在~/.gemrc中的主目录中的路径. 关于通过MacPorts的RubyGems是个好主意吗？，我们在StackOverf
ruby - 通过 RVM 安装 Ruby 1.9.2 永远行不通! - 2
当我执行>rvminstall1.9.2时一切顺利。然后我做>rvmuse1.9.2也很顺利。但是当涉及到ruby-v时..sam@sjones:~$rvminstall1.9.2/home/sam/.rvm/rubies/ruby-1.9.2-p136,thismaytakeawhiledependingonyourcpu(s)...ruby-1.9.2-p136-#fetchingruby-1.9.2-p136-#downloadingruby-1.9.2-p136,thismaytakeawhiledependingonyourconnection...%Total%Rece
ruby - 可以通过多少种方法将方法添加到 ruby 对象？ - 2
当谈到运行时自省(introspection)和动态代码生成时，我认为ruby没有任何竞争对手，可能除了一些lisp方言。前几天，我正在做一些代码练习来探索ruby的动态功能，我开始想知道如何向现有对象添加方法。以下是我能想到的3种方法:obj=Object.new#addamethoddirectlydefobj.new_method...end#addamethodindirectlywiththesingletonclassclass这只是冰山一角，因为我还没有探索instance_eval、module_eval和define_method的各种组合。是否有在线/离线资
ruby - 检查是否通过 require 执行或导入了 Ruby 程序 - 2
如何检查Ruby文件是否是通过“require”或“load”导入的，而不是简单地从命令行执行的？例如:foo.rb的内容:puts"Hello"bar.rb的内容require'foo'输出:$./foo.rbHello$./bar.rbHello基本上，我想调用bar.rb以不执行puts调用。最佳答案将foo.rb改为:if__FILE__==$0puts"Hello"end检查__FILE__-当前ruby文件的名称-与$0-正在运行的脚本的名称。关于ruby-检查是否