浅析Hooks的产生背景及在vue里使用hooks的意义

　　本文要谈到的 Hooks，不同于 Lifecycle Hooks（生命周期钩子），它是在 v16.7.0-alpha 中引入 React 的；尽管 Hooks 是由 React 提出，但是它的本质是一种重要的代码组合机制，对于整个 JavaScript 的框架系统都大有好处；今天花点时间具体来谈谈：Hooks 对于 Vue 意义着什么？

　　Hooks 提供了一种更明确的方式来组织代码，使得代码能重用，更重要的是，它允许不同的逻辑部分进行通信、协同工作。

一、问题背景

　　Hooks 为什么被提出？就 React 而言，最初的问题背景是这样的：

　　在表达状态概念时，类 是最常见的组织形式。类本身存在一些问题，比如绑定关系冗长、复杂，导致不易读，This 的指向总会让人摸不清头脑；

　　不仅如此，在重用方面，使用渲染工具或高阶组件类的模式很常见，但这样容易陷入 “pyramid of doom” （末日金字塔），可以将它理解为过度的嵌套关系；

　　Hooks 就是来解决这些问题的；Hooks 允许我们使用函数调用来定义组件的状态逻辑，这些函数有更强的组合性、重用性；同时，仍然可以进行状态的访问和维护；

　　如之前需要这样写

　　使用 hooks 的话，可以这样写

　　有图①到图②的转变，对组件代码进行了再次组合，然后以函数的的方式进行导出，供外部重用；

　　在维护方面，Hooks 提供了一种单一的、功能性的方式来处理共享逻辑，并有可能减少代码量。

二、Vue Hooks

　　那 Vue 中为什么要用 Hooks 呢？毕竟 Vue 中没有很频繁的使用类；在 Vue 中我们使用 mixin 来解决组件相同的重用逻辑；

　　mixin 的问题在哪？Hooks 能解决吗？问题主要有两点：

（1）mixin 之间不能传递状态；

（2）逻辑来源并没有清晰的说明；

　　而这两点，Hooks 能很好地解决

1、传递状态

2、来源清晰