前端 Hooks 最佳实践：Vue 3 和 React

什么是 Hooks？

在 Vue 3 和 React 中，Hooks 是一种函数式编程的概念，可以让我们在函数组件中复用状态逻辑。通过使用 Hooks，可以在不使用类组件的情况下，轻松管理组件的状态、副作用和共享逻辑。

Vue 3 中的 Hooks

Vue 3 引入了 Composition API，其中包含了一系列的 Hooks 。下面是一些常用的 Hooks：

setup Hook

在 Vue 3 中，我们使用 setup Hook 来替代 Vue 2 中的 data 和 methods。setup 函数是我们组件的入口点，在该函数内部，我们可以定义状态、计算属性和方法。让我们来看一个简单的例子：

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

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

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

    const increment = () => {
      count.value++;
    };

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

reactive 和 ref Hook

在 Vue 3 中，我们可以使用 reactive 和 ref 这两个 Hooks 来创建响应式数据。reactive 创建的是响应式对象，而 ref 创建的是包装了基本类型的响应式引用。下面是一个示例：

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

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

export default {
  setup() {
    const state = reactive({
      message: 'Hello, Vue!',
      count: ref(0)
    });

    const increment = () => {
      state.count.value++;
    };

    return {
      ...state,
      increment
    };
  }
};
</script>

watch Hook

在 Vue 3 中，我们可以使用 watch Hook 来监听响应式数据的变化，并在数据变化时执行相应的操作。下面是一个使用 watch 的示例：

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

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

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

    const increment = () => {
      count.value++;
    };

    watch(count, (newCount, oldCount) => {
      console.log(`Count changed from ${oldCount} to ${newCount}`);
    });

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

React 中的 Hooks

React 16.8 引入了 Hooks，让我们能够在函数组件中利用 React 的核心功能。下面是一些常用的 React Hooks：

useState Hook

useState Hook 可以让我们在函数组件中管理状态。它返回一个包含状态值和更新状态的函数的数组：

import React, { useState } from 'react';

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

  const increment = () => {
    setCount(count + 1);
  };

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
    </div>
  );
};

useEffect Hook

useEffect Hook 用于处理副作用操作，例如数据获取、订阅和事件监听等。它在组件渲染后执行，并在每次重新渲染时都会运行。下面是一个使用 useEffect 的示例：

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

const Timer = () => {
  const [time, setTime] = useState(0);

  useEffect(() => {
    const interval = setInterval(() => {
      setTime(time => time + 1);
    }, 1000);

    return () => {
      clearInterval(interval);
    };
  }, []);

  return (
    <div>
      <p>Time: {time} seconds</p>
    </div>
  );
};

useContext Hook

useContext Hook 可以让我们在组件之间共享状态，而无需通过层层传递 props。下面是一个使用 useContext 的示例：

import React, { createContext, useContext } from 'react';

const UserContext = createContext();

const ParentComponent = () => {
  const user = { name: 'John Doe', email: 'john@example.com' };

  return (
    <UserContext.Provider value={user}>
      <ChildComponent />
    </UserContext.Provider>
  );
};

const ChildComponent = () => {
  const user = useContext(UserContext);

  return (
    <div>
      <p>Name: {user.name}</p>
      <p>Email: {user.email}</p>
    </div>
  );
};