钩子函数是啥-百分百源码网

钩子函数是啥

发布时间：09/01 来源：未知浏览：关键词：

钩子（hook）函数就是处置拦截在软件组件之间传递的函数调取或事件或新闻的代码，本质上就是用以处置系统新闻的程序，通过系统调取，把它挂入系统中

【引荐课程：React教程、Vue.js教程】

【引荐文章：react好还是vuejs好】

什么是钩子（hook）函数

在运算机编程中，钩子函数主要用于通过拦截在软件组件之间传递的函数调取或新闻或事件来改动或增强操纵系统，利用程序或其他软件组件的行动。处置这种截获的函数调取，事件或新闻的代码称为钩子，它的本质就是用以处置系统新闻的程序，通过系统调取，把它挂入系统。钩子函数可用于很多目的，包罗调试和扩展功效。常见的钩子函数：react的生命周期函数、vue的生命周期函数等

React Hooks的含义

React Hooks用于从函数组件连接到React状态和生命周期功效的简便函数

这意味着钩子同意我们轻松地操纵我们的函数组件的状态，而无需将它们转换为类组件。这使我们不必处置所触及的所有样板代码。

钩子在类内部不起作用，它们同意你在没有类的状况下使用React。并且，通过使用它们，我们可以完全幸免使用生命周期办法，例如componentDidMount，componentDidUpdate等。相反，我们将使用内置的钩子，如useEffect，useMutationEffect或useLayoutEffect。

钩子是简便的JavaScript函数，但它们强加了两个额外的规则

（1）只在最顶层调取Hooks 。不要在轮回，前提或嵌套函数中调取Hook

（2）仅从React功效组件调取Hooks 。不要从常规JavaScript函数调取Hook。还有别的一个有效的地方可以调取自定义Hooks。

我们需要记住在React 函数组件的上下文中，之前这些组件被称为无状态，但此刻钩子为我们供给了在这些组件中使用状态的办法

Vuejs Hook的含义

Vuejs中的一个组件有一个生命周期，当它创立组件时，由Vue本人治理，将组件安置到DOM，更新组件并烧毁组件。也就是每个组件都有本人的生命周期事件，我们可以通过实现一个或多个生命周期钩子来关注该生命周期中的关键时刻，这些钩子由Vue本人调取，从而为我们供给帮忙有时机在组件生命周期的特定阶段增加我们本人的代码。

Vue有八个生命周期钩子，记住它们的关键是知道它们中的四个是被触发的事件，表白实际事件将发生。它们以实际钩子此前的“此前”开端，并在实际钩子此前被触发。

Vue的八个生命周期钩子

（1）beforeCreate：这是在初始化Vue实例后调取的第一个钩子。在这个阶段，尚未创立数据视察事件，运算属性和视察者。因此，我们没法与组件的任何部分停止交互。

（2）created：在创立实例后调取此钩子，在这个阶段，实例已经完成处置，数据视察，运算属性，办法，视察者和事件回调已经创立。在此阶段没法与DOM交互，由于尚未安置组件

（3）beforeMount?：在此阶段，模板可以从模板或渲染选项中编译，也可以从Vue初始化为的元素的outerHTML编译。模板尚未显现，需要留意效劳器端显现期间不会调取此钩子函数

（4）mounted?：在安置实例后调取，其中el属性由新创立的vm。$ el更换。假如将根实例挂载到文档内元素，则在调取挂载时，vm $el也将在文档中。调取挂接的挂钩后，组件将完全正常工作，我们可以完全与之交互。

需要留意的一点是钩子函数不克不及包管元素已增加到DOM中。要在此阶段施行DOM依靠的代码，需要将代码置于回调办法中，并将其置于Vue.nextTick（）函数中。例

<template>
  <p>I'm text inside the component.</p>
</template>
<script>
export default {
  mounted() {
    // Element might not have been added to the DOM yet
    this.$nextTick(() => {
        // Element has been definitely added to the DOM
       console.log(this.$el.textContent); // I'm text inside the component.
    }
  }
}
</script>

（5）beforeUpdate：在修补DOM此前，可以随时更换我们的数据，并且需要更新DOM。留意在效劳器端显现期间不会调取此钩子函数，由于只在效劳器端施行初始显现。

（6）updated：在更换完成后触发钩子函数。调取此函数时，组件的DOM会更新，因此可以在此处施行与DOM相关的操纵。但是，在大多数状况下，应当幸免更换钩子内的状态。平常最好使用运算属性或视察者。

需要留意的是更新并不克不及包管所有的子组件也停止了从新显现。假如想比及整个视图被从新渲染，你可以在更新的内部使用vm,$el

（7）beforeDestroy：在烧毁Vue实例此前调取。在此阶段，实例依然完全正常运转。可以在此处施行必要的清算。请留意，在效劳器端显现期间不会调取此挂接。

（8）Destroyed：在Vue实例被烧毁后调取。调取此函数时，Vue实例的所有指令都已解除绑定，所有事件侦听器都已删除，并且所有子Vue实例也已被烧毁。请留意，在效劳器端显现期间不会调取此挂接。