您好,登錄后才能下訂單哦!
這篇文章主要介紹了React Hooks如何使用的相關(guān)知識(shí),內(nèi)容詳細(xì)易懂,操作簡單快捷,具有一定借鑒價(jià)值,相信大家閱讀完這篇React Hooks如何使用文章都會(huì)有所收獲,下面我們一起來看看吧。
在react類組件(class)寫法中,有setState和生命周期對(duì)狀態(tài)進(jìn)行管理,但是在函數(shù)組件中不存在,因此引入hooks
React的組件創(chuàng)建方式,一種是類組件,一種是純函數(shù)組件,并且React團(tuán)隊(duì)希望,組件不要變成復(fù)雜的容器,最好只是數(shù)據(jù)流的管道。開發(fā)者根據(jù)需要,組合管道即可。也就是說組件的最佳寫法應(yīng)該是函數(shù),而不是類。
使用hooks理由
高階組件為了復(fù)用,導(dǎo)致代碼層級(jí)復(fù)雜
生命周期的復(fù)雜
寫成functional組件,無狀態(tài)組件 ,因?yàn)樾枰獱顟B(tài),又改成了class,成本高
類組件與函數(shù)組件的區(qū)別:
函數(shù)組件沒有生命周期,類組件有(掛載、更新、銷毀)
函數(shù)組件沒有狀態(tài)(state),類組件有
函數(shù)組件沒有this,類組件有
純函數(shù)組件沒有狀態(tài),useState()用于設(shè)置和使用組件的狀態(tài)屬性
const [state, setstate] = useState(initialState) //state:初始狀態(tài)屬性,指向狀態(tài)當(dāng)前值 //setstate:修改狀態(tài)屬性函數(shù),用來更新狀態(tài) //initialState:狀態(tài)的初始值,該值會(huì)賦給state
state是一個(gè)對(duì)象:
setState()不會(huì)局部更新
useEffect()是副作用的鉤子,可以檢測數(shù)據(jù)更新 ,可以實(shí)現(xiàn)特定的功能,如異步請(qǐng)求
useEffect()接受兩個(gè)參數(shù),第一個(gè)參數(shù)是你要進(jìn)行的異步操作,第二個(gè)參數(shù)是一個(gè)數(shù)組,用來給出Effect()的依賴項(xiàng)。
只要數(shù)組發(fā)生改變,useEffect()就會(huì)執(zhí)行。
當(dāng)?shù)诙?xiàng)省略不填時(shí),useEffect()會(huì)在每次組件渲染時(shí)執(zhí)行,這一點(diǎn)類似于componentDidMount。
useEffect(() => { //effect return () => { //cleanup }; }, [依賴的狀態(tài);空數(shù)組,表示不依賴])
不要對(duì) Dependencies 撒謊,如果你明明使用了某個(gè)變量,卻沒有申明在依賴中,你等于向 React撒了謊,后果就是,當(dāng)依賴的變量改變時(shí),useEffffect也不會(huì)再次執(zhí)行, eslint會(huì)報(bào)警告
useEffffect和useLayoutEffffect區(qū)別:
簡單來說就是調(diào)用時(shí)機(jī)不useLayoutEffect() 和原來componentDidMount &componentDidUpdate
一致,在react完成DOM更新后馬上同步調(diào)用的代碼,會(huì)阻塞頁面渲染。而 useEffect() 是會(huì)在整個(gè)頁面渲染完才會(huì)異步調(diào)用。
在實(shí)際使用時(shí)如果想避免頁面抖動(dòng)(在 useEffect 里修改DOM很有可能出現(xiàn))的話,可以把需要操作DOM的代碼放useLayoutEffect 里。在這里做點(diǎn)dom操作,這些dom修改會(huì)和 react 做出的更改一起被一次性渲染到屏幕上
防止因?yàn)榻M件重新渲染,導(dǎo)致方法被重新創(chuàng)建,起到緩存作用;只有第二個(gè)參數(shù) 變化了,才重新聲明一次
var handleClick = useCallback(()=>{ console.log(name) },[name]) <button onClick={()=>handleClick()}>hello</button> //只有name改變后, 這個(gè)函數(shù)才會(huì)重新聲明一次, //如果傳入空數(shù)組, 那么就是第一次創(chuàng)建后就被緩存, 如果name后期改變了,拿到的還是老的name。 //如果不傳第二個(gè)參數(shù),每次都會(huì)重新聲明一次,拿到的就是最新的name.
useCallback() 的功能完全可以由 useMemo() 所取代,使用 useMemo() 也可以返回一個(gè)記憶函數(shù)
useCallback(fn, inputs) is equivalent to useMemo(() => fn, inputs).
useCallback()與useMemo()的區(qū)別:
useCallback 不會(huì)執(zhí)行第一個(gè)參數(shù)函數(shù),而是將它返回給你,而useMemo會(huì)執(zhí)行第一個(gè)函數(shù)并且將函數(shù)執(zhí)行結(jié)果返回給你。
useCallback() 常用記憶事件函數(shù),生成記憶后的事件函數(shù)并傳遞給子組件使用。而 useMemo() 更適合經(jīng)過函數(shù)
用于在函數(shù)組件中獲取真實(shí)的DOM元素對(duì)象或者是組件實(shí)例。(因?yàn)楹瘮?shù)組件沒有實(shí)例,所以這里的獲取組件實(shí)例指的是獲取類組件實(shí)例)
返回值是一個(gè)可變的ref對(duì)象,并且這個(gè)對(duì)象的值發(fā)生改變時(shí)不會(huì)引起頁面的渲染。
const myswiper = useRef(null); <Swiper ref={myswipe}/
useRef()可以存儲(chǔ)不需要引起頁面渲染的數(shù)據(jù);修改useRef值的唯一方法是修改.current,且修改后不會(huì)引起重渲染。
在使用React的過程中,如遇到狀態(tài)管理,一般會(huì)用到Redux,而React本身是不提供狀態(tài)管理的。而useReducer()提供了狀態(tài)管理
useState() 的替代方案,用于包含多種狀態(tài),或者下一個(gè) state 依賴于之前的 state,實(shí)現(xiàn)函數(shù)組件的狀態(tài)管理。
基本原理是通過用戶在頁面中發(fā)起action, 從而通過reducer方法來改變state, 從而實(shí)現(xiàn)頁面和狀態(tài)的通信。
useContext()可以共享狀態(tài),作用是進(jìn)行狀態(tài)的分發(fā),避免了使用Props進(jìn)行數(shù)據(jù)的傳遞
import React from 'react' var GlobalContext= React.createContext() // 注意此時(shí)的reduecer 返回值是一個(gè)對(duì)象 {isShow:false,list:[]} function App(props){ let [state,dispatch] = useReducer(reducer,{isShow:true,list:[]}) return <GlobalContext.Provider value={{ dispatch }}> <div> { state.isShow? <div >我是選項(xiàng)卡</div> :null } {props.children} </div> </GlobalContext.Provider> } function Detail(){ var {dispatch} = useContext(GlobalContext) useEffect(() => { //隱藏 dispatch({ type:"Hide", payload:false }) return () => { //顯示 dispatch({ type:"Show", payload:true }) }; }, []) return <div> detail </div> }
當(dāng)我們想在兩個(gè)函數(shù)之間共享邏輯時(shí),我們會(huì)把它提取到第三個(gè)函數(shù)中。
用戶自定義的Hooks:
命名的要求:用use開頭,后跟名稱(首字母大寫)
作用:根據(jù)具體業(yè)務(wù)的需求,對(duì)Hooks中默認(rèn)的鉤子函數(shù)進(jìn)行封裝,使代碼的結(jié)構(gòu)更加清晰,便于使用和維護(hù)
import React, { useEffect, useState } from 'react' function useToLocaleUpperCase(text) { const [name, setName] = useState(text) useEffect(() => { setName(name.toLocaleUpperCase()) }, []) return { name }; } export default function App() { const { name } = useToLocaleUpperCase('zhansan') return ( <div>App-{name} <Child></Child> </div> ) } function Child() { const { name } = useToLocaleUpperCase('lisi') return ( <div>App-{name}</div> ) }
關(guān)于“React Hooks如何使用”這篇文章的內(nèi)容就介紹到這里,感謝各位的閱讀!相信大家對(duì)“React Hooks如何使用”知識(shí)都有一定的了解,大家如果還想學(xué)習(xí)更多知識(shí),歡迎關(guān)注億速云行業(yè)資訊頻道。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請(qǐng)聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。