”工欲善其事,必先利其器。“—孔子《论语.录灵公》
首页 > 编程 > React 应用程序的基本设计模式:升级您的组件游戏

React 应用程序的基本设计模式:升级您的组件游戏

发布于2024-11-08
浏览:473

Essential Design Patterns for React Apps: Leveling Up Your Component Game

如果您已经进入 React 世界一段时间,您可能听说过“这只是 JavaScript”这句话。虽然这是事实,但这并不意味着我们不能从一些经过验证的模式中受益,使我们的 React 应用程序更易于维护、可重用并且使用起来更加愉快。让我们深入研究一些基本的设计模式,这些模式可以让你的 React 组件从“meh”到“marvelous”!

为什么设计模式在 React 中很重要

在我们开始之前,让我们解决房间里的大象:为什么要费心设计模式呢?好吧,我的 React 爱好者同胞,设计模式就像编码世界的秘方。它们是针对常见问题的经过实战检验的解决方案,可以:

  1. 使您的代码更具可读性和可维护性
  2. 促进整个应用程序的可重用性
  3. 用优雅的解决方案解决复杂问题
  4. 帮助您更有效地与其他开发者沟通想法

现在我们已经达成共识,让我们探索一些模式,让您的 React 组件比刚打蜡的跑车更加闪亮!

1. 组件组合模式

React 的组件模型本身就已经是一个强大的模式,但通过组合更进一步可以带来更灵活和可重用的代码。

// Instead of this:
const Button = ({ label, icon, onClick }) => (
  
);

// Consider this:
const Button = ({ children, onClick }) => (
  
);

const IconButton = ({ icon, label }) => (
  
);

为什么它很棒:

  • 更灵活和可重用的组件
  • 更容易定制和扩展
  • 遵循单一职责原则

专业提示:将您的组件视为乐高积木。它们的模块化程度和可组合性越强,您可以构建的结构就越令人惊叹!

2. 容器/展示模式

此模式将组件的逻辑与其表示分离,使其更容易推理和测试。

// Container Component
const UserListContainer = () => {
  const [users, setUsers] = useState([]);

  useEffect(() => {
    fetchUsers().then(setUsers);
  }, []);

  return ;
};

// Presentational Component
const UserList = ({ users }) => (
  
    {users.map(user => (
  • {user.name}
  • ))}
);

为何如此震撼:

  • 明确的关注点分离
  • 更容易测试和维护
  • 促进演示组件的可重用性

记住:容器就像戏剧的后台工作人员,处理所有幕后工作,而演示组件是演员,只专注于为观众提供好看的外观。

3. 高阶组件(HOC)模式

HOC 是接受组件并返回带有一些附加功能的新组件的函数。它们就像您组件的电源!

const withLoader = (WrappedComponent) => {
  return ({ isLoading, ...props }) => {
    if (isLoading) {
      return ;
    }
    return ;
  };
};

const EnhancedUserList = withLoader(UserList);

为什么很酷:

  • 允许跨不同组件重用代码
  • 保持您的组件清洁和集中
  • 可以组合进行多项增强

警告:虽然 HOC 很强大,但如果过度使用,它们可能会导致“包装地狱”。明智地使用它们!

4. 渲染道具模式

此模式涉及将函数作为 props 传递给组件,让您可以更好地控制渲染的内容。

const MouseTracker = ({ render }) => {
  const [position, setPosition] = useState({ x: 0, y: 0 });

  const handleMouseMove = (event) => {
    setPosition({ x: event.clientX, y: event.clientY });
  };

  return (
    
{render(position)}
); }; // Usage (

The mouse is at ({x}, {y})

)} />

为什么它很漂亮:

  • 高度灵活且可重用
  • 避免 HOC 问题,例如 prop 命名冲突
  • 允许基于提供的函数进行动态渲染

有趣的事实:渲染道具模式非常灵活,它甚至可以实现我们讨论过的大多数其他模式!

5. 自定义 Hook 模式

钩子是 React 中的新成员,自定义钩子允许您将组件逻辑提取到可重用函数中。

