自定義Hook函數

概念：自定義Hook是以 use 打頭的函數，通過自定義Hook函數可以用來實現邏輯的封裝和復用

簡單demo

封裝一個useChannel自定義hook

import { useEffect, useState } from 'react';
import { getChannelApi } from '@/apis/article';

export const useChannel = () => {
  const [channelList, setChannelList] = useState([]);
  useEffect(() => {
    const getChannelList = async () => {
      const res = await getChannelApi();
      setChannelList(res.data.channels);
    };
    getChannelList();
  }, []);
  return {
    channelList,
  };
};

在組件中引入并使用

// src/pages/Article/index.jsx
import { useChannel } from '@/hooks/useChannel';
const Article = () => {
  const { channelList } = useChannel();
  return (
    <ul>
      {channelList.map((item) => (
         <li key={item.id}>
           {item.name}
         </li>
      ))}
    </ul>
  )
}
export default Article;