清理组件的 3 种方法

原文：michaelnthiessen.com

编写可维护的代码并不容易。这件事学起来难，教别人如何做更难。大多数时候，这是个熟能生巧的事情。但是历年来，我学习到的能让你快速掌握的参考资料还是比较少。

在你全面学习相关知识之前，至少记住这里列出的三个方面：

1. 减少副作用

副作用很糟糕……有时却是必不可少的。

它们造成了应用中大量的复杂性，所以减少它们刻不容缓。

但你又无法完全摆脱副作用，没有它们你的应用将做不了任何有意义的事情。

副作用（side effects）指的是任何能改变其直接作用域之外状态的东西。如果你有一个函数执行了某些计算并在内部跟踪计算结果的中间值，这并不算做副作用；但如果该函数更新了整个组件的状态，那就是有副作用了。

刚才我提到了复杂性，这就是其原因：如果到处都能更新你的状态，就难以追踪到底哪里发生了什么。当你发现了一个由此引发的bug，追根溯源真的难上加难。

更少的副作用 === 更易理解的代码。

2. 使用更多的 computed 属性

嗯痕……我最稀罕的特性就是 Vue 中的计算值了（译注：此处谈论的内容也是通用的，比如在 React 中可用 MobX 等实现）。

如果将组件中的一部分状态和属性转换为计算属性，你就已经施展了清洁组件的魔法。

当然，这不是真实的魔法，但或许你的组件里就真实的存在不恰当的状态和属性。每次将它们替换为派生出来的属性，也就是基于核心状态和属性计算出来，你就又少了一件需要操心的事情。

3. 考虑“组件接缝”

当我还是个孩子的时候，我和我最好的小伙伴花了大把时间在碎石游戏上。看着石头分裂成一小块一小块的让我们乐此不疲，那些石头似乎总是“想要”以某种特定方式碎开。

所有代码也有类似的趣味。有一些特定的接缝贯穿在代码的运行中，自然地确定了代码“想要”被分割的走向。就像一件衬衫是由若干片布料缝合起来的一样，你的组件也有这样的一些接缝。试着找到它们，以将一个大的组件拆分成若干小组件吧。