在众多项目中，React代码的维护经常变得棘手。其中一个常见问题是：将业务逻辑直接嵌入通用组件中，导致通用组件与业务逻辑紧密耦合，使其失去“通用性”。这种做法使通用组件过于依赖具体业务逻辑，导致代码难以维护和扩展。
示例：屎山是如何逐步堆积的
让我们看一个例子：我们在业务组件 PageA 和 PageB 中都使用了通用组件 Card。
function PageA() {
return (
{/* ... */}
{listA.map(({ title, content }) => )}
>
)
}
function PageB() {
return (
{/* ... */}
{listB.map(({ title, content }) => )}
>
)
}
function Card({ title, content }) {
return (
{title}
{content}
)
}
某一天，出现了一个新需求：在手机端的所有页面都需要显示 Footer。于是，代码被修改如下：
function PageA({ isMobile }) {
return (
{/* ... */}
{listA.map(({ title, content }) => (
))}
>
)
}
function PageB({ isMobile }) {
return (
{/* ... */}
{listB.map(({ title, content }) =&g服务器托管网t; (
))}
>
)
}
function Card({ title, content, isMobile }) {
return (
{title}
{content}
{isMobile && }
)
}
随后的某一天，小张接手了这个项目，又有新需求：只有第偶数个 Card 才应该显示 Footer。于是，秉持着最小影响范围的原则，代码被改成了这样：
function PageA({ isMobile }) {
return (
{/* ... */}
{listA.map(({ title, content }, index) => (
)
)}
>
)
}
function PageB({ isMobile }) {
return (
{/* ... */}
{listB.map(({ title, content }, index) => (
)
)}
>
)
}
function Card({ title, content, isMobile, index }) {
return (
{title}
{content}
{isMobile && index % 2 === 1 && }
)
}
随后的某一天，小王接手了这个项目，又有新需求。秉持着最小影响范围的原则……
分析原因
乍看之下，每次修改都是“局部最优”的，尽量修改最少的代码以限制影响范围，以确保在添加新功能时不引入错误。然而，实际上，由于每次“偷懒”，我们都违反了原则，导致代码变得越来越混乱。
原则
分离关注点原则（Separation of Concerns）是计算机科学和软件工程的基本设计原则之一，旨在帮助程序员更好地组织和管理复杂的系统。该原则的核心思想是将大型系统或程序分解为多个互相独立的组件，每个组件负责解决特定的关注点或任务，而不会受到其他关注点的干扰。这有助于提高代码的可维护性、可扩展性和可重用性。
开放-封闭原则（Open-Closed Principle，OCP）：
这个原则表明软件实体（类、模块、函数等）应该对扩展开放，但对修改关闭。这意味着应该通过扩展现有的代码来引入新功能，而不是修改已有的代码。这有助于减少代码的风险，因为修改现有代码可能导致不可预测的副作用。
重构
将上述原则应用于这个示例中：通用组件应该只了解与自身相关的信息，Card 组件只关心何时显示 Footer，而不关心它在何处使用以及是否为第偶数个。让我们重构代码：
function PageA({ isMobile }) {
return (
{/* ... */}
{listA.map(({ title, content }, index) => (
)
)}
>
)
}
function PageB({ isMobile }) {
return (
{/* ... */}
{listB.map(({ title, content }, index) => (
)
)}
>
)
}
function Card({ title, content, showFooter }) {
return (
{title}
{con服务器托管网tent}
{showFooter && }
)
}
通过这次重构，我们成功解耦了通用组件和业务逻辑，使代码更易于维护和扩展。
服务器托管，北京服务器托管，服务器租用 http://www.fwqtg.net
机房租用，北京机房租用，IDC机房托管， http://www.fwqtg.net
相关推荐: Linux常用命令
一、目录查看创建切换移动压缩删除
二、查看磁盘空间占用
三、进程查看杀掉
四、文件软链接硬链接Linux常用命令 一、目录查看创建切换移动压缩删除 1.1 查看目录结构 – ls 1.2 创建修改文件目录 – touch 1.2.1 创建目录 – mkdir 1.2.2 创建文件 – touch 1.3 切换目录 – cd 1.4 目录压缩解压 （文件…
