前言

在前端领域，Vue 和 React 是两个备受欢迎的 JavaScript 框架，它们都为开发者提供了灵活而强大的工具。React 引入了 Hooks 的概念，使得函数组件可以拥有状态和其他 React 特性，而不再需要使用类组件。那么，对于那些突发奇想、吃饱了撑的时候，我们是否可以在 Vue 3 中实现类似 React Hooks 的功能呢？

首先，我们需要了解 React Hooks 的核心思想。React Hooks 允许函数组件拥有状态，副作用和其他 React 特性，而无需使用类组件。这是通过使用 useState，useEffect 等特殊的函数来实现的。

Vue 3 也引入了 Composition API，它在一定程度上类似于 React Hooks。Composition API 允许我们在函数组件中组织和重用逻辑。虽然它不是完全相同的实现，但能够达到类似的效果。

useState

React 中的 useState：

useState 是 React 中的一个 Hook，用于在函数组件中引入状态。通过 useState，我们可以在函数组件中保存和更新状态，而不必使用类组件。

基本语法如下：

import React, { useState } from 'react';

function ExampleComponent() {
// 使用 useState 定义状态变量 count 和更新函数 setCount，并初始化为 0
const [count, setCount] = useState(0);

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

        加一
button>
div>

  );

}

下面是一个使用 vue3实现类似于 useState 的例子：

import { ref, UnwrapRef } from "vue";

type UpdateFunction = (nextState: UnwrapRef) => UnwrapRef;
function isUpdateFc(
nextState: UnwrapRef | UpdateFunction
): nextState is UpdateFunction {
return typeof nextState === "function";

}

export default function useState(initialState: T) {
const state = ref(initialState);
const useState = (nextState: UnwrapRef | UpdateFunction) => {
// 检测传入的是不是函数，如果是函数就把state传给函数，把函数执行返回值赋给重新state
if (isUpdateFc(nextState)) {

      state.value = nextState(state.value);

    } else {

      state.value = nextState;

    }

  };
return [state, useState] as const;

}

<template>
<div>
<button>{{ count }}button>
<button @click="() => handerCount()">+button>
div>
template>

useEffect

React 中的 useEffect：

useEffect 是 React 中的一个重要 Hook，用于处理副作用操作，比如数据获取、订阅、手动操作 DOM 等。它在函数组件渲染完成后执行，可以用于管理组件的生命周期。

基本语法如下：

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

function ExampleComponent() {
const [data, setData] = useState(null);

useEffect(() => {
// 在组件渲染完成后执行的副作用操作
fetchData(); // 例如，发起数据请求

  }, []); // 第二个参数是依赖数组，为空数组表示只在组件挂载和卸载时执行

return (
<div>

      {/* 组件渲染的内容 */}
div>

  );

}

在 Vue 3 中使用 onMounted, onUpdated, onUnmounted，watch 实现类似功能：

在 Vue 3 中，可以使用一系列的生命周期钩子和 watch 函数来实现与 useEffect 类似的效果。

下面是一个使用 vue3实现类似于 useEffect 的例子：

import { ref, onMounted, watch, onUnmounted, onUpdated } from "vue";

type EffectCleanup = void | (() => void);
export default function useEffect(

  setup: () => EffectCleanup,

  dependencies?: readonly unknown[]
): void {
const cleanupRef = ref<EffectCleanup | null>(null);
const runEffect = () => {
// 判断下一次执行副作用前还有没有清理函数没有执行
if (cleanupRef.value) {

      cleanupRef.value();

    }
// 执行副作用，并赋值清理函数

    cleanupRef.value = setup();

  };
// 组件挂载的时候执行一次副作用
onMounted(runEffect);
// 判断有没有传依赖项，有的话就watch监听
if (dependencies && dependencies.length > 0) {
watch(dependencies, runEffect);

  } else if(dependencies === undefined) {
// 没有传依赖项就组件每次渲染都要执行副作用
onUpdated(runEffect)

  }
// 组件销毁的使用如果有清理函数就执行清理函数
onUnmounted(() => {
if (cleanupRef.value) {

      cleanupRef.value();

    }

  });

}

useReducer

React 中的 useReducer：

useReducer 是 React 中的另一个 Hook，用于处理具有复杂状态逻辑的组件。它接受一个包含当前状态和触发状态更新的函数的 reducer，以及初始状态。通过 useReducer，我们可以更好地管理和处理复杂的状态变更逻辑。

基本语法如下：

import React, { useReducer } from 'react';

// 定义 reducer 函数
const reducer = (state, action) => {
switch (action.type) {
case 'increment':
return { count: state.count + 1 };
case 'decrement':
return { count: state.count - 1 };
default:
return state;

  }

};

function ExampleComponent() {
// 使用 useReducer，传入 reducer 函数和初始状态
const [state, dispatch] = useReducer(reducer, { count: 0 });

return (
<div>
<p>Count: {state.count}p>
<button onClick={() => dispatch({ type: 'increment' })}>加一button>
<button onClick={() => dispatch({ type: 'decrement' })}>减一button>
div>

  );

}

通过刚刚实现的 useState 来实现类似 useReducer 的功能：

import { UnwrapRef } from "vue";
import useState from "./useState";

