在React中如何使用Custom Hooks

在React中，可以使用自定義Hooks來(lái)提取組件中的邏輯，使得代碼更加清晰和易于復(fù)用。自定義Hooks是以u(píng)se開頭的函數(shù)，可以在函數(shù)組件中調(diào)用。例如，假設(shè)我們有一個(gè)需求是在多個(gè)組件中都需要獲取用戶信息，我們可以創(chuàng)建一個(gè)自定義Hooks來(lái)處理這個(gè)邏輯。

// useUserInfo.js
import { useState, useEffect } from 'react';

const useUserInfo = (userId) => {
  const [userInfo, setUserInfo] = useState(null);

  useEffect(() => {
    // 加載用戶信息的邏輯
    fetch(`https://api.example.com/user/${userId}`)
      .then(response => response.json())
      .then(data => setUserInfo(data))
      .catch(error => console.error(error));
  }, [userId]);

  return userInfo;
};

export default useUserInfo;

然后在需要獲取用戶信息的組件中，我們可以使用這個(gè)自定義Hooks：

// UserInfo.js
import React from 'react';
import useUserInfo from './useUserInfo';

const UserInfo = ({ userId }) => {
  const userInfo = useUserInfo(userId);

  if (!userInfo) {
    return <div>Loading...</div>;
  }

  return (
    <div>
      <div>Name: {userInfo.name}</div>
      <div>Email: {userInfo.email}</div>
    </div>
  );
};

export default UserInfo;

這樣，我們就可以在多個(gè)組件中重用獲取用戶信息的邏輯，使得代碼更加簡(jiǎn)潔和易于維護(hù)。