站长资讯网本篇文章给大家带来了关于Hooks与vue的相关知识，Hooks是React在V16.7.0-alpha版本中引入的，Hooks主要是对模式的复用提供了一种更明确的思路，希望对大家有帮助。
不要把 Hooks 和 Vue 的生命周期钩子（Lifecycle Hooks） 弄混了，Hooks 是 React 在 V16.7.0-alpha 版本中引入的，而且几天后 Vue 发布了其概念验证版本。虽然 Hooks 是由 React 提出的，它是一个对各 JavaScript 框架生态系统都有价值的、重要的组合机制，因此我们今天会花一点时间讨论 Hooks 意味着什么。
Hooks主要是对模式的复用提供了一种更明确的思路 —— 避免重写组件本身，并允许有状态逻辑的不同部分能无缝地进行协同工作。
最初的问题
就 React 而言，问题在于：在表达状态的概念时，类是最常见的组件形式。无状态函数式组件也非常受欢迎，但由于它们只能单纯地渲染，所以它们的用途仅限于展示任务。
类本身存在一些问题。例如，随着 React 变得越来越流行，类的问题也普遍成为新手的阻碍。开发者为了理解 React，也必须理解类。绑定使得代码冗长且可读性差，并且需要理解 JavaScript 中的 this。这里还讨论了使用类所带来的一些优化障碍。
在逻辑复用方面，我们通常使用 render props 和高阶组件等模式。但使用这些模式后会发现自己处于类似的“厄运金字塔”中 —— 样式实现地狱，即过度使用嵌套可能会导致组件难以维护。这导致我想对 Dan Abramov 像喝醉了一样大吼大叫，没有人想要那样。
Hooks 允许我们使用函数调用来定义组件的有状态逻辑，从而解决这些问题。这些函数调用变得更具有组合性、可复用性，并且允许我们在使用函数式组件的同时能够访问和维护状态。React 发布 Hooks 时，人们很兴奋 —— 下面你可以看到 Hooks 展示的一些优势，关于它们如何减少代码和重复：
在维护方面，简单性是关键，Hooks 提供了一种单一的、函数式的方式来实现逻辑共享，并且可能代码量更小。
为什么 Vue 中需要 Hooks？
读到这里你肯定想知道 Hooks 在 Vue 中必须提供什么。这似乎是一个不需要解决的问题。毕竟，类并不是 Vue 主要使用的模式。Vue 提供无状态函数式组件（如果需要它们），但为什么我们需要在函数式组件中携带状态呢？我们有 mixins 用于组合可以在多个组件复用的相同逻辑。问题解决了。
我想到了同样的事情，但在与 Evan You 交谈后，他指出了我忽略的一个主要用例：mixins 不能相互消费和使用状态，但 Hooks 可以。这意味着如果我们需要链式封装逻辑，可以使用 Hooks。
Hooks 实现了 mixins 的功能，但避免了 mixins 带来的两个主要问题：
- 允许相互传递状态。
- 明确指出逻辑来自哪里。
如果使用多个 mixins，我们不清楚哪个属性是由哪个 mixins 提供的。使用 Hooks，函数的返回值会记录消费的值。
那么，这在 Vue 中如何运行呢？我们之前提到过，在使用 Hooks 时，逻辑在函数调用时表达从而可复用。在 Vue 中，这意味着我们可以将数据调用、方法调用或计算属性调用封装到另一个自定义函数中，并使它们可以自由组合。数据、方法和计算属性现在可用于函数式组件了。
例子
让我们来看一个非常简单的 hook，以便我们在继续学习 Hooks 中的组合例子之前理解构建块。
useWat?
好的，Vue Hooks 和 React Hooks 之间存在交叉部分。使用 use 作为前缀是 React 的约定，所以如果你在 React 中查找 Hooks，你会发现 Hooks 的名称都会像 useState、useEffect 等。
