通过文件分离关注点— Dan Abramov

丹·阿布拉莫夫（Dan Abramov）最近在推特上发布了“关注分离”的漂亮观点，其中有许多子推文详细解释了该问题。 我觉得最好将这些推文提取为一个中间故事，以便社区和将来参考。

您可以在此处找到原始推文：

通过文件分开关注与通过书桌分开学校的友谊一样有效。 在没有耦合的情况下，顾虑是“分开的”：更改A不会破坏B。在没有解决耦合的情况下增加距离只会使添加错误更容易。

这并不是说将事物分成文件是没有帮助的。 它使您可以在导航的粒度和上下文切换的频率之间选择适当的平衡。 但是您的文件结构与减少耦合或分离关注点无关。

刚性锉刀结构可能有助于引入一些所需的惯性，以防止更强的耦合。 如果A和B之间有一段距离，则很难将它们清楚地耦合在一起。 但是，未来的问题*可能*需要更多的耦合！ 由于很难，所以做得不好。

每个问题都是一个多维的野兽。 维度的数量会随着需求的变化以及您对理解的发展而随时间变化。 您不能期望所有问题都适合三个（或任何数量）预定义的“维度”。

但是，这就是“框架”的作用。 他们以相同的独立“维度”来描述问题的精确度，以表达问题的子集。 如果您的许多问题似乎都具有相似的“形状”（例如“屏幕上的交互式事物”），则非常有用。

有多种方法可以解决此问题。 例如：它的初始树结构+任何事物的可能出现的级联+可以响应交互而操纵树的代码。 那是经典的HTML + CSS + JS。 然后，您意识到也许“初始树结构+操纵树的代码”不是描述动态事物的非常有用的方法。 就像您打车，司机问您转弯时指示的方向，而不是目标地址。 因此，以不同的方式分离问题可能会更有用：“在任何给定时间的树结构+如何从前一个结构更新到下一个结构”。 第二个子问题足够通用，我们可以将其隐藏在库中。 我们折叠了一个问题维度！

当然，只有在尽管需求不断变化的情况下，仍然可以将通过“框架”解决的问题分解为预定的“维度”，这才能很好地起作用。 要找到这样的“维度”，您可以从列出您希望保持不变的事情开始。

例如：UI通常不是随机的。 通常希望相同的“事物”（例如按钮）在整个应用程序中表现并保持一致。 如果通常这不是真的，那么组件就不是那么有用的抽象。

用户界面也往往相对“稳定”。 最常见的是，每个UI都具有有限的“全部功能”，可以做的事情和外观。 这使您可以将“如何填充1万个像素”的问题减少为“ 5种可能的状态是什么，以及交互作用如何改变它们”。

注意React中的动画有点难以思考吗？ （即使诸如Animated之类的命令性库提供了一个很好的逃生口！）这是因为动画使上述“稳定性”混乱，因此在所选“维度”中表达更具挑战性。

工程的一半是如何使事情顺利进行。 另一半是如何确保它随着时间的变化而保持正常运行。 这就需要以一种不仅正确的方式拆分问题，而且还需要集中注意力和短期记忆的方式来使我们的大脑容易地解决问题。

而且由于我们在编程方面的能力很差，因此在以某种方式拆分问题很有帮助时以及在某种方式下可以更好地解决某种形状的问题时，我们经常重新评估很重要。

From: https://hackernoon.com/separation-of-concerns-by-files-dan-abramov-56d0d6da842e