自定义HooK

• 自定义hook本质上只是对逻辑代码的抽取，严格意义上，它本身并不能React的特性
• 自定义hook是一个函数，该函数命名以use开头
• hooks钩子可以放在自定义hook函数中，不能用于普通函数中

案列一： 组件的创建与销毁

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>useLoggingLife('CustomLifeHookDemo01');</h2>
      <Home/>
      <Profile/>
    </div>
  )
}

function useLoggingLife(name) {
  useEffect(() => {
    console.log(`${name}组件被创建出来了`);
    return () => {
      console.log(`${name}组件被销毁了`);
    }
  }, [])

}

案列二： Context的分享

// app.js页面
export const UserContext = createContext()
export const TokenContext = createContext()

<UserContext.Provider value={{name: 'why',age: 18}}>
  <TokenContext.Provider value='chenyun'>
    <CustomContextShareHook/>
  </TokenContext.Provider>
</UserContext.Provider>


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

// 页面使用
import React from 'react'
import useUserContext from '../hook/use-hook.js'

export default function CustomContextShareHook() {
  const [user, token] = useUserContext() 
  console.log(user,token);
  return (
    <div>
      <h2> CustomContextShareHook </h2>
    </div>
  )
}

案列三： 获取鼠标滚动位置

import { useState,useEffect } from "react"

function useScrollPosition() {
  const [scrollPosition, setscrollPosition] = useState(0)

  useEffect(()=> {

    const handleScroll = () => {
      setscrollPosition(window.scrollY)
    }

    document.addEventListener('scroll', handleScroll)


    return () => {
      document.removeEventListener('scroll', handleScroll)
    }
  },[])

  return scrollPosition
}
export default useScrollPosition