Appearance
hooks的基本介绍
一、hooks: 什么叫大势所趋？
2019年年初，react 在 16.8.x 版本正式具备了 hooks 能力。
2019年6月，尤雨溪在 vue/github-issues 里提出了关于 vue3 Component API 的提案。（vue hooks的基础） 除此之外，solid.js、 preact 等框架，也是开始选择加入 hooks 大家庭。 
二、什么是 hooks？
年轻时你不懂我，就像后来我不懂 hooks😭。
2.1 hooks 的定义
"hooks" 直译是 “钩子”，它并不仅是 react，甚至不仅是前端界的专用术语，而是整个行业所熟知的用语。通常是：
- 它是一个函数，以 “use” 作为开头的函数
- 它提供了让你可以完全避开 class式写法，在函数式组件中完成生命周期、状态管理、逻辑复用等几乎全部组件开发工作的能力。
typescript
import { useState, useEffect, useCallback } from "react";
// 比如以上这几个方法，就是最为典型的 Hooks而在 vue 中， hooks 的定义可能更模糊，实际的定义叫composition-组合式API
typescript
import { useSlots, useAttrs } from "vue";
import { useRouter } from "vue-router";
// 以上这些方法，也是 vue3 中相关的 Hook！ 复制代码如：useSlots、 useAttrs、 useRouter 等。
这个标准来看的话，vue 和 react 中 hooks 的定义，似乎都差不多。
三、为什么我们需要 hooks ?
3.1 更好的状态复用
怼的就是你，mixin ！ 在 class 组件模式下，状态逻辑的复用是一件困难的事情。 在拥有 Hooks 之前，我首先会想到的解决方案一定是 mixin。 代码如下：（此示例采用 vue2 mixin 写法 ）
typescript
// 混入文件：name-mixin.js
export default {
data() {
return {
name: genRandomName(), // 假装它能生成随机的名字
};
},
methods: {
setName(name) {
this.name = name;
},
},
};typescript
// 组件：my-component.vue
<template>
<div>{{ name }}</div>
<template>
<script>
import nameMixin from './name-mixin';
export default {
mixins: [nameMixin],
// 通过mixins, 你可以直接获得 nameMixin 中所定义的状态、方法、生命周期中的事件等
mounted() {
setTimeout(() => {
this.setName('Tom')
}, 3000)
}
}
<script>粗略看来，mixins 似乎提供了非常不错的复用能力， 但是!! 这种状态复用的能力，但它的弊端实在太多了。
弊端
- 难以追溯的方法与属性！
- 多个mixin文件同名变量覆盖混乱
- 需求变更的时候，mixin更改困难
试想一下，如果出现这种代码，你是否会怀疑人生：
typescript
export default {
mixins: [a, b, c, d, e, f, g], // 当然，这只是表示它混入了很多能力
mounted() {
console.log(this.name);
// mmp!这个 this.name 来自于谁？我难道要一个个混入看实现？
},
};
// 你猜猜看, this.name 来自于谁？
// 求求你别再说了，我血压已经上来了因此，一种新的 “状态逻辑复用” 就变得极为迫切了——它就是 Hooks! Hook 的状态复用写法：
const [ name, setName ] = useState({initData});
相比于 mixins，它们简直太棒了！
优势
- 代码高度聚合，可阅读性提升
- 比 class 组件更容易理解
- 友好的渐进式,没有太复杂的基础要求
四、 vue 和 react 自定义 Hook 的异同
相似点： 总体思路是一致的 都遵照着 "定义状态数据"，"操作状态数据"，"隐藏细节" 作为核心思路。
差异点：
vue3 的组件里 setup 在一个组件的渲染过程中只会进入一次。
React函数组件 则完全不同，如果没有
memo,callback优化，它们可能会被不停地触发，不停地进入并执行方法，因此需要心智开销相比于vue更多。