const useWindowSize = () => {
  const [size, setSize] = useState({ width: 0, height: 0 });

  useEffect(() => {
    const handleResize = () => {
      setSize({ width: window.innerWidth, height: window.innerHeight });
    };

    window.addEventListener('resize', handleResize);
    handleResize(); // Set initial size

    return () => window.removeEventListener('resize', handleResize);
  }, []);

  return size;
};

// Usage
const MyComponent = () => {
  const { width, height } = useWindowSize();
  return 
Window size: {width} x {height}
; };

为何如此神奇:

  • 允许在组件之间轻松共享状态逻辑
  • 保持您的组件清洁和集中
  • 可以替代 HOC 和渲染道具的许多用途

专业提示:如果您发现自己在多个组件中重复类似的逻辑,那么可能是时候将其提取到自定义挂钩中了!

结论:模式增强您的 React 应用程序

React 中的设计模式就像一条装满小工具的实用腰带 - 无论您的应用程序给您带来什么挑战,它们都会为您提供适合工作的工具。记住:

  1. 使用组件组合实现灵活的模块化 UI
  2. 利用容器/演示来明确关注点分离
  3. 采用 HOC 来解决跨领域问题
  4. 利用渲染道具实现终极灵活性
  5. 创建自定义 Hook 来共享状态逻辑

通过将这些模式合并到你的 React 工具包中,你将能够很好地创建更多可维护、可重用和优雅的组件。当你未来的自己(和你的队友)轻松浏览你结构良好的代码库时,他们会感谢你!

编码愉快!

