一文带你看懂Vue Hook和React Hook

一文带你看懂Vue Hook和React Hook的完整攻略

什么是Hook

Hook指的是一些能让你"钩入"React和Vue状态以及生命周期的函数，它们可以让你在无需更改组件结构，甚至无需定义新组件的前提下，轻松的使用状态和其他React和Vue的特性。

Vue Hook

1. Vue Composition APT

Vue Composition APT是一个可以帮助我们写基于函数的组件的库，它有多个API，包括：setup、ref、computed、watch等等。

下面是一个使用setup和ref的简单示例：

<script>
import { ref, onMounted } from 'vue'

export default {
  setup() {
    const count = ref(0)
    return {
      count
    }
  },
  onMounted() {
    console.log('mounted')
  }
}
</script>

<template>
  <div>{{ count }}</div>
</template>

在setup中我们定义了一个名为count的ref变量，并将其初始化为0，之后返回这个变量，这样我们就可以在template中使用count了。同时我们也定义了一个onMounted函数，在Vue 3.0.6版本以上的时候还能这样定义生命周期钩子。

2. Vue自定义Hook

Vue Composition API除了可以使用内置的API之外，还可以自己封装一个自定义的Hook。

下面是一个使用自定义Hook的简单示例：

<script>
import { useCount } from '@/hooks/useCount'

export default {
  setup() {
    const [count, addOne] = useCount()
    return {
      count,
      addOne
    }
  }
}
</script>

<template>
  <div>
    <div>{{ count }}</div>
    <button @click="addOne()">Add One</button>
  </div>
</template>

在上面的代码中，我们使用了useCount这个自定义Hook，useCount返回了一个数组，第一个元素是count变量，第二个元素是一个函数addOne。在template中通过addOne函数可以改变count的值。

React Hook

1. useState

useState是React提供的Hook之一，它用于在函数组件中保存一些状态。它的用法如下：

import React, { useState } from 'react'

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

  return (
    <div>
      <p>Count: { count }</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  )
}

export default Counter;

在上面的代码中，我们在函数组件中使用了useState Hook，它的返回值是一个数组，其中第一个元素是当前的状态数据，第二个元素是一个函数，它可以改变这个状态数据。

2. useEffect

useEffect用于在函数组件每次渲染后执行一些副作用（比如异步请求、DOM操作等等），它的用法如下：

import React, { useState, useEffect } from 'react'

function TodoList() {
  const [todos, setTodos] = useState([])

  useEffect(() => {
    fetch('/api/todos')
      .then(response => response.json())
      .then(data => setTodos(data))
  }, [])

  return (
    <ul>
      {todos.map(todo => (
        <li key={todo.id}>{todo.content}</li>
      ))}
    </ul>
  )
}

export default TodoList;

在上面的代码中，我们在函数组件中使用了useEffect Hook，它的第一个参数是一个回调函数，这个函数会在每次组件渲染后执行。useEffect还接收一个可选的第二个参数（数组），用来指定哪些变量有变化时应该执行第一个参数的回调函数。

如果第二个参数为 [] ，则 useEffect 仅在组件初始化和卸载时执行该函数。它相当于 componentDidMount 和 componentWillUnmount 的组合体。

结语

本文讲解了Vue和React中的Hook，以及对应的使用方法。通过本文，希望读者能够掌握Hook的基本概念和用法，并能够在实际开发中灵活运用。