详解React自定义Hook

更新时间：2023年04月21日 11:55:34 作者：Aphelios_

在React项目中,我们经常会使用到React自带的几个内置Hooks，如 useState，useContext和useEffect。虽然在React中找不到这些 Hooks，但React提供了非常灵活的方式让你为自己的需求来创建自己的自定义Hooks，想了解更多的，欢迎阅读本文

前言

在 React 项目中,我们经常会使用到 React 自带的几个内置 Hooks，如 useState，useContext 和useEffect。但有时，我们可能希望有一个特定目的的 Hook ：例如获取数据 useData，获取连接 useConnect 等。虽然在 React 中找不到这些 Hooks，但 React 提供了非常灵活的方式让你为自己的需求来创建自己的自定义 Hooks。

如何自定义 Hooks

在 React 中你必须遵循以下命名约定:

React Component: React 组件名称必须以大写字母开头，如 StatusBar 和 SaveButton。React组件还需要返回一些React知道如何渲染的东西，比如 JSX 。
React Hook: Hook 名必须以 use 开头，后面跟着一个大写字母，比如 useState (内置)或useStatus (自定义)。与 React 组件不同的是自定义 Hook 可以返回任意值。

这个命名约定确保你始终可以查看组件，并了解其状态、效果以及其他 React 特性可能“隐藏”的位置。例如，如果你在组件中看到 getColor() 函数调用，你可以确定它不可能包含 React state，因为其名称不以use开头。但是，像 useStatus() 这样的函数调用很可能包含对其他 Hooks 的调用！

组件之间共享逻辑

The code inside them describes what they want to do rather than how to do it .

自定义 Hooks 的核心是共享组件之间的逻辑。使用自定义 Hooks 能够减少重复的逻辑，更重要的是，自定义 Hooks 内部的代码描述了它们想做什么，而不是如何做。当你将逻辑提取到自定义Hooks 中时，你可以隐藏如何处理某些"外部系统"或浏览器 API 的调用的细节,组件的代码表达的是你的意图，而不是实现细节。下面是一个简单的例子：

import { useState } from 'react';
function useCounter(initialValue) {
  const [count, setCount] = useState(initialValue);
  function increment() {
    setCount(count + 1);
  }
  return [count, increment];
}

这个自定义 Hook 叫做 useCounter，它接受一个初始值作为参数，并返回一个数组，包含当前的计数值和一个增加计数的函数。使用自定义 Hook 非常简单，只需要在函数组件中调用它即可。下面是一个使用 useCounter 的例子：

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

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

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

在这个例子中，我们导入了 useCounter，并在组件中调用它。我们将返回的数组解构为 count 和 increment，然后在组件中使用它们。

自定义 Hooks 允许你共享有状态逻辑，而不是状态本身

自定义 Hooks 允许共享有状态逻辑，但不能共享状态本身。每个对 Hook 的调用都完全独立于对同一个 Hook 的其他调用。以上面的 useCounter 为例:

import useCounter from './useCounter';
function Counter() {
	const [count1, increment1] = useCounter(0);
	const [count2, increment2] = useCounter(100);
  return (
    <div>
      <p>Count1: {count1}</p>
      <button onClick={increment1}>Increment1</button>
       <p>Count2: {count2}</p>
      <button onClick={increment2}>Increment2</button>
    </div>
  );
}

当我们点击 Increment2 时，并不会影响 count1 ,因为每一个 useCounter 的调用都是独立的，其内部状态也是独立的。

分类

功能型 Hooks

以实现特定功能或目的,与具体业务无关:

useWindowWidth

该 hook 返回窗口宽度的值。

import { useState, useEffect } from 'react';
function useWindowWidth() {
  const [windowWidth, setWindowWidth] = useState(window.innerWidth);
  useEffect(() => {
    const handleResize = () => setWindowWidth(window.innerWidth);
    window.addEventListener('resize', handleResize);
    return () => window.removeEventListener('resize', handleResize);
  }, []);
  return windowWidth;
}

useLocalStorage

该 hook 允许你在本地存储中存储和检索值。

import { useState } from 'react';

function useLocalStorage(key, initialValue) {
  const [storedValue, setStoredValue] = useState(() => {
    try {
      const item = window.localStorage.getItem(key);
      return item ? JSON.parse(item) : initialValue;
    } catch (error) {
      console.log(error);
      return initialValue;
    }
  });

  const setValue = (value) => {
    try {
      setStoredValue(value);
      window.localStorage.setItem(key, JSON.stringify(value));
    } catch (error) {
      console.log(error);
    }
  };

  return [storedValue, setValue];
}

