清理组件的 3 种方法

2020-06-15 19:50:45 浏览数 (2)

原文:michaelnthiessen.com

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

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

1. 减少副作用

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

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

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

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

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

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

2. 使用更多的 computed 属性

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

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

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

3. 考虑“组件接缝”

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

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

0 人点赞