如何打造 Hooks 时代的高质量 React 与 Vue 组件？

本文共计3894个文字，预计阅读时间需要16分钟。

目录概述

1.组件何时？如何？

2.如何组织出的组件文件？

3.如何使用hooks抽取组件逻辑？

专题词：全局状态管理 + 概述vue和react都已全面进入hooks时代（在vue中也称其为组合）。

目录

• 概述
• 1.组件什么时候拆？怎么拆？
• 2.如何组织拆分出的组件文件？
• 3.如何用hooks抽离组件逻辑？
• 题外话：全局状态的管理

概述

vue和react都已经全面进入了hooks时代（在vue中也称为组合式api，为了方便后面统一称为hooks），然而受到以前react中类组件和vue2写法的影响，很多开发者都不能及时转换过来，以致于开发出一堆面条式代码，整体的代码质量反而不如改版以前了。

hooks组件到底应该如何写，我也曾为此迷惘过一段时间。特别我以前以react开发居多，但在转到新岗位后又变成了使用vue3开发，对于两个框架在思维方式和写法的不同上，很是花了一段时间适应。好在几个月下来，我发现二者虽然在写法上有区别之处，但思想上却大同小异。

所以在比较了两个框架的异同后，我总结出了一套通用的hooks api的抽象方式，在这里分享给大家。