业务型 Hooks

useFetch

该 hook 允许你从 API 中获取数据。

import { useState, useEffect } from 'react';
function useFetch(url) {
  const [data, setData] = useState(null);
  const [error, setError] = useState(null);
  const [isLoading, setIsLoading] = useState(true);
  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await fetch(url);
        const json = await response.json();
        setData(json);
      } catch (error) {
        setError(error);
      } finally {
        setIsLoading(false);
      }
    };
    fetchData();
  }, [url]);
  return { data, error, isLoading };
}

useModal

该 hook 允许你管理模态对话框的状态。

//useFetch.js
import {useState, useEffect} from 'react'
//don't forget to give a url parameter for the function.
const useFetch = (url)=>{
  const [data, setData] = useState([])
  const getData = async ()=>{
    const response = await fetch(url)
    const userdata = await response.json()
    setData(userdata)
  }
 useEffect(()=>{
    getData()
  },[url])
  //return data that we will need in other components.
  return {data};
}
export default useFetch;

在多个 Hook 之间传递信息

由于 Hook 本身就是函数，因此我们可以在它们之间传递信息。下面我们以 useUserInfo 获取用户信息为例：

//useUserInfo.jsx
import { useEffect,useState } from 'react'
const useUserInfo = (userId) => {
  const [userInfo, setUserInfo] = useState({})
  useEffect(() => {
    fetch('/user')
      .then(res => res.json())
      .then(data => setUserInfo(data))
  }, [userId])
  return userInfo
}
//Home.jsx
...
const Home = ()=>{
	const [userId,setUserId] = useState('103')
	const useInfo = useUserInfo(userId)
	return (
	  <>
	     <div>name:{userInfo.name}</div>
	     <div>age:{userInfo.age}</div>
	     ...
	  </> 
	)
}

我们将用户 id 保存在 userId 状态变量中，当用户进行某一操作 setUserId 时，由于 useState 为我们提供了 userId 状态变量的最新值，因此我们可以将它作为参数传递给自定义的 useUserInfo Hook：

const [userId,setUserId] = useState('103')
const userInfo = useUserInfo(userId)

此时，我们的 userInfo 会随着 userId 的改变而更新。

将 event handlers 传递给自定义 Hooks

This section describes an experimental API that has not yet been released in a stable version of React. 本节描述了一个尚未在 React 稳定版本中发布的实验性 API。

你可能希望让组件自定义其行为,而不是完全地将逻辑封装 Hooks 中，我们可以通过将 event handlers 作为参数传递给 Hooks,下面是一个聊天室的例子： useChatRoom 接受一个服务端 url 和 roomId,当调用这个 Hook 的时候，会进行连接，

export function useChatRoom({ serverUrl, roomId }) {
  useEffect(() => {
    const options = {
      serverUrl: serverUrl,
      roomId: roomId
    };
    const connection = createConnection(options);
    connection.connect();
    connection.on('message', (msg) => {
      showNotification('New message: ' + msg);
    });
    return () => connection.disconnect();
  }, [roomId, serverUrl]);
}

假设当连接成功时，你想将此逻辑移回你的组件：

