React&Vue3自定义Hooks

最近一直在学习React的相关技术，因为自己的主要技术栈还是Vue，想着学习别的框架，也能增长自己对于前端体系的更深入的理解，能够在不同的场景下合理使用不同的框架，今天就来对照盘点一下React&Vue3自定义Hooks的写法

什么是Hooks？

在我的理解中，我认为Hooks相当于组件级别的逻辑封装，它可以帮助我们更好地复用组件逻辑、提高代码的可读性以及解决类组件中常见的问题

定义Hooks的步骤

• 暴露一个Hooks函数
• 内部定义数据/状态
• 内部定义操作数据/状态的方法
• 将这些定义的内容return出去

Vue3自定义Hooks

import { ref } from 'vue';

export function useCounter() {
  const count = ref(0);

  function increment() {
    count.value++;
  }

  function decrement() {
    count.value--;
  }

  return {
    count,
    increment,
    decrement
  };
}

React自定义Hooks

import { useState } from 'react';

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

  function increment() {
    setCount(prevCount => prevCount + 1);
  }

  function decrement() {
    setCount(prevCount => prevCount - 1);
  }

  return {
    count,
    increment,
    decrement
  };
}

Vue3使用Hooks

Vue 3 中使用自定义 Hooks
import { useCounter } from './useCounter';

export default {
  setup() {
    const { count, increment, decrement } = useCounter();

    return {
      count,
      increment,
      decrement
    };
  }
}

React使用Hooks

React 中使用自定义 Hooks
import { useCounter } from './useCounter';

function CounterComponent() {
  const { count, increment, decrement } = useCounter();

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