教你在react中创建自定义hooks

当我们在开发React应用时，很多时候我们会发现需要在多个组件中使用相同的逻辑，这时候我们可以使用自定义Hook来避免代码的重复。

创建自定义Hook的步骤

创建自定义Hook的步骤非常简单:

1. 创建一个函数, 函数名以 "use" 开头，这个函数可以接受任意参数，但是需要返回一个对象或数组作为其结果；
2. 在任意React组件中使用这个自定义Hook。

让我们看一个示例：

import { useState } from "react";

export const useCounter = (initialValue = 0, step = 1) => {
  const [count, setCount] = useState(initialValue);

  const increment = () => setCount(prev => prev + step);
  const decrement = () => setCount(prev => prev - step);

  return [count, increment, decrement];
};

这个自定义Hook可以使我们在应用中重用计数逻辑。 它返回一个数组，包含当前计数值，以及increment和decrement函数，用于增加/减少计数器的值。

我们可以在其他React组件中使用该Hook：

import { useCounter } from './useCounter';

function Counter() {
  const [count, increment, decrement] = useCounter(0, 2);

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

在这个示例中，Counter组件使用useCounter Hook。 我们传递了两个参数作为useCounter Hook的参数：初始值和步数。 我们还使用数组解构从useCounter Hook返回的数组中获取当前计数值，以及increment和decrement函数。

我们可以在我们的应用中尽可能多的使用自定义Hooks，以避免代码的重复，在下面我们举一些其他自定义Hooks实际应用的例子。

根据窗口大小调整样式

在许多情况下，我们需要根据窗口大小调整组件的样式。例如，如果窗口大小低于某个宽度阈值，可能需要隐藏某些元素。我们可以使用自定义Hook来达到这样的效果：

import { useEffect, useState } from "react";

export const useWindowSize = () => {
  const [windowSize, setWindowSize] = useState({
    width: undefined,
    height: undefined,
  });

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

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

  return windowSize;
};

这个自定义Hook返回当前窗口的宽度和高度，以及侦听大小调整事件并更新窗口大小的函数。我们可以这样使用这个自定义Hook：

import { useWindowSize } from "./useWindowSize";

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

  return (
    <div>
      <p>Window height: {height}</p>
      <p>Window width: {width}</p>
    </div>
  );
}

这个例子演示了如何在React组件中使用自定义Hook，以便在组件渲染时获取窗口的大小，并在窗口大小改变时进行更新。

控制用户点击时间

在许多情况下，我们需要控制用户在一定时间内进行重复点击，以避免用户在短时间内重复提交表单或数据。 我们可以使用一个自定义Hook来实现这个功能：

import { useState, useEffect } from "react";

export const useDebounce = (value, delay = 500) => {
  const [debouncedValue, setDebouncedValue] = useState(value);

  useEffect(() => {
    const debounceId = setTimeout(() => {
      setDebouncedValue(value);
    }, delay);

    return () => clearTimeout(debounceId);
  }, [value, delay]);

  return debouncedValue;
};

这个自定义Hook返回一个值，在指定时间内不会被更新。使用示例如下所示：

import { useState } from "react";
import { useDebounce } from "./useDebounce";

function MyComponent() {
  const [value, setValue] = useState("");
  const debouncedValue = useDebounce(value, 500);

  const handleChange = event => setValue(event.target.value);

  return (
    <div>
      <input type="text" value={value} onChange={handleChange} />
      <p>Debounced Value: {debouncedValue}</p>
    </div>
  );
}

在这个例子中，我们使用自定义Hook useDebounce，它会在用户停止输入指定时间后返回值。 我们可以指定需要防抖的值，以及在多长时间内不需要更新值。

现在你可以在React应用中使用自定义Hooks, 以避免代码的重复并使你的应用更加清晰易懂。