React Hooks 与 Vue composition API

什么是 hooks 及 hooks 的作用

hooks 是在函数组件中 "钩入" react state 和生命周期等特性的函数。使用 hooks 利于业务逻辑的重用，减小了代码体积。

逻辑复用其他的解决方案存在不足：vue 中使用 minix 混入（在引入文件中进行方法和属性的合并，相同的属性名会覆盖，相同函数名会合并为一个数组，即存在命名冲突问题）

react 中使用高阶组件，本质是接收一个组件作为参数，返回一个组件的函数。优点是逻辑复用，不影响被包裹组件的内部逻辑，缺点是如果高阶组件传给被包裹组件的 props 重名会导致覆盖

vue3 composition API，增加了新的组件选项 setup，setup() 为组件提供了状态、计算值、watcher 和生命周期钩子

react hooks 与 vue composition api 的差别

1. 原理上：react hooks 底层是基于链表实现的，当组件渲染时会顺序地执行所有的 hooks ，每个 hook 的 next 指向下一个 hook。vue hook 只会调用一次，原因在于它对数据的响应是基于 proxy 的，对数据直接代理观察，只要任何地方改动了 data，相关的 function/template 都会被重新计算。

2. 代码执行：react hooks 是在每次组件渲染时运行，vue setup 只会在组件创建时运行一次；vue composition API 的 setup 晚于 beforecreate 早于 create 被调用

3. 声明状态：react hooks 使用 useState hooks 来初始化状态，vue 声明状态主要是 ref 和 reactive，其中 ref 返回一个响应式对象，通过 value 属性访问到，可用于基本类型/对象。reactive 只将对象作为输入，并返回响应式代理（使用了对象解构会失去响应性）

4. 如何跟踪依赖：react hooks 的 useEffect 每次重新渲染后都会执行，可以通过定义依赖的属性/方法来跳过某些 hook 的执行；vue 通过 watch 执行副作用响应状态/属性的改变

5. 访问组件生命周期：react hooks 从思考习惯改变，考虑副作用依赖什么状态；vue 通过  onMounted、onUpdated 和 onBeforeUnmount 函数

6. Refs: React 的 useRef 和 Vue 的 ref 都允许你引用一个子组件 或 要附加到的 DOM 元素

7. Context 和 provide/inject: vue Composition API 中增加了一对用在 setup() 中的 provide 和 inject 函数