基于另一个函数创建react钩子

在React中，钩子（Hooks）是一种特殊的函数，允许你在不编写类的情况下使用状态和其他React特性。基于另一个函数创建React钩子通常意味着你需要创建一个自定义钩子（Custom Hook），这个钩子可以封装一些逻辑并在组件之间复用。

基础概念

自定义钩子是一个以use开头的函数，它可以调用其他钩子（如useState、useEffect等），并且可以返回一些状态或回调函数供组件使用。

类型与应用场景

自定义钩子的类型和应用场景非常广泛，例如：

状态管理：封装复杂的状态逻辑。
副作用处理：如数据获取、订阅或手动更改DOM等。
表单处理：集中管理表单的状态和验证逻辑。
动画控制：管理动画的状态和生命周期。

示例代码

假设我们有一个需求，需要在多个组件中检测窗口大小的变化，并获取当前的宽度和高度。我们可以创建一个名为useWindowSize的自定义钩子：

import { useState, useEffect } from 'react';

function useWindowSize() {
  const [windowSize, setWindowSize] = useState({
    width: window.innerWidth,
    height: window.innerHeight,
  });

  useEffect(() => {
    function handleResize() {
      setWindowSize({
        width: window.innerWidth,
        height: window.innerHeight,
      });
    }

    window.addEventListener('resize', handleResize);

    // 清理函数
    return () => window.removeEventListener('resize', handleResize);
  }, []); // 空依赖数组确保只在组件挂载和卸载时执行

  return windowSize;
}

export default useWindowSize;

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

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

function MyComponent() {
  const { width, height } = useWindowSize();

  return (
    <div>
      当前窗口宽度：{width}px
      <br />
      当前窗口高度：{height}px
    </div>
  );
}

export default MyComponent;