vue 和 react 都已经全面进入了 hooks 时代（在 vue 中也称为组合式 api，为了方便后面统一称为 hooks），然而受到以前 react 中类组件和 vue2 写法的影响，很多开发者都不能及时转换过来，以致于开发出一堆面条式代码，整体的代码质量反而不如改版以前了。
hooks 组件到底应该如何写，我也曾为此迷惘过一段时间。特别我以前以 react 开发居多，但在转到新岗位后又变成了使用 vue3 开发，对于两个框架在思维方式和写法的不同上，很是花了一段时间适应。好在几个月下来，我发现二者虽然在写法上有区别之处，但思想上却大同小异。
所以在比较了两个框架的异同后，我总结出了一套通用的 hooks api 的抽象方式，在这里分享给大家。如果您有不同意见欢迎在评论区指正。
一个组件内部的所有代码——无论 vue 还是 react——都可以抽象成以下几个部分:
单独拆分这三块并不难，难的是一个组件可能写得特别复杂，里面可能包含了多个视图，每个视图相互之间又有交互；同时又可能包含多个业务逻辑，多个业务的函数和变量杂乱无章地随意放置，导致后续维护的时候要在代码之间反复横跳。
要写出高质量的组件，可以思考以下几个问题：
一个常见的误区是，只有需要复用的时候才去拆分组件，这种看法显然过于片面了。你可以思考一下，自己是如何抽象一个函数的，你只会在代码需要复用的时候才抽出一个函数吗？显然不是。因为函数不仅有代码复用的功能，还具有一定的描述性质以及代码封闭性。这种特性使得我们看到一个函数的时候，不必关注代码细节，就能大概知道这部分代码是干啥的。
我们还可以再用函数将一部分函数组合起来，形成更高层级的抽象。按国内流行的说法，高层级的抽象被称为粗粒度，低层级的抽象被称为细粒度，不同粗细粒度的抽象可以称它们为不同的抽象层级。并且一个理想的函数内部，一般只会包含同一抽象层级的代码。
组件的拆分也可以遵循同样的道理。我们可以按照当前的结构或者功能、业务，将组件拆分为功能清晰且单一、与外部耦合程度低的组件 (即所谓高内聚，低耦合)。如果一个组件里面干了太多事，或者依赖的外部状态太多，那么就不是一个容易维护的组件了。
然而，为了保持组件功能单一，我们是不是要将组件拆分得特别细才可以呢？事实并非如此。因为上面说过，抽象是有粗细粒度之分的，也许一个组件从较细的粒度来讲功能并不单一，但是从较粗的粒度来说，可能他们的功能就是单一的了。例如登录和注册是两个不同的功能，但是你从更高层级的抽象来看，它们都属于用户模块的一部分。
所以是否要拆分组件，最关键还是得看复杂度。如果一个页面特别简单，那么不进行拆分也是可以，有时候拆分得过于细可能反而不利于维护。
如何判断一个组件是否复杂？恐怕这里不能给出一个准确的答案，毕竟代码的实现方式千奇百怪，很难有一个机械的标准评判。但是我们不妨站在第三方角度看看自己的代码，如果你是一个工作一年的程序员，是否能比较容易地看懂这里的代码？如果不能就要考虑进行拆分了。如果你非要一个机械的判断标准，我建议是代码控制在 200 行内。
总结一下，拆分组件的时候可以参考下面几个原则：