版本声明 本文转载于:https://dev.to/alessandrorodrigo/essential-design-patterns-for-react-apps-leveling-up-your-component-game-l8c?1如有侵犯,请联系[email protected]删除
最新教程 更多>
  • 如何在Java列表中有效计算元素的发生?
    如何在Java列表中有效计算元素的发生?
    计数列表中的元素出现在列表 中,在java编程中,列举列表中列举元素出现的任务来自列表。为此,收集框架提供了全面的工具套件。在这种情况下,Batocurrences变量将保持值3,代表动物列表中的“ BAT”出现的数量。 &&& [此方法是简单的,可以得出准确的结果,使其成为计算列表中元素出现的理...
    编程 发布于2025-02-19
  • 可以在纯CS中将多个粘性元素彼此堆叠在一起吗?
    可以在纯CS中将多个粘性元素彼此堆叠在一起吗?
    https://webthemez.com/demo/sticky-multi-header-scroll/index.html </main> <section> display:grid; grid-template-col...
    编程 发布于2025-02-19
  • 如何使用替换指令在GO MOD中解析模块路径差异?
    如何使用替换指令在GO MOD中解析模块路径差异?
    克服go mod中的模块路径差异 coreos/bbolt:github.com/coreos/ [email受保护]:解析go.mod:模块将其路径声明为:go.etcd.io/bbolt [&bbolt `要解决此问题,您可以在go.mod文件中使用替换指令。只需在go.mod的末尾添加以...
    编程 发布于2025-02-19
  • 为什么PYTZ最初显示出意外的时区偏移?
    为什么PYTZ最初显示出意外的时区偏移?
    与pytz 最初从pytz获得特定的偏移。例如,亚洲/hong_kong最初显示一个七个小时37分钟的偏移: 差异源 考虑以下代码: < pre> import pytz 来自datetime import dateTime hk = pytz.timezone('asia/hon...
    编程 发布于2025-02-19
  • 如何修复\“常规错误:2006 MySQL Server在插入数据时已经消失\”?
    如何修复\“常规错误:2006 MySQL Server在插入数据时已经消失\”?
    How to Resolve "General error: 2006 MySQL server has gone away" While Inserting RecordsIntroduction: connect to to to Database connect to t...
    编程 发布于2025-02-19
  • 如何使用Python的记录模块实现自定义处理?
    如何使用Python的记录模块实现自定义处理?
    使用Python的Loggging Module 确保正确处理和登录对于疑虑和维护的稳定性至关重要Python应用程序。尽管手动捕获和记录异常是一种可行的方法,但它可能乏味且容易出错。解决此问题,Python允许您覆盖默认的异常处理机制,并将其重定向为登录模块。这提供了一种方便而系统的方法来捕获和...
    编程 发布于2025-02-19
  • 如何使用PHP从XML文件中有效地检索属性值?
    如何使用PHP从XML文件中有效地检索属性值?
    从php 您的目标可能是检索“ varnum”属性值,其中提取数据的传统方法可能会使您感到困惑。 - > attributes()为$ attributeName => $ attributeValue){ echo $ attributeName,'=“',$ at...
    编程 发布于2025-02-19
  • Java是否允许多种返回类型:仔细研究通用方法?
    Java是否允许多种返回类型:仔细研究通用方法?
    在java中的多个返回类型:一个误解介绍,其中foo是自定义类。该方法声明似乎拥有两种返回类型:列表和E。但是,情况确实如此吗?通用方法:拆开神秘 [方法仅具有单一的返回类型。相反,它采用机制,如钻石符号“ ”。分解方法签名: :本节定义了一个通用类型参数,E。它表示该方法接受扩展FOO类的任何...
    编程 发布于2025-02-19
  • 如何限制动态大小的父元素中元素的滚动范围?
    如何限制动态大小的父元素中元素的滚动范围?
    在交互式界面中实现垂直滚动元素的CSS高度限制 考虑一个布局,其中我们具有与可滚动的映射div一起移动的subollable map div用户的垂直滚动,同时保持其与固定侧边栏的对齐方式。但是,地图的滚动无限期扩展,超过了视口的高度,阻止用户访问页面页脚。 可以限制地图的滚动,我们可以利用CSS...
    编程 发布于2025-02-19
  • 如何克服PHP的功能重新定义限制?
    如何克服PHP的功能重新定义限制?
    克服PHP的函数重新定义限制在PHP中,多次定义一个相同名称的函数是一个no-no。尝试这样做,如提供的代码段所示,将导致可怕的“不能重新列出”错误。 //错误:“ cance redeclare foo()” 但是,PHP工具腰带中有一个隐藏的宝石:runkit扩展。它使您能够灵活地重新定义...
    编程 发布于2025-02-19
  • 如何在JavaScript对象中动态设置键?
    如何在JavaScript对象中动态设置键?
    如何为JavaScript对象变量创建动态键,尝试为JavaScript对象创建动态键,使用此Syntax jsObj['key' i] = 'example' 1;将不起作用。正确的方法采用方括号:他们维持一个长度属性,该属性反映了数字属性(索引)和一个数字属性的数量。标准对象没有模仿这...
    编程 发布于2025-02-19
  • 如何为PostgreSQL中的每个唯一标识符有效地检索最后一行?
    如何为PostgreSQL中的每个唯一标识符有效地检索最后一行?
    [2最后一行与数据集中的每个不同标识符关联。考虑以下数据: 1 2014-02-01 kjkj 1 2014-03-11 ajskj 3 2014-02-01 sfdg 3 2014-06-12 fdsa 为了检索数据集中每个唯一ID的最后一行信息,您可以在操作员上使用Postgres的有效效...
    编程 发布于2025-02-19
  • 如何在整个HTML文档中设计特定元素类型的第一个实例?
    如何在整个HTML文档中设计特定元素类型的第一个实例?
    [2单独使用CSS,整个HTML文档可能是一个挑战。 the:第一型伪级仅限于与其父元素中类型的第一个元素匹配。 :首个型 然后,以下CSS将在第一个段落中为添加的第一个段落样式班级:
    编程 发布于2025-02-19
  • 为什么使用固定定位时,为什么具有100%网格板柱的网格超越身体?
    为什么使用固定定位时,为什么具有100%网格板柱的网格超越身体?
    网格超过身体,用100%grid-template-columns 问题:考虑以下CSS和HTML: position:fixed; grid-template-columns:40%60%; grid-gap:5px; 背景:#eee; 当位置未固定时,网格将正确显示。但是,当...
    编程 发布于2025-02-19

免责声明: 提供的所有资源部分来自互联网,如果有侵犯您的版权或其他权益,请说明详细缘由并提供版权或权益证明然后发到邮箱:[email protected] 我们会第一时间内为您处理。

Copyright© 2022 湘ICP备2022001581号-3