了解 React Hooks
通过了解 React Hooks 解决的问题、设计的初衷，其实更有助于我们去了解和使用 Hooks
Hooks 是 React v16.7.0-alpha 的一项新功能提案，在 v16.8 版本中完全引入
关于Hooks的介绍
1. 使用 Class Component 的缺点
在使用 Hooks 之前，React 标准写法是类（class），缺点也很明显：
- 代码重，即便是一个简单的功能也需要从 class 开始写起；
- 很难复用逻辑（只能用 HOC），会导致组件树层级很深；
- 业务逻辑分散在组件的各个方法之中，导致重复逻辑或关联逻辑；
Redux 的作者 Dan Abramov 总结了类组件的具有以下几个缺点
- 大型组件很难拆分和重构，也很难测试；
- 业务逻辑分散在组件的各个方法之中，导致重复逻辑或关联逻辑；
- 组件类引入了复杂的编程模式，比如 render props 和高阶组件；
2. Function Component & Hooks
以函数的写法来创建组件，该组件没有生命周期、无内部状态，但Hooks正好弥补了这部分的不足
理解纯函数：一个函数的返回结果只依赖其参数，并且执行过程中没有副作用。简单来说对入参出参是明确的（值和类型可以预测）
- 使用 Hooks 必须在函数式组件中使用；
- 重复逻辑提取，更好的逻辑重用，同时只处理一件事情并且与类组件的逻辑对比更加显而易懂
- 弥补函数式组件只能作为【纯组件】，不能处理局部 state 的缺陷;Hooks 让函数组件拥有了局部 state，可以处理状态逻辑
3. 总结
- React Hooks 的意思是，组件尽量写成纯函数，如果需要外部功能和副作用，就用钩子把外部代码"钩"进来，按照约定所有钩子一律使用 use***
- Hooks 是一种函数，该函数允许您从函数式组件 “勾住(hook into)” React 状态和生命周期功能; Hooks 在类内部不起作用 - 它们允许你无需类就使用 React
- 钩子更简洁，代码量少，用起来比较”轻”；
Vue3 Hooks
1. Vue2.x中我们抽离逻辑或需要结合生命周期时会使用Mixin的方式：
2. Vue3.x中我们可以使用“组合式函数” (Composables) 得概念即：利用 Vue 组合式 API 来封装和复用有状态逻辑的函数。
代码浅析：
- 从代码中使用中可以清晰的找到鼠标位置 X,Y 来自于 useMousePosition 函数，useMousePosition 就是一个函数，使用了 composition-api 定义了响应式数据 X，Y 然后导出；
- 在 Vue2 实现类似的功能可能需要 Mixin，但 Mixin 的各种变量，方法，完全看不出从哪来的；
- 将 Mixin 拆分，把导入的操作交给了开发者，以便更好的对数据溯源；
3. 和 React Hooks 的对比
项目中的使用
- 案例 1： 路由跳转使用
- 案例 2：支付状态使用
个人理解与总结
- 本质上与 React Hooks 类似都有相同级别的逻辑组合功能，代码更加有条理和清晰， 并且解决复杂业务逻辑复用、数据可溯源的问题；
- 结合 state 或借用 composition-api 能力可以处理状态逻辑，并不仅仅是一个函数；
- 可以看做是Vue2 Api - Mixin另一种解决方案，给予开发者更大的开发代码灵活度；
- Vue的自动依赖关系跟踪确保观察者和计算值始终正确无误；
- 正真了解Hooks不妨从纯函数、React Hooks这两个概念开始；
