一文带你看懂VueHook和ReactHook

2023-05-18 05:48

短信预约 -IT技能 免费直播动态提醒

react Hook

React Hook 是 React 16.8 版本引入的一项新特性，它能够让函数组件拥有类组件中的状态(state)和生命周期方法(lifecycle methods)等功能。React Hook 包括了多个钩子函数(hook functions)，如 useState、useEffect、useContext 等，在函数组件中使用这些钩子函数可以实现一系列常见的功能，如管理组件内部的状态、处理副作用等。React Hook 的出现使得函数组件可以更加灵活地处理复杂的逻辑，同时也提供了一种清晰且可重用的代码结构，使得代码易于维护和扩展。

react Hook demo

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>Click me</button>
    </div>
  );
}

export default Counter;

这个组件使用了useState钩子来保存并更新一个计数器的状态。当用户点击按钮时，计数器会增加，并且在 UI 中显示出来。该 Hook 接受初始状态作为参数，并返回当前状态和一个更新状态的函数。在此示例中，我们使用数组解构将状态值和更新函数分配给count和setCount变量。每次用户单击按钮时，我们用setCount函数更新count的状态。

vue Hook

Vue 2.x 中没有提供 Hooks API，但是 Vue 3.x 开始引入了 Hooks API，用于在函数式组件中实现状态和生命周期的管理。类似于 React 中的 Hooks，Vue 的 Hooks API 包括 setup() 和一些预置的 hooks 函数，如 ref()、watch()、onMounted() 等等，可以让我们更方便地编写函数式组件，并且具有更好的性能表现。其中，setup() 函数会在组件创建之前被调用，它接收两个参数：props 和 context。在 setup() 函数内部，我们可以使用预置的 hooks 函数来定义响应式数据、监听数据变化、执行副作用等操作，最后返回一个对象，该对象中包含模板中所需要使用的数据和方法。

vue hook demo

<template>
  <div>
    <h2>Count: {{ count }}</h2>
    <button @click="increment">Increment</button>
  </div>
</template>

<script>
  import { ref } from 'vue';

  export default {
    setup() {
      const count = ref(0);

      function increment() {
        count.value++;
      }

      return {
        count,
        increment,
      };
    },
  };
</script>

在这个示例中，我们使用了 Vue 3 的 setup 函数来定义组件的逻辑。通过 ref 函数，我们创建了一个响应式的变量 count，并将其初始值设为 0。然后，我们定义了一个名为 increment 的函数来增加 count 的值。

在模板中，我们显示了当前的 count 值，并在按钮上绑定了 increment 函数。当点击按钮时，count 的值会增加，同时视图也会自动更新以反映新的值。