vue和react中都使用的hook到底是什么？

vue和react中都使用的hook到底是什么？

在学习中你是否有个疑惑：hook是什么？为什么vue和react中都存在，它又有什么作用呢？

Vue中的Hook和自定义Hook

Vue生命周期钩子

在Vue中，Hook（钩子）通常指的是生命周期钩子。这些钩子函数允许你在组件的不同生命周期阶段执行代码。

常见的Vue生命周期钩子：

1. beforeCreate：实例初始化之后，数据观测和事件配置之前调用。
2. created：实例创建完成后调用，此时实例已完成数据观测和方法运算，但尚未挂载到DOM上。
3. beforeMount：在挂载开始之前调用，相关的render函数首次被调用。
4. mounted：el被新创建的vm.$el替换，并挂载到实例上后调用。
5. beforeUpdate：数据更新时调用，发生在虚拟DOM重新渲染和打补丁之前。
6. updated：由于数据更改导致的虚拟DOM重新渲染和打补丁之后调用。
7. beforeDestroy：实例销毁之前调用。
8. destroyed：实例销毁后调用。

Vue 3中的自定义Hook（组合函数）

在Vue 3中，自定义Hook的概念通过组合式API（Composition API）实现。组合函数（Composable Functions）允许你将组件逻辑提取到可重用的函数中，使不同组件可以共享相同的逻辑。

创建组合函数

假设我们想创建一个组合函数来管理表单输入的状态和逻辑：

import { ref } from 'vue';

// 组合函数：useFormInput
export function useFormInput(initialValue) {
  const value = ref(initialValue);

  // 处理输入改变的函数
  const handleChange = (event) => {
    value.value = event.target.value;
  };

  return {
    value,
    handleChange,
  };
}

在组件中使用组合函数

然后，我们可以在组件中使用这个组合函数：

<template>
  <form @submit.prevent="handleSubmit">
    <div>
      <label>Name: </label>
      <input type="text" v-model="name.value" @input="name.handleChange" />
    </div>
    <div>
      <label>Email: </label>
      <input type="email" v-model="email.value" @input="email.handleChange" />
    </div>
    <button type="submit">Submit</button>
  </form>
</template>

<script>
import { ref } from 'vue';
import { useFormInput } from './useFormInput';

export default {
  setup() {
    const name = useFormInput('');
    const email = useFormInput('');

    const handleSubmit = () => {
      console.log(`Name: ${name.value}, Email: ${email.value}`);
    };

    return {
      name,
      email,
      handleSubmit,
    };
  },
};
</script>

React中的Hook和自定义Hook

React中的Hook

在React中，Hook是自React 16.8引入的一种特性，使得在函数组件中可以使用state以及其他React特性（如生命周期方法）而不需要使用类组件。

常见的React Hook：

1. useState：用来在函数组件中添加状态。
2. useEffect：用于在函数组件中执行副作用操作（类似于生命周期方法，如componentDidMount, componentDidUpdate, 和 componentWillUnmount）。
3. useContext：使你能够在函数组件中订阅React上下文。
4. useReducer：用于替代useState以处理更复杂的state逻辑。
5. useCallback：返回一个memoized（记忆化）的回调函数。
6. useMemo：返回一个memoized值。
7. useRef：返回一个可变的ref对象，其.current属性被初始化为传入的参数（initialValue）。

React中的自定义Hook

自定义Hook允许你将组件逻辑提取到可重用的函数中，使得不同组件可以共享相同的逻辑。自定义Hook的命名约定是以use开头的函数。

创建自定义Hook

假设我们想创建一个自定义Hook来管理表单输入的状态和逻辑：

import { useState } from 'react';

// 自定义Hook：useFormInput
function useFormInput(initialValue) {
  const [value, setValue] = useState(initialValue);

  // 处理输入改变的函数
  const handleChange = (e) => {
    setValue(e.target.value);
  };

  return {
    value,
    onChange: handleChange,
  };
}

export default useFormInput;

在组件中使用自定义Hook

然后，在组件中使用这个自定义Hook：

import React from 'react';
import useFormInput from './useFormInput';

function MyForm() {
  const name = useFormInput('');
  const email = useFormInput('');

  const handleSubmit = (e) => {
    e.preventDefault();
    console.log(`Name: ${name.value}, Email: ${email.value}`);
  };

  return (
    <form onSubmit={handleSubmit}>
      <div>
        <label>Name: </label>
        <input type="text" {...name} />
      </div>
      <div>
        <label>Email: </label>
        <input type="email" {...email} />
      </div>
      <button type="submit">Submit</button>
    </form>
  );
}

export default MyForm;

Hook的优势

Vue中的生命周期钩子：

1. 管理组件生命周期：允许在组件的特定阶段执行代码，从而在适当的时机进行资源的分配和清理。
2. 增强代码的组织性：将与组件生命周期相关的逻辑集中在一起，提高代码的可读性和维护性。

Vue 3中的组合函数（Composable Functions）：

1. 复用逻辑：将通用的逻辑抽象出来，在不同组件中复用，避免重复代码。
2. 增强代码组织性：将逻辑分离到独立的函数中，使得组件更加简洁和易于理解。
3. 提高可维护性：通过模块化的方式组织代码，使得代码更易于维护和扩展。
4. 灵活性：组合函数可以返回任意的响应式状态、方法、计算属性等，使得它们非常灵活。

React中的Hook：

1. 简化状态管理：使得函数组件能够使用本地状态，而不需要转变为类组件。
2. 增强可组合性：通过Hook，可以将与某一逻辑相关的状态和副作用分离到独立的函数中，从而使代码更加模块化和可重用。
3. 避免类组件的复杂性：使用函数组件和Hook可以避免类组件中常见的this指针问题和生命周期方法的复杂性。
4. 灵活性和可测试性：Hook提供了更好的代码分离和组合方式，使代码更加灵活且易于测试。