type ReducerType = (state: T, action: A) => any;
export default function useReducer(
reducer: ReducerType<UnwrapRef, A>,
initialArg: T,

  init?: (value: T) => T
) {
// 根据传没传init函数来初始化state
const [state, setState] = useState(init ? init(initialArg) : initialArg);
const dispatch = (action: A) => {
// 通过reducer函数的返回结果来修改state的值
setState((state) => reducer(state, action));

  };
return [state, dispatch] as const;

}
,>,>

<template>
<div>
<div>
<p>Count: {{ state.count }}p>
<button @click="() => dispatch({ type: 'increment' })">

        加一
button>
<button @click="() => dispatch({ type: 'decrement' })">

        减一
button>
div>
div>
template>

useCallback

React 中的 useCallback：

useCallback 是 React 中的一个 Hook，用于返回一个 memoized 版本的回调函数，避免在每次渲染时都创建新的回调函数。这在防止不必要的渲染和优化性能方面非常有用。

基本语法如下：

import React, { useState, useCallback } from 'react';

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

// 使用 useCallback 返回 memoized 版本的回调函数
const handleClick = useCallback(() => {
setCount(count + 1);

  }, [count]); // 依赖数组中的值发生变化时，重新创建回调函数

return (
<div>
<p>Count: {count}p>
<button onClick={handleClick}>加一button>
div>

  );

}

下面是一个使用 useState 和 vue3 中的 watch 模拟实现类似 useCallback 的例子：

import { watch } from "vue";
import useState from "./useState";

type FnType = (...args: T[]) => any;
export default function useCallback(fn: FnType, dependencies: D[]) {
const [callback, setCallback] = useState(fn);
// 如果依赖项有变更就把fn重新赋值没有就直接返回callback
watch(

    dependencies,
() => {
setCallback((cb: FnType) => cb = fn);

    },

    { immediate: false }

  );
return callback;

}
,>

<template>
<div>
<button>{{ count }}button>
<button @click="() => handerCount()">+button>
div>
template>

useMemo

React 中的 useMemo：

useMemo 是 React 中的一个 Hook，用于记忆（memoize）计算结果，避免在每次渲染时都重新计算。它对于在渲染期间执行昂贵的计算并确保只在依赖项更改时重新计算结果非常有用。

基本语法如下：

import React, { useState, useMemo } from 'react';

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

// 使用 useMemo 记忆计算结果
const expensiveCalculation = useMemo(() => {
console.log('计算了一次...');
return count * 2;

  }, [count]); // 依赖数组中的值发生变化时，重新计算结果

return (
<div>
<p>Count1: {count}p>
<p>Count2: {expensiveCalculation}p>
<button onClick={() => setCount(count + 1)}>加一button>
div>

  );

}

下面是一个使用 useState、useEffect 和 vue3 的 computed 模拟实现类似 useMemo 的例子：

import { UnwrapRef, computed } from "vue";
import useEffect from "./useEffect";
import useState from "./useState";

export default function useMemo(

  calculateValue: () => R,

  dependencies: T[]

) {
const [cache, setCache] = useStatenull>(null);
// 判断依赖项有没有变更，没有就直接返回缓存，有的话就重新计算
useEffect(() => {
setCache((cache) => {
return (cache = computed(calculateValue) as UnwrapRef);

    });

  }, dependencies);
return cache as UnwrapRef;

}
,>

<template>
<div>
<div>平方: {{ squareSum }}div>
<div>平方: {{ squareSum }}div>
<button @click="handelNumbers">更改numbersbutton>
div>
template>

useRef

React 中的 useRef：

useRef 是 React 中的一个 Hook，主要用于在函数组件中创建一个可变的对象，该对象的 current 属性被初始化为传入的参数。通常用于获取或存储组件中的引用（reference），并且不会触发组件重新渲染。

基本语法如下：

import React, { useRef, useEffect } from 'react';

function ExampleComponent() {
const myRef = useRef(null);

useEffect(() => {
// 使用 myRef.current 访问引用的 DOM 元素
console.log(myRef.current);

  }, []);

return <div ref={myRef}>获取DOMdiv>;

}

下面是一个使用 Vue 3 的 ref 模拟实现 useRef 的例子：

import { ref, Ref } from "vue";

function isHTMLElement(obj: unknown): obj is HTMLElement {
return obj instanceof HTMLElement;

}

function useRefextends HTMLElement>(initialValue: T | null): Refnull>;
function useRefextends unknown>(
initialValue: T extends HTMLElement ? never : T
): { current: T };


function useRef(

  initialValue: unknown
): Ref<HTMLElement | null> | { current: unknown } {
// 判断传入的是不是一个HTML节点 
// 这里可能有点问题就是，或者传入null也会被判定为HTML节点，我没想到怎么解决这个问题

  if (isHTMLElement(initialValue) || initialValue === null) {

    return ref(initialValue);

  } else {
// 不是就返回一个普通对象

    return {

      current: initialValue,

    };

  }

}


export default useRef;

<template>
<div>
<input ref="myInputRef" type="text" />
<p>Counter: {{ counterRef.current }}p>
<button @click="incrementCounter">加一button>
div>
template>

补充

对于react中的createContext，useContext和vue3中的provide，inject很像。

React 中的 createContext 和 useContext:

const MyContext = React.createContext(defaultValue);

2. useContext： 用于在函数组件中订阅上下文的变化，获取当前 Provider 提供的值。

1. provide： 用于在父组件中提供数据，被提供的数据可以被子组件通过 inject 访问到。provide 接受一个对象，对象的属性即为提供的数据。