React Hook - 自定义Hook的基本使用和案例讲解

import { useEffect } from 'react'

// 自定义Hook
function useLogLife() {
  useEffect(() => {
    console.log("组件被创建")
    return () => {
      console.log("组件被销毁")
    }
  }, [])
}

import React, { memo, useState, useEffect } from 'react'

// 自定义Hook
function useLogLife() {
  useEffect(() => {
    console.log("组件被创建")
    return () => {
      console.log("组件被销毁")
    }
  }, [])
}

// Home组件
const Home = memo(() => {
  // 在组件中调用自定义Hook
  useLogLife()

  return (
    <h2>Home Page</h2>
  )
})

// About组件
const About = memo(() => {
  // 在组件中调用自定义Hook
  useLogLife()

  return (
    <h2>About Page</h2>
  )
})

// App根组件
const App = memo(() => {
  const [isShow, setIsShow] = useState(true)

  // 在组件中调用自定义Hook
  useLogLife()

  return (
    <div>
      <h2>App</h2>
      {/* 控制子组件显式隐藏 */}
      <button onClick={() => setIsShow(!isShow)}>切换</button>
      { isShow && <Home/> }
      { isShow && <About/> }
    </div>
  )
})

export default App

import { createContext } from "react";

const UserContext = createContext()
const TokenContext = createContext()

export {
  UserContext,
  TokenContext
}

const root = ReactDOM.createRoot(document.querySelector("#root"))

root.render(
  <UserContext.Provider value={{user: "chenyq", password: 1234}}>
    <TokenContext.Provider value={"abcdefg"}>
      <App/>
    </TokenContext.Provider>
  </UserContext.Provider>
)

import { useContext } from "react";
import { TokenContext, UserContext } from "../context";

function useUserToken() {
  const user = useContext(UserContext)
  const token = useContext(TokenContext)

  return [user, token]
}

export default useUserToken

import React, { memo } from 'react'
import useUserToken from './hooks/useUserToken'

// Home组件
const Home = memo(() => {
  const [user, token] = useUserToken()

  return (
    <h2>{user.user}-{user.password}-{token}</h2>
  )
})

// About组件
const About = memo(() => {
  const [user, token] = useUserToken()

  return (
    <h2>{user.user}-{user.password}-{token}</h2>
  )
})

// App根组件
const App = memo(() => {
  const [user, token] = useUserToken()

  return (
    <div>
      <h2>{user.user}-{user.password}-{token}</h2>
      <Home/>
      <About/>
    </div>
  )
})

export default App

import React, { memo } from 'react'
import useUserToken from './hooks/useUserToken'

// Home组件
const Home = memo(() => {
  const [user, token] = useUserToken()

  return (
    <h2>{user.user}-{user.password}-{token}</h2>
  )
})

// About组件
const About = memo(() => {
  const [user, token] = useUserToken()

  return (
    <h2>{user.user}-{user.password}-{token}</h2>
  )
})

// App根组件
const App = memo(() => {
  const [user, token] = useUserToken()

  return (
    <div>
      <h2>{user.user}-{user.password}-{token}</h2>
      <Home/>
      <About/>
    </div>
  )
})

export default App

import "./style.css"
import React, { memo } from 'react'
import useScrollPosition from './hooks/useScrollPosition'

// App根组件
const App = memo(() => {
  // 获取自定义Hook中监听滚动的数据
  const [scrollX, scrollY] = useScrollPosition()
  console.log(scrollX, scrollY)

  return (
    <div className="app">
      <h2>App</h2>
    </div>
  )
})

export default App