React Hook - 自定義Hook的基本使用和案例講解
自定義Hook
自定義Hook基本使用
自定義Hook本質(zhì)上只是一種函數(shù)代碼邏輯的抽取,嚴(yán)格意義上來(lái)說(shuō),它本身并不算React的特性。
例如有這樣一個(gè)需求: 所有的組件在創(chuàng)建和銷毀時(shí)都進(jìn)行打印
組件被創(chuàng)建: 打印組件被創(chuàng)建了;
組件被銷毀: 打印組件被銷毀了;
如果每個(gè)組件我們都單獨(dú)編寫(xiě)是非常繁瑣的, 并且有許多重復(fù)代碼; 我們可以將實(shí)現(xiàn)這樣邏輯相同的代碼抽離為一個(gè)自定義的Hook
import { useEffect } from 'react'
// 自定義Hook
function useLogLife() {
useEffect(() => {
console.log("組件被創(chuàng)建")
return () => {
console.log("組件被銷毀")
}
}, [])
}在其他的組件中調(diào)用自定義Hook即可
import React, { memo, useState, useEffect } from 'react'
// 自定義Hook
function useLogLife() {
useEffect(() => {
console.log("組件被創(chuàng)建")
return () => {
console.log("組件被銷毀")
}
}, [])
}
// Home組件
const Home = memo(() => {
// 在組件中調(diào)用自定義Hook
useLogLife()
return (
<h2>Home Page</h2>
)
})
// About組件
const About = memo(() => {
// 在組件中調(diào)用自定義Hook
useLogLife()
return (
<h2>About Page</h2>
)
})
// App根組件
const App = memo(() => {
const [isShow, setIsShow] = useState(true)
// 在組件中調(diào)用自定義Hook
useLogLife()
return (
<div>
<h2>App</h2>
{/* 控制子組件顯式隱藏 */}
<button onClick={() => setIsShow(!isShow)}>切換</button>
{ isShow && <Home/> }
{ isShow && <About/> }
</div>
)
})
export default App
自定義Hook案例練習(xí)
獲取Context數(shù)據(jù)
案例練習(xí)一: Context的共享, 例如我們有UserContext和TokenContext需要在多個(gè)組件中使用
例如先定義兩個(gè)Context
import { createContext } from "react";
const UserContext = createContext()
const TokenContext = createContext()
export {
UserContext,
TokenContext
}使用定義的Context對(duì)App組件進(jìn)包裹
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>
)將從Context中獲取數(shù)據(jù)的操作封裝到一個(gè)自定義Hook中
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在其他要使用UserContext和TokenContext共享數(shù)據(jù)的組件中直接使用自定義Hook即可, 就不需要再單獨(dú)的
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
獲取窗口滾輪數(shù)據(jù)
案例練習(xí)二: 在組件中監(jiān)聽(tīng)鼠標(biāo)滾輪的位置, 如多個(gè)組件中都需要監(jiān)聽(tīng)鼠標(biāo)滾輪的數(shù)據(jù), 我們就可以封裝到一個(gè)自定義的Hook中
封裝一個(gè)自定義的Hook監(jiān)聽(tīng)鼠標(biāo)滾動(dòng)的數(shù)據(jù), 由于監(jiān)聽(tīng)的操作屬于是副作用, 并且使用自定義Hook的組件如果重新渲染, 我們監(jiān)聽(tīng)的操作是不需要重新執(zhí)行的, 因此我們編寫(xiě)在Effect Hook中
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在需要監(jiān)聽(tīng)的組件中調(diào)用自定義Hook, 就可以拿到滾動(dòng)的數(shù)據(jù)
import "./style.css"
import React, { memo } from 'react'
import useScrollPosition from './hooks/useScrollPosition'
// App根組件
const App = memo(() => {
// 獲取自定義Hook中監(jiān)聽(tīng)滾動(dòng)的數(shù)據(jù)
const [scrollX, scrollY] = useScrollPosition()
console.log(scrollX, scrollY)
return (
<div className="app">
<h2>App</h2>
</div>
)
})
export default App到此這篇關(guān)于React Hook - 自定義Hook的基本使用和案例練習(xí)的文章就介紹到這了,更多相關(guān)React自定義Hook內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
react實(shí)現(xiàn)阻止父容器滾動(dòng)
這篇文章主要介紹了react實(shí)現(xiàn)阻止父容器滾動(dòng)方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-11-11
react中關(guān)于Context/Provider/Consumer傳參的使用
這篇文章主要介紹了react中關(guān)于Context/Provider/Consumer傳參的使用,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-09-09
React實(shí)現(xiàn)浮層組件的思路與方法詳解
React?浮層組件(也稱為彈出組件或彈窗組件)通常是指在用戶界面上浮動(dòng)顯示的組件,本文主要介紹了浮層組件的實(shí)現(xiàn)方法,感興趣的小伙伴可以了解下2024-02-02

