清理组件的 3 种方法
source link: http://mp.weixin.qq.com/s?__biz=MzI0MDYzOTEyOA%3D%3D&%3Bmid=2247484339&%3Bidx=2&%3Bsn=863455450ddfef9c3a56266a274a3d00
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
原文：michaelnthiessen.com
编写可维护的代码并不容易。这件事学起来难，教别人如何做更难。大多数时候，这是个熟能生巧的事情。但是历年来，我学习到的能让你快速掌握的参考资料还是比较少。
在你全面学习相关知识之前，至少记住这里列出的三个方面：
1. 减少副作用
副作用很糟糕……有时却是必不可少的。
它们造成了应用中大量的复杂性，所以减少它们刻不容缓。
但你又无法完全摆脱副作用，没有它们你的应用将做不了任何有意义的事情。
副作用（side effects）指的是任何能改变其直接作用域之外状态的东西。如果你有一个函数执行了某些计算并在内部跟踪计算结果的中间值，这并不算做副作用；但如果该函数更新了整个组件的状态，那就是有副作用了。
刚才我提到了复杂性，这就是其原因：如果到处都能更新你的状态，就难以追踪到底哪里发生了什么。当你发现了一个由此引发的bug，追根溯源真的难上加难。
更少的副作用 === 更易理解的代码。
2. 使用更多的 computed 属性
嗯痕……我最稀罕的特性就是 Vue 中的计算值了（译注：此处谈论的内容也是通用的，比如在 React 中可用 MobX 等实现）。
如果将组件中的一部分状态和属性转换为计算属性，你就已经施展了清洁组件的魔法。
当然，这不是真实的魔法，但或许你的组件里就真实的存在不恰当的状态和属性。每次将它们替换为派生出来的属性，也就是基于核心状态和属性计算出来，你就又少了一件需要操心的事情。
3. 考虑“组件接缝”
当我还是个孩子的时候，我和我最好的小伙伴花了大把时间在碎石游戏上。看着石头分裂成一小块一小块的让我们乐此不疲，那些石头似乎总是“想要”以某种特定方式碎开。
所有代码也有类似的趣味。有一些特定的接缝贯穿在代码的运行中，自然地确定了代码“想要”被分割的走向。就像一件衬衫是由若干片布料缝合起来的一样，你的组件也有这样的一些接缝。试着找到它们，以将一个大的组件拆分成若干小组件吧。
道理我都懂了，但是。。。读读下面这些吧！
--End--
查看更多前端好文
请搜索 fewelife 关注公众号
转载请注明出处
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK