自定义Hook的学习与使用~~~~~~~~

二. 自定义Hook

1. 认识自定义hook

自定义Hook本质上只是一种函数代码逻辑的抽取，严格意义上来说，它本身并不算React的特性。
自定义 Hook 是一个函数，其名称以 “use” 开头，函数内部可以调用其他的 Hook。

需求：所有的组件在创建和销毁时都进行打印

• 组件被创建：打印 组件被创建了；
• 组件被销毁：打印 组件被销毁了；

export default function CustomHookDemo() {
   
  useEffect(() => {
   
    console.log("组件被创建了");
    return () => {
   
      console.log("组件被销毁了");
    }
  }, [])

  return (
    <div>
      <h2>CustomHookDemo</h2>
    </div>
  )
}

但是这样来做意味着所有的组件都需要有对应的逻辑：

function Home(props) {
   
  useEffect(() => {
   
    console.log("组件被创建了");
    return () => {
   
      console.log("组件被销毁了");
    }
  }, [])
  return <h2>Home</h2>
}

function Profile(props) {
   
  useEffect(() => {
   
    console.log("组件被创建了");
    return () => {
   
      console.log("组件被销毁了");
    }
  }, [])
  return <h2>Profile</h2>
}

如何可以对它们的逻辑进行抽取呢？

• 我们可能希望抽取到一个函数中,普通的函数中不能使用hook；

那么，我们应该如何操作呢？

• 非常简单，函数以特殊的方式命名，以 use 开头即可，将其变成自定义Hook

function useLoggingLife() {
   
  useEffect(() => {
   
    console.log("组件被创建了");
    return () => {
   
      console