Hooks是什么？为啥Vue和React都选择了它？
source link: https://developer.51cto.com/article/706011.html
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
Hooks是什么
"hooks" 直译是 “钩子”，它并不仅是 react，甚至不仅是前端界的专用术语，而是整个行业所熟知的用语。通常指：系统运行到某一时期时，会调用被注册到该时机的回调函数。
为啥要用Hooks
- 跨组件复用stateful logic十分困难 使用Hooks，你可以在将含有state的逻辑从组件中抽象出来，这将可以让这些逻辑容易被测试。同时，Hooks可以帮助你在不重写组件结构的情况下复用这些逻辑。
- 复杂的组件难以理解 Hooks允许您根据相关部分(例如设置订阅或获取数据)将一个组件分割成更小的函数，而不是强制基于生命周期方法进行分割。
- 不止是用户，机器也对Classes难以理解 Hooks让你可以在classes之外使用更多React的新特性。
Hooks的优点
更好的状态复用
假设有如下需求：
当组件实例创建时，需要创建一个 state 属性：name，并随机给此 name 属性赋值一个初始值。除此之外，还得提供一个 setName 方法。你可以在组件其他地方开销和修改此状态属性。
更重要的是: 这个逻辑要可以复用，在各种业务组件里复用这个逻辑。
在拥有 Hooks 之前，我首先会想到的解决方案一定是 mixin。
代码如下：(此示例采用 vue2 mixin 写法 )。
// 混入文件：name-mixin.js
export default {
data() {
return {
name: genRandomName() // 假如它能生成随机的名字
}
},
methods: {
setName(name) {
this.name = name
}
}
}
// 组件：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>虽然看起来好像是可以复用的，但是React官方出来说话了。
既然被毙了，肯定是有它的原因的，虽然是可以实现复用，但是显露的弊端也是非常的明显的。
方法和属性难以监听
export default {
mixins: [ a, b, c, d, e, f, g ], // 当然，这只是表示它混入了很多能力
mounted() {
console.log(this.name)
// mmp!这个 this.name 来自于谁？我难道要一个个混入看实现？
}
}属性、方法会覆盖
当我同时想混入 mixin-a.js 和 mixin-b.js 以同时获得它们的属性或者方法的时候，比较尴尬的事情发生了：由于这两个 mixin 功能的开发者心有灵犀，它们都定义了 this.name 作为属性。这种时候，这个时候的你就会傻傻分不清。
这就是为啥Vue3尤大大使用CompostionAPI的原因了。
这样带来的好处是显而易见的：“高度聚合，可阅读性提升”。伴随而来的便是 “效率提升，bug变少”。
2019年年初，react 在 16.8.x 版本正式具备了 hooks 能力。2019年6月，尤雨溪在 vue/github-issues 里提出了关于 vue3 Component API 的提案。(vue hooks的基础)在后续的 react 和 vue3 相关版本中，相关 hooks 能力都开始被更多人所接受。除此之外，solid.js、 preact 等框架，也是开始选择加入 hooks 大家庭。
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK