In React projects, we often use several built-in Hooks that come with React, such as useState, useContext and useEffect. But sometimes, we may want to have a Hook with a specific purpose: for example, useData to get data, useConnect to get connections, etc. Although these Hooks are not found in React, React provides a very flexible way for you to create your own custom Hooks for your needs.

How to customize Hooks

In React you must follow the following naming convention:

• React Component: React component names must be capitalized with Letters starting with , such as StatusBar and SaveButton. React components also need to return something that React knows how to render, such as JSX .

• React Hook: Hook name must start with use, followed by a uppercase letter, such as useState (built-in) or useStatus (custom ). Unlike React components, custom Hooks can return any value.

This naming convention ensures that you can always view the component and understand its status, effectsand other React features that may be "hidden"Location. For example, if you see a getColor() function call in a component, you can be sure that it cannot contain React state because its name does not start with use. However, function calls like useStatus() are likely to contain calls to other Hooks!

Shared logic between components

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

The core of custom Hooks is the logic between shared components. Using custom Hooks can reduce repetitive logic. More importantly, the code inside custom Hooks describes what they want to do, not how to do it. When you extract logic into custom Hooks, you can hidethe detailsof how to handle calls to certain "external systems" or browser APIs, as the component's code expresses Your intent, not implementation details. The following is a simple example:

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

This custom Hook is called

useCounter. It accepts an initial value as a parameter and returns an array containing the current count value and an increment count. function. Using a custom Hook is very simple, just call it in the function component. Here is an example of using 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>
  );
}

In this example, we imported

useCounter and called it in the component. We destructure the returned array into count and increment and use them in the component.

Custom Hooks allow you to share stateful logic, but not the state itself

Custom Hooks allow you to share stateful logic, but not the state itself. Each call to a Hook is completely independent of other calls to the same Hook. Take the above

useCounter as an example:

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>
  );
}

When we click

Increment2, it will not affect count1, because each The calls to useCounter are all independent, and their internal states are also independent.

Category

Functional Hooks

To achieve specific functions or purposes, regardless of specific business:

useWindowWidth

This hook returns The value of the window width.

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

This hook allows you to store and retrieve values ??from local storage.

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];
}

Business Hooks

useFetch

This hook allows you to get data from the 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

This hook allows you to manage the state of a modal dialog box.

//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;

Transmitting information between multiple Hooks

Since Hook itself is a function, we can pass information between them. Below we take

useUserInfo as an example to obtain user information:

//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>
	     ...
	  </> 
	)
}

We save the user id in the

userId state variable. When the user performs a certain operation setUserId , since useState provides us with the latest value of the userId state variable, we can pass it as a parameter to the custom useUserInfo Hook :

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

At this time, our

userInfo will be updated as userId changes.

Passing event handlers to custom Hooks

This section describes an

experimental API that has not yet been released in a stable version of React. This section describes an experimental API that is not yet released in a stable version of React.

你可能希望讓組件自定義其行為,而不是完全地將邏輯封裝 Hooks 中，我們可以通過(guò)將 event handlers 作為參數(shù)傳遞給 Hooks,下面是一個(gè)聊天室的例子：useChatRoom 接受一個(gè)服務(wù)端 url 和 roomId,當(dāng)調(diào)用這個(gè) Hook 的時(shí)候，會(huì)進(jìn)行連接，

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]);
}

假設(shè)當(dāng)連接成功時(shí)，你想將此邏輯移回你的組件：

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

要做到這一點(diǎn)，改變你的自定義 Hook ，把 onReceiveMessage 作為它的命名選項(xiàng)之一:

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
}

這可以工作，但是當(dāng)你的自定義 Hook 接受事件處理程序時(shí)，你還可以做一個(gè)改進(jìn)。 在 onReceiveMessage 上添加依賴(lài)并不理想，因?yàn)樗鼤?huì)導(dǎo)致每次組件重新渲染時(shí)聊天都重新連接。將此事件處理程序包裝到 EffectEvent 中以將其從依賴(lài)項(xiàng)中移除:

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
}

現(xiàn)在不會(huì)在每次重新渲染聊天室組件時(shí)進(jìn)行重新連接。

開(kāi)源 React Hooks 庫(kù)

• ahooks 一套由阿里巴巴開(kāi)源的 React Hooks 庫(kù)，封裝了大量好用的 Hooks。
• react-use 一個(gè)必不可少的 React Hooks 集合。其包含了傳感器、用戶(hù)界面、動(dòng)畫(huà)效果、副作用、生命周期、狀態(tài)這六大類(lèi)的Hooks。
• useHooks 一組易于理解的 React Hook集合。
• react-recipes 一個(gè)包含流行的自定義 Hook 的 React Hooks 實(shí)用程序庫(kù)。
• Rhooks ?一組基本的 React 自定義Hooks。
• react-hanger 一組有用的 hooks，用于特定于某些基本類(lèi)型的狀態(tài)更改輔助函數(shù)。
• Beautiful React Hook 一組漂亮的（希望有用的）React hooks 來(lái)加速你的組件和 hooks 開(kāi)發(fā)。
• Awesome React Hooks 一個(gè)很棒的 React Hooks 資源集合，該集合包含React Hooks教程、視頻、工具，Hooks列表。其中Hooks列表中包含了眾多實(shí)用的自定義Hooks。
• SWR 一個(gè)用于獲取數(shù)據(jù)的 React Hooks 庫(kù)。只需一個(gè)Hook，就可以顯著簡(jiǎn)化項(xiàng)目中的數(shù)據(jù)獲取邏輯。
• React Hook Form 一個(gè)用于表單狀態(tài)管理和驗(yàn)證的 React Hooks (Web + React Native)。

總結(jié)

自定義 Hooks 可以幫助你遷移到更好的開(kāi)發(fā)范式。通過(guò)將一些通用邏輯封裝在自定義 Hooks 中，你可以使組件代碼保持簡(jiǎn)潔并專(zhuān)注于核心意圖,這有助于減少重復(fù)性的代碼，并使你的代碼更易于維護(hù)和更新，從而使你能夠更快速地開(kāi)發(fā)新功能。

對(duì)于 Effect 而言,這樣可以使數(shù)據(jù)在 Effects 中流動(dòng)的過(guò)程變得非常明確。這讓你的組件能夠專(zhuān)注于意圖，而不是 Effects 的具體實(shí)現(xiàn)。當(dāng) React 添加新功能時(shí)，你可以刪除那些 Effects 而不影響任何組件。就像設(shè)計(jì)系統(tǒng)一樣，你可能會(huì)發(fā)現(xiàn)從應(yīng)用程序組件中提取常見(jiàn)習(xí)慣用法到自定義 Hooks 中是有非常幫助的。這將使你的組件代碼專(zhuān)注于意圖，并允許你避免頻繁編寫(xiě)原始 Effects，這也是 React 開(kāi)發(fā)者所推崇的。

(Learning video sharing: Basic Programming Video)

The above is the detailed content of In-depth understanding of React's custom Hooks. For more information, please follow other related articles on the PHP Chinese website!