React 自定义 Hooks 项目教程

石玥含Lane

于 2024-09-14 07:31:42 发布

阅读量721

点赞数 18

本文链接：https://blog.csdn.net/gitblog_00638/article/details/142240056

版权

React 自定义 Hooks 项目教程

react-custom-hooks React Custom Hooks @ S.Leschev: useArray useAsync useClickOutside useCookie useCopyToClipboard useDarkMode useDebounce useDebugInformation useDeepCompareEffect useEffectOnce useEventListener useFetch useGeolocation useHover useLongPress useMediaQuery useOnlineStatus useOnScreen usePrevious useRenderCount useScript etc. 项目地址: https://gitcode.com/gh_mirrors/re/react-custom-hooks

项目介绍

React 自定义 Hooks 是一个开源项目，旨在帮助开发者更好地理解和使用 React 中的自定义 Hooks。自定义 Hooks 允许开发者将组件逻辑提取到可重用的函数中，从而提高代码的可维护性和复用性。该项目提供了丰富的自定义 Hooks 示例和最佳实践，帮助开发者快速上手并应用到实际项目中。

项目快速启动

安装依赖

首先，克隆项目到本地：

git clone https://github.com/sergeyleschev/react-custom-hooks.git

进入项目目录并安装依赖：

cd react-custom-hooks
npm install

运行项目

安装完成后，启动开发服务器：

npm start

项目将在 http://localhost:3000 启动，你可以在浏览器中访问该地址查看示例应用。

创建自定义 Hook

以下是一个简单的自定义 Hook 示例，用于获取窗口的宽度：

import { useState, useEffect } from 'react';

function useWindowWidth() {
  const [width, setWidth] = useState(window.innerWidth);

  useEffect(() => {
    const handleResize = () => setWidth(window.innerWidth);
    window.addEventListener('resize', handleResize);
    return () => window.removeEventListener('resize', handleResize);
  }, []);

  return width;
}

export default useWindowWidth;

在组件中使用该 Hook：

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

function App() {
  const width = useWindowWidth();

  return (
    <div>
      <h1>窗口宽度: {width}px</h1>
    </div>
  );
}

export default App;

应用案例和最佳实践

1. 数据获取

自定义 Hook 可以用于封装数据获取逻辑，例如使用 fetch 或 axios 获取数据：

import { useState, useEffect } from 'react';

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

  useEffect(() => {
    async function fetchData() {
      try {
        const response = await fetch(url);
        const result = await response.json();
        setData(result);
      } catch (err) {
        setError(err);
      } finally {
        setLoading(false);
      }
    }

    fetchData();
  }, [url]);

  return { data, loading, error };
}

export default useFetch;

2. 表单处理

自定义 Hook 可以用于处理表单状态和验证：

import { useState } from 'react';

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

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

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

  return { values, handleChange, resetForm };
}

export default useForm;