为什么要用hooks

Hook 本质就是 JavaScript 函数，hooks" 直译是 “钩子”，它并不仅是在react中，通常指：

系统运行到某一时期时，会调用被注册到该时机的回调函数。

比较常见的钩子有：windows系统的钩子能监听到系统的各种事件，浏览器提供的onload或 addEventListener能注册在浏览器各种时机被调用的方法。

在react中，hooks是：

一系列以“use”作为开头的方法，它们提供了让你可以完全避开 class式写法，在函数式组件中完成生命周期、状态管理、逻辑复用等几乎全部组件开发工作的能力。就是一系列方法，提供了在函数式组件中完成开发工作的能力。

怎么使用hooks

hooks的命名都是已use开头的，我们约定以use开头并紧跟着一个大写字母的函数就是一个 Hook, 并且只在React函数组件中调用 Hook，而不在普通函数中调用 Hook。

tips：在react中，需要大于16.8版本，在vue中，需要3版本

在react中使用hooks

// 一个函数式组件
import { useState, useEffect } from 'React'

export default () => {
  // 通过 useState 可以创建一个 状态属性 和一个赋值方法
  const [ name, setName ] = useState('')

  // 通过 useEffect 可以对副作用进行处理
  useEffect(() => {
    console.log(name)
  }, [ name ])

  // 通过 useMemo 能生成一个依赖 name 的变量 message
  const message = useMemo(() => {
    return `hello, my name is ${name}`
  }, [name])

  return <div>{ message }</div>
}

在vue中使用hooks

// vue中的hooks依赖于组合式API
<template>
  <div>
    {{ message }}
  </div>
</template>
<script setup>
import { computed, ref } from 'vue'
// 定义了一个 ref 对象
const name = ref('')
// 定义了一个依赖 name.value 的计算属性
const message = computed(() => {
  return `hello, my name is ${name.value}`
})
</script>