React18之自定义Hook(学习笔记)

自定义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;