52.React学习笔记.自定义hook

自定义Hook本质上只是一种函数代码逻辑的抽取，严格意义上来说，它本身并不算React的特性。

举个例子：

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

• 组件被创建：打印，组件被创建了；
• 组件被销毁：打印，组件被销毁了；
  分析：如果对每个组件都搞一个useEffect来控制，未免也太繁琐了；这时候我们需要对复用的代码逻辑进行抽取。
  注意：在普通function中不能使用hooks；这时候，我们自定义hook名称以use开头，变成了useLoggingLife，就可以在其中用hooks了。

import React, { useEffect } from 'react'
const Home = (props) => {
  useLoggingLife("Home");
  return 
Home
}
const Profile = (props) => {
  useLoggingLife("Profile");
  return 
Profile
}
export default function CustomLifeHookDemo01() {
  useLoggingLife("CustomLifeHookDemo01")
  return (
    

      
CustomLifeHookDemo1
      
      
    
  )
}
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 (
    

      
CustomContextShareHook
    
  )
}

// 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;