「React」自定义Hook入门及应用

如何自定义Hook？

在React中，自定义Hooks是一种特殊的函数，它们可以使用其他Hooks。自定义Hooks允许你将组件逻辑提取到可重用的函数中。自定义Hooks通常以use为前缀，这是一个约定，有助于识别其作为Hook的功能。

以下是如何创建和使用自定义Hook的步骤：

定义自定义Hook

自定义Hook就是一个普通的JavaScript函数，但它可以调用其他的Hooks。

import { useState, useEffect } from 'react';

function useCustomCounter(initialValue) {
    const [count, setCount] = useState(initialValue);

    useEffect(() => {
        document.title = `Count: ${count}`;
    }, [count]);

    const increment = () => setCount(prevCount => prevCount + 1);
    const decrement = () => setCount(prevCount => prevCount - 1);

    return [count, increment, decrement];
}

在上述示例中，我们创建了一个名为useCustomCounter的自定义Hook，它返回当前的计数值以及增加和减少计数的函数。

使用自定义Hook

你可以在组件中像使用内置Hooks一样使用自定义Hooks。

import React from 'react';
import useCustomCounter from './path-to-your-custom-hook';

function CounterComponent() {
      const [count, increment, decrement] = useCustomCounter(0);

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

在上述示例中，我们在CounterComponent组件中使用了useCustomCounter Hook，并显示了计数值以及增加和减少计数的按钮。

注意：与其他Hooks一样，自定义Hooks也必须遵循Hooks的规则。例如，你只能在函数组件的顶层调用Hooks，不要在循环、条件或嵌套函数中调用它们。

总的来说，自定义Hooks提供了一种将组件逻辑提取到可重用函数中的方法，使得代码更加干净、可维护，并避免重复。

应用举例

自定义Hooks提供了一种优雅的方式来重用组件逻辑，而不需要重新渲染组件或使用更复杂的模式，如高阶组件或渲染props。以下是一些常见的使用自定义Hooks的场景和例子：

数据获取

如果你在多个组件中获取数据，你可以使用自定义Hook来封装数据获取的逻辑。

function useFetch(url) {
      const [data, setData] = useState(null);
      const [loading, setLoading] = useState(true);

      useEffect(() => {
          fetch(url)
              .then(response => response.json())
              .then(data => {
                  setData(data);
                  setLoading(false);
              });
      }, [url]);

      return [data, loading];
}

表单处理

自定义Hook可以帮助你处理表单输入、验证和提交。

function useForm(initialValues) {
      const [values, setValues] = useState(initialValues);

      const handleChange = (event) => {
          const { name, value } = event.target;
          setValues(prev => ({ ...prev, [name]: value }));
      };

      const resetForm = () => setValues(initialValues);

      return [values, handleChange, resetForm];
}

监听事件

如果你需要在多个组件中监听相同的事件，如窗口大小变化或键盘事件，你可以使用自定义Hook。

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

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

    window.addEventListener('resize', handleResize);
        return () => window.removeEventListener('resize', handleResize);
    }, []);

    return size;
}

动画和过渡

自定义Hook可以帮助你管理动画和过渡的状态。

function useFadeIn(delay) {
    const [opacity, setOpacity] = useState(0);

    useEffect(() => {
        const fadeIn = setTimeout(() => setOpacity(1), delay);
        return () => clearTimeout(fadeIn);
    }, [delay]);

    return opacity;
}

与设备APIs交互

例如，你可以创建一个自定义Hook来获取用户的地理位置。

function useGeolocation() {
    const [location, setLocation] = useState(null);

    useEffect(() => {
        navigator.geolocation.getCurrentPosition(position => {
            setLocation(position.coords);
        });
    }, []);

    return location;
}

这些只是一些使用自定义Hooks的例子。实际上，任何你想在多个组件中重用的逻辑都可以被封装到自定义Hook中，从而使代码更加干净、模块化和可维护。