vue3与React中的Hooks到底是什么？

浅谈hooks

hooks 作为一个vue与react目前两大最热门框架中提出的新的一种概念，hooks到底是什么呢？hooks为何现在被运用广泛？

1、hooks到底是什么呢

钩子编程（hooking) 是计算机程序设计术语, 通过拦截软件模块间的函数调用、消息传递、事件传递来修改或扩展操作系统、应用程序或其他软件组件的行为的各种技术。处理被拦截的函数调用、事件、消息的代码，被称为钩子（hook）。

hooks其实是一种思想，并结合函数式编程的一种新的技术运用方式，在react中我们可以更好，更直观的感受到hooks带来的改变，早期的react 我们大多使用createElement的方式，可以更好的获取并处理业务代码，函数式编程运用场景很有局限性，但是随着react16.8之后出现各式各样的hooks语法糖，我们可以很便捷并且很轻量的实现一个组件，

同样的现在vue3中推荐使用组合式 Api, 也就是由之前的类编程转换为函数式编程，由 setup 作为组合式 API 的入口点。作为函数式编程 Hooks 是必不可少的

2.hook的大概原理

3.hooks帮助我们解决了什么问题呢？

1.高内聚低耦合，充分解耦业务代码的复杂性，可读性更高
2.业务代码结构清晰且明了
3.可复用性更高
4.数据剥离，调用两次hooks，代表着两份完全独立的数据，减少数据污染的可能性
5.使用方便，难度低，充分代替mixin，变量来源不明确（隐式传入），不利于阅读，使代码变得难以维护，
6.多个 mixins 的生命周期会融合到一起运行，但是同名属性、同名方法无法融合，可能会导致冲突

4.在vue3中如何去封装一个hooks的公共组件呢？

4.1 在之前的vue2中我们封装一个组件是这样的

// child
 <template><div>xxx</div>
</template>
<script>
 exprot deafult { props: {}