如何应用 SOLID 原则在 React 中整理代码之开闭原则

简介: SOLID 是一套原则。它们主要是关心代码质量和可维护性的软件专业人员的指导方针。

640 (5).png

SOLID 是一套原则。它们主要是关心代码质量和可维护性的软件专业人员的指导方针。


React 不是面向对象,但这些原则背后的主要思想可能是有帮助的。在本文中,我将尝试演示如何应用这些原则来编写更好的代码。


在前一篇文章中,我们讨论了单一责任原则。今天,我们将讨论 SOLID 的第二个原则: 开闭原则。


本系列其他文章



什么是开闭原则?


Robert c. Martin 认为这个原则是面向对象设计最重要的原则。但他不是第一个定义这个概念的人。Bertrand Meyer 于 1988 年在他的《面向对象软件构造》一书中写到了这一点。他解释了开放/封闭原则:


软件实体(类、模块、功能等)应该对扩展开放,但对修改关闭。


这个原则告诉您以这样一种方式来编写代码,即您能够在不更改现有代码的情况下添加其他功能。


让我们看看我们在哪里可以应用这个原则。


让我们从一个例子开始


假设我们有一个 User 组件,其中我们传递用户的详细信息,这个类的主要目的是显示该特定用户的详细信息。


这是一个很简单的开始。但是我们的生活并不是那么简单。几天后,我们的经理告诉我们系统中有三种类型的用户: SuperAdminAdmin 等等。


它们每个都有不同的信息和功能。


一个糟糕的解决方案


第一个也是显而易见的解决方案:在组件中包含一个条件,并根据不同的用户类型呈现不同的信息。


import React from 'react';
export const User = ({user}) => {
    return <>
        <div> Name: {user.name}</div>
        <div> Email: {user.email}</div>
        {
            user.type === 'SUPER_ADMIN' &&
            <div> Details about super admin</div>
        }
        {
            user.type === 'ADMIN' &&
            <div> Details about admin</div>
        }
    </>
}


你知道这里出了什么问题吗?


首先,我们的代码现在是凌乱的。


其次,如果我们需要其他类型的用户怎么办?


然后,我们需要进入 User.js,为特定类型的用户添加另一个条件。


这明显违反了开闭原则,因为我们不允许更改 User 组件内部的代码。


解决方案是什么?


在这个场景中我们可以应用两种主要的技术:


  1. 高阶组件(HOC)


  1. 组件组合(Component composition)


在可能的情况下,最好采用第二种方法,但是在某些情况下,有必要使用 HOC。

现在,我们将使用 Facebook 推荐的一种技术,称为组件组合


让我们创建单独的用户组件


现在,我们需要以这样一种方式设计代码,即不需要在 User.js 组件中添加条件。让我们为 SuperAdmin 创建一个单独的组件:


import React from 'react';
import {User} from "./User";
export const SuperAdmin = ({user}) => {
    return <>
        <User user={user} />
        <div> This is super admin user details</div>
    </>
}


类似地,另一个是针对 Admin 用户的:


import React from 'react';
import {User} from "./User";
export const Admin = ({user}) => {
    return <>
        <User user={user} />
        <div> This is admin user details</div>
    </>
}


现在我们的 App.js 文件变成了:


import React from 'react';
import Admin from './Admin'
import SuperAdmin from './SuperAdmin'
export default function App = () =>{
  const user = {}
  const userByTypes = {
    'admin' : <Admin /> ,
    'superadmin' : <SuperAdmin />
  }
  return <div>
    {userByTypes[`${user.type}`]}
  <div/>
}


现在我们可以根据需要创建尽可能多的用户类型。我们针对特定用户的逻辑是封装的,因此我们不需要为了任何额外的修改而重新检查代码。


有些人可能会说,我们正在不必要地增加文件数量。当然,您可以暂时保持原样,但是随着应用程序的复杂性增加,您肯定会感到痛苦。


注意


SOLID 是一套原则。它们并不是强制性的,您必须应用于每个场景。作为一个经验丰富的开发人员,您应该在代码长度和可读性之间找到一个很好的平衡。


要过分执着于这些原则。事实上,有一句名言可以解释这些情况:


Too Much SOLID


所以知道这些原则是好的,但是你必须保持平衡。对于一个或两个额外的字段,您可能不需要这些组合,但是将它们分开肯定会有长远的帮助。


总结


了解这些原则会让你走很长的路,因为在一天结束的时候,一段好的代码才是最重要的,而且没有单一的方法来做事情。


本文为译文,原文链接:https://betterprogramming.pub/applying-the-open-closed-principle-to-write-clean-react-components-4e4514963e40


目录
相关文章
|
1月前
|
前端开发
深入解析React Hooks:构建高效且可维护的前端应用
本文将带你走进React Hooks的世界,探索这一革新特性如何改变我们构建React组件的方式。通过分析Hooks的核心概念、使用方法和最佳实践,文章旨在帮助你充分利用Hooks来提高开发效率,编写更简洁、更可维护的前端代码。我们将通过实际代码示例,深入了解useState、useEffect等常用Hooks的内部工作原理,并探讨如何自定义Hooks以复用逻辑。
|
23天前
|
监控 前端开发 JavaScript
确保 React 应用在出现错误时仍然能够保持响应式
【10月更文挑战第25天】可以有效地确保React应用在出现错误时仍然能够保持响应式,为用户提供更加稳定、可靠的使用体验。在实际应用中,需要根据项目的具体情况和需求,综合运用这些方法,并不断优化和完善错误处理机制,以适应不断变化的业务场景和用户需求
|
1月前
|
前端开发 JavaScript 测试技术
React 高阶组件 (HOC) 应用
【10月更文挑战第16天】高阶组件(HOC)是 React 中一种复用组件逻辑的方式,通过接受一个组件并返回新组件来实现。本文介绍了 HOC 的基础概念、核心功能和常见问题,包括静态方法丢失、ref 丢失、多个 HOC 组合和 props 冲突的解决方案,并提供了具体的 React 代码示例。通过本文,读者可以更好地理解和应用 HOC,提高代码的复用性和可维护性。
60 8
|
1月前
|
JavaScript 前端开发
使用 React 和 Redux 构建动态图表应用
【10月更文挑战第3天】使用 React 和 Redux 构建动态图表应用
|
1月前
|
JavaScript 前端开发
使用 React 和 Redux 构建一个计数器应用
【10月更文挑战第3天】使用 React 和 Redux 构建一个计数器应用
|
2月前
|
前端开发 JavaScript 区块链
react18函数组件+antd使用指南-使用代码集合以及报错记录汇总
本文介绍了多个React开发中常见的问题及其解决方案,包括但不限于:1)`useForm`实例未连接到任何`Form`元素的警告及解决方法;2)监听页面滚动事件的实现方式;3)React 18与antd 5.8.6中定制主题的方法;4)React结合antd 4.x版本自定义主题色的步骤;5)解决`ResizeObserver loop`相关报错的技巧;6)处理React设计表单时遇到的CDN资源加载失败问题;7)解决onClick事件传参问题;8)修复类型错误等。每部分均提供详细分析与实用代码示例,帮助开发者快速定位并解决问题。
48 2
|
1月前
|
设计模式 SQL 前端开发
使用 GraphQL 和 React 构建动态前端应用
【10月更文挑战第2天】使用 GraphQL 和 React 构建动态前端应用
50 0
|
3月前
|
开发者 自然语言处理 存储
语言不再是壁垒:掌握 JSF 国际化技巧,轻松构建多语言支持的 Web 应用
【8月更文挑战第31天】JavaServer Faces (JSF) 框架提供了强大的国际化 (I18N) 和本地化 (L10N) 支持,使开发者能轻松添加多语言功能。本文通过具体案例展示如何在 JSF 应用中实现多语言支持,包括创建项目、配置语言资源文件 (`messages_xx.properties`)、设置 `web.xml`、编写 Managed Bean (`LanguageBean`) 处理语言选择,以及使用 Facelets 页面 (`index.xhtml`) 显示多语言消息。通过这些步骤,你将学会如何配置 JSF 环境、编写语言资源文件,并实现动态语言切换。
42 0
|
3月前
|
开发者 搜索推荐 Java
超越传统:JSF自定义标签库如何成为现代Web开发的个性化引擎
【8月更文挑战第31天】JavaServer Faces(JSF)框架支持通过自定义标签库扩展其内置组件,以满足特定业务需求。这涉及创建`.taglib`文件定义标签库及组件,并实现对应的Java类与渲染器。本文介绍如何构建和应用JSF自定义标签库,包括定义标签库、实现标签类与渲染器逻辑,以及在JSF页面中使用这些自定义标签,从而提升代码复用性和可维护性,助力开发更复杂且个性化的Web应用。
73 0
|
3月前
|
前端开发 Java UED
瞬间变身高手!JSF 与 Ajax 强强联手,打造极致用户体验的富客户端应用,让你的应用焕然一新!
【8月更文挑战第31天】JavaServer Faces (JSF) 是 Java EE 标准的一部分,常用于构建企业级 Web 应用。传统 JSF 应用采用全页面刷新方式,可能影响用户体验。通过集成 Ajax 技术,可以显著提升应用的响应速度和交互性。本文详细介绍如何在 JSF 应用中使用 Ajax 构建富客户端应用,并通过具体示例展示 Ajax 在 JSF 中的应用。首先,确保安装 JDK 和支持 Java EE 的应用服务器(如 Apache Tomcat 或 WildFly)。
44 0