自定義Hook本質上只是一種函數代碼邏輯的抽取，嚴格意義上來說，它本身并不算React的特性。

舉個例子：

需求：所有的組件在創建和銷毀時都進行打??；

• 組件被創建：打印，組件被創建了；
• 組件被銷毀：打印，組件被銷毀了；
  分析：如果對每個組件都搞一個useEffect來控制，未免也太繁瑣了；這時候我們需要對復用的代碼邏輯進行抽取。
  注意：在普通function中不能使用hooks；這時候，我們自定義hook名稱以use開頭，變成了useLoggingLife，就可以在其中用hooks了。

import React, { useEffect } from 'react'
const Home = (props) => {
  useLoggingLife("Home");
  return <h2>Home</h2>
}
const Profile = (props) => {
  useLoggingLife("Profile");
  return <h2>Profile</h2>
}
export default function CustomLifeHookDemo01() {
  useLoggingLife("CustomLifeHookDemo01")
  return (
    <div>
      <h2>CustomLifeHookDemo1</h2>
      <Home />
      <Profile />
    </div>
  )
}
function useLoggingLife(name) {
  useEffect(() => {
    console.log(`${name}組件被創建出來了`);
    return () => {
      console.log(`${name}組件被銷毀掉了`);
    }
  }, [])
}

抽離可復用代碼

import React from 'react'
import useUserContext from '../hooks/user-hook';
export default function CustomContextShareHook() {
  const [user, token] = useUserContext();
  console.log(user, token);
  return (
    <div>
      <h2>CustomContextShareHook</h2>
    </div>
  )
}

// user-hook
import { useContext } from "react";
import { UserContext, TokenContext } from "../App";
function useUserContext() {
  const user = useContext(UserContext);
  const token = useContext(TokenContext);
  return [user, token]
}
export default useUserContext;