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 使用 useS