为什么 vue和 react 都选择了hooks？

一、初步了解hooks

2019年年初，react 在 16.8.x 版本正式具备了 hooks 能力。
2019年6月，尤雨溪在 vue/github-issues 里提出了关于 vue3 Component API 的提案。（vue hooks的基础）
虽然现在是class component 和 hooks api同时存在，但是在未来，hooks 极有可能取代 class Component 成为业内主流。

二、什么是hooks?

hooks的定义
“hooks” 直译是 “钩子”，它并不仅是 react，甚至不仅是前端界的专用术语，而是整个行业所熟知的用语。通常指：系统运行到某一时期时，会调用被注册到该时机的回调函数。
比较常见的钩子有：windows 系统的钩子能监听到系统的各种事件，浏览器提供的 onload 或 addEventListener 能注册在浏览器各种时机被调用的方法。
以上这些，都可以被称一声 “hook”。
一系列以 “use” 作为开头的方法，它们提供了让你可以完全避开 class式写法，在函数式组件中完成生命周期、状态管理、逻辑复用等几乎全部组件开发工作的能力。
一系列方法，提供了在函数式组件中完成开发工作的能力。

命名规范和指导思想
通常来说，hooks 的命名都是以 use 作为开头，这个规范也包括了那么我们自定义的 hooks。
一个假设： 假设任何以 「use」 开头并紧跟着一个大写字母的函数就是一个 Hook。
第一个只在： 只在 React 函数组件中调用 Hook，而不在普通函数中调用 Hook。（Eslint 通过判断一个方法是不是大坨峰命名来判断它是否是 React 函数）
第二个只在： 只在最顶层使用 Hook，而不要在循环，条件或嵌套函数中调用 Hook。

三、为什么使用hooks？

1、更好的状态复用
当组件实例创建时，需要创建一个 state 属性：name，并随机给此 name 属性附一个初始值。除此之外，还得提供一个 setName 方法。你可以在组件其他地方开销和修改此状态属性。
更重要的是: 这个逻辑要可以复用，在各种业务组件里复用这个逻辑。
2、Hook 的状态复用写法：

// 单个name的写法
const { name, setName } = useName();

// 梅开二度的写法
const { name : firstName, setName : setFirstName } = useName();

const { name : secondName, setName : setSecondName } = useName();

这样带来的好处是显而易见的：“高度聚合，可阅读性提升”。伴随而来的便是 “效率提升，bug变少”。

四、如何开始hooks？

1、环境和版本
在 react 项目中， react 的版本需要高于 16.8.0。
而在 vue 项目中， vue3.x 是最好的选择，但 vue2.6+ 配合 @vue/composition-api，也可以开始享受“组合式API”的快乐。
2、react 的hooks写法？
因为 react Hooks 仅支持“函数式”组件，因此需要创建一个函数式组件 my-component.js。

// my-component.js
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>
}

3、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>

五、可以自定义hooks

1、react 自定义hooks？

import React from 'react';

export const useName = () => {
  // 这个 useMemo 很关键
  const randomName = React.useMemo(() => genRandomName(), []);
  const [ name, setName ] = React.useState(randomName)

  return {
    name,
    setName
  }
}

2、vue 自定义hooks?

import { ref } from 'vue';
export const useName = () => {
  const name = ref(genRandomName())
  const setName = (v) => {
    name.value = v
  }
  return {
    name,
    setName
  }
}

3、 vue 和 react 自定义 Hook 的异同
相似点： 总体思路是一致的都遵照着 “定义状态数据”，“操作状态数据”，“隐藏细节” 作为核心思路。
差异点： 组合式API 和 React函数组件 有着本质差异
vue3 的组件里， setup 是作为一个早于 “created” 的生命周期存在的，无论如何，在一个组件的渲染过程中只会进入一次。
React函数组件 则完全不同，如果没有被 memorized，它们可能会被不停地触发，不停地进入并执行方法，因此需要开销的心智相比于vue其实是更多的。