export default function ChatRoom({ roomId }) {
  const [serverUrl, setServerUrl] = useState('https://localhost:1234');
  useChatRoom({
    roomId: roomId,
    serverUrl: serverUrl,
    onReceiveMessage(msg) {
      showNotification('New message: ' + msg);
    }
  });
  // ...

要做到这一点，改变你的自定义 Hook ，把 onReceiveMessage 作为它的命名选项之一:

export function useChatRoom({ serverUrl, roomId, onReceiveMessage }) {
  useEffect(() => {
    const options = {
      serverUrl: serverUrl,
      roomId: roomId
    };
    const connection = createConnection(options);
    connection.connect();
    connection.on('message', (msg) => {
      onReceiveMessage(msg);
    });
    return () => connection.disconnect();
  }, [roomId, serverUrl, onReceiveMessage]); // ✅ All dependencies declared
}

这可以工作，但是当你的自定义 Hook 接受事件处理程序时，你还可以做一个改进。在 onReceiveMessage 上添加依赖并不理想，因为它会导致每次组件重新渲染时聊天都重新连接。将此事件处理程序包装到 EffectEvent 中以将其从依赖项中移除:

import { useEffect, useEffectEvent } from 'react';  
// ...
export function useChatRoom({ serverUrl, roomId, onReceiveMessage }) {
  const onMessage = useEffectEvent(onReceiveMessage);
  useEffect(() => {
    const options = {
      serverUrl: serverUrl,
      roomId: roomId
    };
    const connection = createConnection(options);
    connection.connect();
    connection.on('message', (msg) => {
      onMessage(msg);
    });
    return () => connection.disconnect();
  }, [roomId, serverUrl]); // ✅ All dependencies declared
}

现在不会在每次重新渲染聊天室组件时进行重新连接。

开源 React Hooks 库

ahooks 一套由阿里巴巴开源的 React Hooks 库，封装了大量好用的 Hooks。
react-use 一个必不可少的 React Hooks 集合。其包含了传感器、用户界面、动画效果、副作用、生命周期、状态这六大类的Hooks。
useHooks 一组易于理解的 React Hook集合。
react-recipes 一个包含流行的自定义 Hook 的 React Hooks 实用程序库。
Rhooks 一组基本的 React 自定义Hooks。
react-hanger 一组有用的 hooks，用于特定于某些基本类型的状态更改辅助函数。
Beautiful React Hook 一组漂亮的（希望有用的）React hooks 来加速你的组件和 hooks 开发。
Awesome React Hooks 一个很棒的 React Hooks 资源集合，该集合包含React Hooks教程、视频、工具，Hooks列表。其中Hooks列表中包含了众多实用的自定义Hooks。
SWR 一个用于获取数据的 React Hooks 库。只需一个Hook，就可以显着简化项目中的数据获取逻辑。
React Hook Form 一个用于表单状态管理和验证的 React Hooks (Web + React Native)。

总结

自定义 Hooks 可以帮助你迁移到更好的开发范式。通过将一些通用逻辑封装在自定义 Hooks 中，你可以使组件代码保持简洁并专注于核心意图,这有助于减少重复性的代码，并使你的代码更易于维护和更新，从而使你能够更快速地开发新功能。

对于 Effect 而言,这样可以使数据在 Effects 中流动的过程变得非常明确。这让你的组件能够专注于意图，而不是 Effects 的具体实现。当 React 添加新功能时，你可以删除那些 Effects 而不影响任何组件。就像设计系统一样，你可能会发现从应用程序组件中提取常见习惯用法到自定义 Hooks 中是有非常帮助的。这将使你的组件代码专注于意图，并允许你避免频繁编写原始 Effects，这也是 React 开发者所推崇的。

以上就是详解React自定义Hook的详细内容，更多关于React自定义Hook的资料请关注脚本之家其它相关文章！

您可能感兴趣的文章:

再次谈论React.js实现原生js拖拽效果引起的一系列问题
React 起源于 Facebook 的内部项目，因为该公司对市场上所有 JavaScript MVC 框架，都不满意，就决定自己写一套，用来架设 Instagram 的网站.本文给大家介绍React.js实现原生js拖拽效果，需要的朋友一起学习吧
2016-04-04
React 组件中实现事件代理
React的事件系统和浏览器事件系统相比,主要增加了两个特性：事件代理、和事件自动绑定,本文主要介绍了React 组件中实现事件代理,具有一定的参考价值,感兴趣的可以了解一下
2024-01-01
使用 React 和 Threejs 创建一个VR全景项目的过程详解
这篇文章主要介绍了使用 React 和 Threejs 创建一个VR全景项目的过程详解,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2021-04-04
React通过父组件传递类名给子组件的实现方法
React 是一个用于构建用户界面的 JAVASCRIPT 库。这篇文章主要介绍了React通过父组件传递类名给子组件的方法,需要的朋友可以参考下
2017-11-11
React表单容器的通用解决方案
本文主要介绍了React表单容器的通用解决方案，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-04-04
React避免不必要的重新渲染的方法示例
构建高性能 React 应用程序的关键之一是避免不必要的重新渲染,React 的渲染引擎是高效的,但防止在不需要的地方重新渲染仍然至关重要,在这篇文章中,我们将介绍常见错误以及如何避免它们,需要的朋友可以参考下
2024-10-10
React项目中使用Redux的 react-redux
这篇文章主要介绍了React项目中使用Redux的 react-redux，文章围绕主题展开详细的内容介绍，具有一定的参考价值，需要的小伙伴可以参考一下
2022-09-09
redux的原理、工作流程及其应用方式
这篇文章主要介绍了redux的原理、工作流程及其应用方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-07-07
使用react-activation实现keepAlive支持返回传参
本文主要介绍了使用react-activation实现keepAlive支持返回传参，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2022-05-05
useState 解决文本框无法输入的问题详解
这篇文章主要为大家介绍了useState 解决文本框无法输入的问题详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-03-03