携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第5天，点击查看活动详情
最近翻阅 React 官方文档提到的，单独领出来说一下
PS：跟 System on Chip 系统级芯片（片上系统）无关哈，我们今天说的不是这个。
好的架构必须使每个关注点相互分离，也就是说系统中的一个部分发生了变化，不会影响其他部分。即使需要改变，也能够清晰地识别出那些部分需要改变。如果需要扩展架构，影响将会最小化，已经可以工作的每个部分都将继续工作。
Iuar Jacobson, 《AOSD》
概述 📖
在计算机科学中，关注点分离（Separation of Concerns, SoC） 是将计算机程序分成不同部分的设计原则。每个部分都涉及一个单独的关注点，即一组影响计算机程序代码的信息。关注点可以像“应用程序的硬件细节”一样笼统，也可以像“要实例化的类的名称”一样具体。能够很好地体现 SoC 的程序称为模块化程序。
通过将信息封装在具有良好定义接口的代码段中，可以实现模块化，从而实现关注点分离。封装是信息隐藏的一种手段。信息系统中的分层设计是关注点分离的另一个体现（例如，表示层、业务逻辑层、数据访问层、持久层）。
关注点分离为程序设计、部署或使用的某些方面带来更多的自由度。其中的共同点是增加了简化和维护代码的自由度。当关注点分离良好时，模块升级、复用和独立开发的机会就会更多。将模块的实现细节隐藏在开放的接口后面，而无需了解其他部分的实现细节，也不必对其他部分进行相应的更改。模块还可以公开不同版本的接口，这增加了以零碎方式升级复杂系统的自由度，而不会临时丢失功能。
关注点分离作为一种抽象形式。与大多数抽象一样，分离关注点意味着添加额外的代码接口，通常会创建更多要执行的代码。因此，尽管分离良好的关注点有很多好处，但通常会带来相关的执行消耗。但个人认为，对于复杂系统程序设计和考虑到后期维护扩展，这是值得的。
实现 🪨
由编程语言提供的模块化或面向对象编程的机制是允许开发人员提供 SoC 的机制。例如，C#、C++、Delphi和Java等面向对象的编程语言可以将关注点分离为对象，而MVC或MVP等架构设计模式可以将内容与表示分离，将数据处理（模型）与内容分离。
关注点分离也是许多其他领域的重要设计原则，例如城市规划、建筑和信息设计。目标是更有效地理解、设计和管理复杂的相互依赖的系统，以便功能可以被重用，独立于其他功能进行优化，并与其他功能的潜在故障隔离。
常见的例子包括将一个空间分隔成多个房间，这样一个房间的活动不会影响其他房间的人，并将炉子保持在一个电路上，而灯在另一个电路上，这样炉子的过载就不会关灯。带有房间的示例显示了封装，其中一个房间内的信息，例如它可能有多乱，其他房间无法得知，除非通过接口，即门。带有电路的示例表明，一个模块内部的活动（即连接了电力消费者的电路）不会影响不同模块中的活动，因此每个模块都不关心另一个模块中发生的事情。
快速总结基本方法
-
按职责分离关注点
例如MVC，MVP等，通过职责分层进行关注点分离。
-
按通用性分离关注点
不同的通用程度意味着变化的可能性不同，可以将组成系统的元素分成技术通用部分、领域通用部分和特定应用部分。技术通用部分具有广泛的通用性，领域通用部分在对应领域具有普遍通用性。特定应用部分一般没有通用性。
-
按粒度级别分离关注点
在软件架构设计中，可以优先考虑大粒度的子系统和在集成系统中的互操作，忽略子系统的进一步分离。
关注点分离的由来 📄
关注点分离一词可能是Edsger W. Dijkstra在他 1974 年的论文“论科学思想的作用”中创造的。
十五年后，很明显，关注点分离这个术语正在成为一个公认的思想。1989 年，Chris Reade 写了一本名为 Elements of Functional Programming 的书，描述了关注点分离：
关于程序员必须同时做的几件事，即，
- 描述要计算的内容；
- 将计算顺序组织成小步骤；
- 在计算过程中组织内存管理。
举些现在栗子 🌰
计网当中的 Internet 协议栈
应用层协议 SMTP 关心通过可靠的传输服务（通常是TCP）进行电子邮件会话的所有细节，但丝毫不关心传输服务如何使该服务可靠。同样，TCP 也不关心数据包的路由，它是在Internet 层处理的。
前端三件套 HTML、CSS、JavaScript
HTML、CSS 和 JavaScript 是用于网页和网站开发的互补语言。HTML 主要用于组织网页内容，CSS 用于定义内容呈现样式，而 JS 定义内容如何与用户交互和行为，即结构层，表现层、行为层。从历史上看，情况并非如此：在引入 CSS 之前，HTML 执行定义语义和样式的职责。
总结一下 🛳️
关注点分离设计希望系统中的一个部分发生了变化，不会影响其他部分。即使需要改变，也能够清晰地知道那些部分需要改变。如果需要扩展架构，将影响最小化，而已经可以工作的每个部分都将继续工作。
关于在React中的实践，推荐大家去看：使用多个 Effect 实现关注点分离，使用过Vue的同学也可以结合Vue3 Compostion API 与 Vue2对比思考，Vue官方文档也有哦，关键词逻辑关注点。
参考：
