清理组件的 3 种方法
编写可维护的代码并不容易。这件事学起来难，教别人如何做更难。大多数时候，这是个熟能生巧的事情。但是历年来，我学习到的能让你快速掌握的参考资料还是比较少。
在你全面学习相关知识之前，至少记住这里列出的三个方面：
1. 减少副作用
副作用很糟糕……有时却是必不可少的。
它们造成了应用中大量的复杂性，所以减少它们刻不容缓。
但你又无法完全摆脱副作用，没有它们你的应用将做不了任何有意义的事情。
副作用（side effects）指的是任何能改变其直接作用域之外状态的东西。如果你有一个函数执行了某些计算并在内部跟踪计算结果的中间值，这并不算做副作用；但如果该函数更新了整个组件的状态，那就是有副作用了。
刚才我提到了复杂性，这就是其原因：如果到处都能更新你的状态，就难以追踪到底哪里发生了什么。当你发现了一个由此引发的bug，追根溯源真的难上加难。
更少的副作用 === 更易理解的代码。
2. 使用更多的 computed 属性
嗯痕……我最稀罕的特性就是 vue 中的计算值了（译注：此处谈论的内容也是通用的，比如在 react 中可用 MobX 等实现）。
如果将组件中的一部分状态和属性转换为计算属性，你就已经施展了清洁组件的魔法。
当然，这不是真实的魔法，但或许你的组件里就真实的存在不恰当的状态和属性。每次将它们替换为派生出来的属性，也就是基于核心状态和属性计算出来，你就又少了一件需要操心的事情。
3. 考虑“组件接缝”
当我还是个孩子的时候，我和我最好的小伙伴花了大把时间在碎石游戏上。看着石头分裂成一小块一小块的让我们乐此不疲，那些石头似乎总是“想要”以某种特定方式碎开。
所有代码也有类似的趣味。有一些特定的接缝贯穿在代码的运行中，自然地确定了代码“想要”被分割的走向。就像一件衬衫是由若干片布料缝合起来的一样，你的组件也有这样的一些接缝。试着找到它们，以将一个大的组件拆分成若干小组件吧。
原文：michaelnthiessen.com
本文内容仅供个人学习、研究或参考使用，不构成任何形式的决策建议、专业指导或法律依据。未经授权，禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载，请保留原文来源信息，不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持！
