Vue 中的指令、React 中的 hooks 都是框架的核心知識點。但是對于很多同學來說,因為日常工作中開發的局限性,所以對這些 指令 或 hooks 認知的并不全面,一旦在面試的時候被問到不熟悉的 指令 或者 hooks 可能就會吃虧。
所以說,咱們今天就先來整理一下 React 中的 hooks,整理的過程會 由淺入深 同時配合一些代碼進行說明。爭取讓哪怕不是很熟悉 react 的同學,也可以在本文章中有一定的收獲。
在 React 16.8 之后,react 使用 函數 表示組件,稱為 函數式組件。
例如以下代碼,就是兩個基礎函數式組件(App 與 Greeting):
import React from 'react';// 函數組件function Greeting(props) { return <h1>Hello, {props.name}!</h1>;}// 使用函數組件function App() { return ( <div> <Greeting name="Alice" /> <Greeting name="Bob" /> <Greeting name="Charlie" /> </div> );}export default App;
在 React 中 以 use 開頭的函數 就被稱之為 hooks。
React 默認提供一些 hooks。同樣的,我們也可以自定義一些函數(以 use)開頭,那么該函數就可以被稱為是 hooks。
import { useState } from 'react';// 最簡單的自定義Hooksfunction useMyCustomHook() { // 在這個例子中,我們只是返回一個固定的值 const [value] = useState("Hello, World!"); return value;}export default useMyCustomHook;
如果沒有Hooks,函數組件的功能相對有限,只能接受 Props、渲染UI,以及響應來自父組件的事件。
因此,Hooks的出現主要是為了解決是哪個問題:
React Hooks 根據性能可以劃分為 5 大類:
useState是React提供的一個Hook,它讓函數組件也能像類組件一樣擁有狀態。通過useState,你可以讓組件在內部管理一些數據,并在數據更新時重新渲染視圖。
在使用useState時,你會得到一個包含兩個值的數組:
useState的基礎用法如下:
const DemoState = (props) => { // number是當前state的值,setNumber是用于更新state的函數 let [number, setNumber] = useState(0) // 0為初始值 return ( <div> <span>{number}</span> <button onClick={() => { setNumber(number + 1) console.log(number) // 這里的number是不能夠即時改變的 }}>增加</button> </div> )}
在使用useState時需要注意:
useReducer是React Hooks提供的一個功能,類似于Redux的狀態管理工具。
在使用useReducer時,你會得到一個包含兩個值的數組:
基礎用法如下:
const DemoUseReducer = () => { // number為更新后的state值, dispatchNumbner為當前的派發函數 const [number, dispatchNumber] = useReducer((state, action) => { const { payload, name } = action; // 根據不同的action類型來更新state switch (name) { case 'add': return state + 1; case 'sub': return state - 1; case 'reset': return payload; default: return state; } }, 0); return ( <div> 當前值:{number} {/* 派發更新 */} <button onClick={() => dispatchNumber({ name: 'add' })}>增加</button> <button onClick={() => dispatchNumber({ name: 'sub' })}>減少</button> <button onClick={() => dispatchNumber({ name: 'reset', payload: 666 })}>賦值</button> {/* 把dispatch和state傳遞給子組件 */} <MyChildren dispatch={dispatchNumber} state={{ number }} /> </div> );};
在useReducer中,你需要傳入一個reducer函數,這個函數接受當前的state和一個action作為參數,并返回新的state。如果新的state和之前的state指向的是同一個內存地址,那么組件就不會更新。
useSyncExternalStore的出現與React版本18中更新模式下外部數據的撕裂(tearing)密切相關。它允許React組件在并發模式下安全有效地讀取外部數據源,并在組件渲染過程中檢測數據的變化,以及在數據源發生變化時調度更新,以確保結果的一致性。
基礎介紹如下:
useSyncExternalStore( subscribe, getSnapshot, getServerSnapshot)
基礎用法示例如下:
import { combineReducers, createStore } from 'redux';/* number Reducer */function numberReducer(state = 1, action) { switch (action.type) { case 'ADD': return state + 1; case 'DEL': return state - 1; default: return state; }}/* 注冊reducer */const rootReducer = combineReducers({ number: numberReducer });/* 創建 store */const store = createStore(rootReducer, { number: 1 });function Index() { /* 訂閱外部數據源 */ const state = useSyncExternalStore(store.subscribe, () => store.getState().number); console.log(state); return ( <div> {state} <button onClick={() => store.dispatch({ type: 'ADD' })}>點擊</button> </div> );}
當點擊按鈕時,會觸發reducer,然后會觸發store.subscribe訂閱函數,執行getSnapshot得到新的number,判斷number是否發生變化,如果有變化,則觸發更新。
在React v18中,引入了一種新概念叫做過渡任務。這些任務與立即更新任務相對應,通常指的是一些不需要立即響應的更新,比如頁面從一個狀態過渡到另一個狀態。
舉個例子,當用戶點擊tab從tab1切換到tab2時,會產生兩個更新任務:
這兩個任務中,用戶通常希望hover狀態的響應更迅速,而內容的響應可能需要更長時間,比如請求數據等操作。因此,第一個任務可以視為立即執行任務,而第二個任務則可以視為過渡任務。
import { useTransition } from 'react';/* 使用 */const [isPending, startTransition] = useTransition();
useTransition會返回一個數組,其中包含兩個值:
在基礎用法中,除了切換tab的場景外,還有很多其他場景適合產生過渡任務,比如實時搜索并展示數據。這種情況下,有兩個優先級的任務:第一個是受控表單的實時響應,第二個是輸入內容改變后數據展示的變化。
下面是一個基本使用useTransition的示例:
const mockList1 = new Array(10000).fill('tab1').map((item,index)=>item+'--'+index )const mockList2 = new Array(10000).fill('tab2').map((item,index)=>item+'--'+index )const mockList3 = new Array(10000).fill('tab3').map((item,index)=>item+'--'+index )const tab = { tab1: mockList1, tab2: mockList2, tab3: mockList3}export default function Index(){ const [ active, setActive ] = React.useState('tab1') //立即響應的任務,立即更新任務 const [ renderData, setRenderData ] = React.useState(tab[active]) //不需要立即響應的任務,過渡任務 const [ isPending,startTransition ] = React.useTransition() const handleChangeTab = (activeItem) => { setActive(activeItem) //立即更新 startTransition(()=>{ //startTransition里面的任務優先級低 setRenderData(tab[activeItem]) }) } return <div> <div className='tab' > { Object.keys(tab).map((item)=> <span className={ active === item && 'active' } onClick={()=>handleChangeTab(item)} >{ item }</span> ) } </div> <ul className='content' > { isPending && <div> loading... </div> } { renderData.map(item=> <li key={item} >{item}</li>) } </ul> </div>}
以上示例中,當切換tab時,會產生兩個優先級任務:第一個任務是setActive控制tab的active狀態的改變,第二個任務是setRenderData控制渲染的長列表數據(在實際場景中,這可能是一些數據量大的可視化圖表)。
在React 18中,引入了useDeferredValue,它可以讓狀態的更新滯后于派生。useDeferredValue的實現效果類似于transition,在緊急任務執行后,再得到新的狀態,這個新的狀態就稱之為DeferredValue。
useDeferredValue和前面提到的useTransition有什么異同呢?
相同點: useDeferredValue和useTransition本質上都是標記為過渡更新任務。
不同點: useTransition將內部的更新任務轉換為過渡任務transition,而useDeferredValue則是通過過渡任務得到新的值,這個值作為延遲狀態。一個是處理一段邏輯,另一個是生成一個新的狀態。
useDeferredValue接受一個參數value,通常是可變的state,返回一個延遲狀態deferredValue。
const deferredValue = React.useDeferredValue(value)
下面將上面的例子改用useDeferredValue來實現。
export default function Index(){ const [ active, setActive ] = React.useState('tab1') //需要立即響應的任務,立即更新任務 const deferredActive = React.useDeferredValue(active) // 將狀態延遲更新,類似于過渡任務 const handleChangeTab = (activeItem) => { setActive(activeItem) // 立即更新 } const renderData = tab[deferredActive] // 使用延遲狀態 return <div> <div className='tab' > { Object.keys(tab).map((item)=> <span className={ active === item && 'active' } onClick={()=>handleChangeTab(item)} >{ item }</span> ) } </div> <ul className='content' > { renderData.map(item=> <li key={item} >{item}</li>) } </ul> </div>}
上述代碼中,active是正常改變的狀態,deferredActive是延遲的active狀態。我們使用正常狀態來改變tab的active狀態,而使用延遲狀態來更新視圖,從而提升了用戶體驗。
React hooks提供了API,用于彌補函數組件沒有生命周期的不足。主要利用了hooks中的useEffect、useLayoutEffect和useInsertionEffect。其中,最常用的是useEffect。現在我們來看一下useEffect的使用。
useEffect(() => { return cleanup;}, dependencies);
useEffect的第一個參數是一個回調函數,返回一個清理函數cleanup。cleanup函數會在下一次回調函數執行之前調用,用于清除上一次回調函數產生的副作用。
第二個參數是一個依賴項數組,里面可以包含多個依賴項。當依賴項發生變化時,會執行上一次callback返回的cleanup函數,并執行新的effect回調函數。
對于useEffect的執行,React采用了異步調用的處理邏輯。對于每個effect的回調函數,React會將其放入任務隊列中,類似于setTimeout回調函數的方式,等待主線程任務完成、DOM更新、JS執行完成以及視圖繪制完成后才執行。因此,effect回調函數不會阻塞瀏覽器的視圖繪制。
/* 模擬數據交互 */function getUserInfo(a){ return new Promise((resolve)=>{ setTimeout(()=>{ resolve({ name:a, age:16, }) },500) })}const Demo = ({ a }) => { const [userMessage, setUserMessage] = useState({}); const div = useRef(); const [number, setNumber] = useState(0); /* 模擬事件監聽處理函數 */ const handleResize = () => {}; /* useEffect使用 */ useEffect(() => { /* 請求數據 */ getUserInfo(a).then(res => { setUserMessage(res); }); /* 定時器 延時器等 */ const timer = setInterval(() => console.log(666), 1000); /* 操作dom */ console.log(div.current); /* div */ /* 事件監聽等 */ window.addEventListener('resize', handleResize); /* 此函數用于清除副作用 */ return function() { clearInterval(timer); window.removeEventListener('resize', handleResize); }; /* 只有當props->a和state->number改變的時候, useEffect副作用函數重新執行,如果此時數組為空[],證明函數只有在初始化的時候執行一次,相當于componentDidMount */ }, [a, number]); return ( <div ref={div}> <span>{userMessage.name}</span> <span>{userMessage.age}</span> <div onClick={() => setNumber(1)}>{number}</div> </div> );};
上述代碼中,在useEffect中做了以下功能:
useLayoutEffect和useEffect的不同之處在于它采用了同步執行的方式。那么它和useEffect有什么區別呢?
① 首先,useLayoutEffect在DOM更新之后、瀏覽器繪制之前執行。這使得我們可以方便地修改DOM、獲取DOM信息,從而避免了不必要的瀏覽器回流和重繪。相比之下,如果將DOM布局修改放在useEffect中,那么useEffect的執行是在瀏覽器繪制視圖之后進行的,接著再去修改DOM,可能會導致瀏覽器進行額外的回流和重繪。由于兩次繪制,可能會導致視圖上出現閃現或突兀的效果。
② useLayoutEffect回調函數中的代碼執行會阻塞瀏覽器的繪制。
const DemoUseLayoutEffect = () => { const target = useRef(); useLayoutEffect(() => { /* 在DOM繪制之前,移動DOM到指定位置 */ const { x, y } = getPositon(); // 獲取要移動的x,y坐標 animate(target.current, { x, y }); }, []); return ( <div> <span ref={target} className="animate"></span> </div> );};
useInsertionEffect是React v18新增的hooks之一,其用法與useEffect和useLayoutEffect相似。那么這個hooks用于什么呢?
在介紹useInsertionEffect用途之前,先來看一下useInsertionEffect的執行時機。
React.useEffect(() => { console.log('useEffect 執行');}, []);React.useLayoutEffect(() => { console.log('useLayoutEffect 執行');}, []);React.useInsertionEffect(() => { console.log('useInsertionEffect 執行');}, []);
打印結果為:useInsertionEffect執行 -> useLayoutEffect執行 -> useEffect執行。
可以看到,useInsertionEffect的執行時機要比useLayoutEffect提前。在useLayoutEffect執行時,DOM已經更新了,但是在useInsertionEffect執行時,DOM還沒有更新。useInsertionEffect主要是解決CSS-in-JS在渲染中注入樣式的性能問題。這個hooks主要適用于這個場景,在其他場景下React不建議使用這個hooks。
export default function Index() { React.useInsertionEffect(() => { /* 動態創建style標簽插入到head中 */ const style = document.createElement('style'); style.innerHTML = ` .css-in-js { color: red; font-size: 20px; } `; document.head.appendChild(style); }, []); return <div className="css-in-js">hello, useInsertionEffect</div>;}
上述代碼模擬了useInsertionEffect的使用。
可以使用useContext來獲取父級組件傳遞過來的context值,這個值是最近的父級組件Provider設置的value值。useContext的參數通常是由createContext方式創建的context對象,也可以是父級上下文context傳遞的(參數為context)。useContext可以代替context.Consumer來獲取Provider中保存的value值。
const contextValue = useContext(context);
useContext接受一個參數,一般是context對象,返回值是context對象內部保存的value值。
/* 用useContext方式 */const DemoContext = () => { const value = useContext(Context); /* my name is alien */ return <div> my name is {value.name}</div>;}/* 用Context.Consumer方式 */const DemoContext1 = () => { return ( <Context.Consumer> {/* my name is alien */} {value => <div> my name is {value.name}</div>} </Context.Consumer> );}export default () => { return ( <div> <Context.Provider value={{ name: 'alien', age: 18 }}> <DemoContext /> <DemoContext1 /> </Context.Provider> </div> );}
useRef可以用來獲取元素,緩存狀態。它接受一個初始狀態initState作為初始值,并返回一個ref對象cur。cur對象上有一個current屬性,該屬性就是ref對象需要獲取的內容。
const cur = React.useRef(initState);console.log(cur.current);
獲取DOM元素: 在React中,可以利用useRef來獲取DOM元素。在React Native中雖然沒有DOM元素,但是同樣可以利用useRef來獲取組件的節點信息(Fiber信息)。
const DemoUseRef = () => { const dom = useRef(null); const handleSubmit = () => { console.log(dom.current); // <div>表單組件</div> DOM節點 } return ( <div> {/* ref標記當前DOM節點 */} <div ref={dom}>表單組件</div> <button onClick={handleSubmit}>提交</button> </div> );}
保存狀態: 可以利用useRef返回的ref對象來保存狀態,只要當前組件不被銷毀,狀態就會一直存在。
const status = useRef(false);/* 改變狀態 */const handleChangeStatus = () => { status.current = true;}
useImperativeHandle配合forwardRef可以自定義向父組件暴露的實例值。對于函數組件,如果我們想讓父組件能夠獲取子組件的實例,就可以使用useImperativeHandle和forwardRef來實現。
useImperativeHandle接受三個參數:
我們通過一個示例來說明,使用useImperativeHandle使得父組件能夠控制子組件中的input自動聚焦并設置值。
function Son(props, ref) { const inputRef = useRef(null); const [inputValue, setInputValue] = useState(''); useImperativeHandle(ref, () => { const handleRefs = { onFocus() { inputRef.current.focus(); }, onChangeValue(value) { setInputValue(value); } }; return handleRefs; }, []); return ( <div> <input placeholder="請輸入內容" ref={inputRef} value={inputValue} /> </div> );}const ForwardSon = forwardRef(Son);class Index extends React.Component { inputRef = null; handleClick() { const { onFocus, onChangeValue } = this.inputRef; onFocus(); onChangeValue('let us learn React!'); } render() { return ( <div style={{ marginTop: '50px' }}> <ForwardSon ref={(node) => (this.inputRef = node)} /> <button onClick={this.handleClick.bind(this)}>操控子組件</button> </div> ); }}
useMemo 可以在函數組件的渲染過程中同步執行一個函數邏輯,并將其返回值作為一個新的狀態進行緩存。這個 hooks 的作用在于優化性能,避免不必要的重復計算或渲染。
const cachedValue = useMemo(create, deps)
基本用法:
function Scope() { const keeper = useKeep() const { cacheDispatch, cacheList, hasAliveStatus } = keeper const contextValue = useMemo(() => { return { cacheDispatch: cacheDispatch.bind(keeper), hasAliveStatus: hasAliveStatus.bind(keeper), cacheDestory: (payload) => cacheDispatch.call(keeper, { type: ACTION_DESTORY, payload }) } }, [keeper]) return ( <KeepaliveContext.Provider value={contextValue}> </KeepaliveContext.Provider> )}
在上面的示例中,通過 useMemo 派生出一個新的狀態 contextValue,只有 keeper 發生變化時,才會重新生成 contextValue。
function Scope(){ const style = useMemo(()=>{ let computedStyle = {} // 大量的計算 return computedStyle },[]) return <div style={style} ></div>}
在這個例子中,通過 useMemo 緩存了一個計算結果 style,只有當依賴項發生變化時,才會重新計算 style。
function Scope ({ children }){ const renderChild = useMemo(()=>{ children() },[ children ]) return <div>{ renderChild } </div>}
通過 useMemo 緩存了子組件的渲染結果 renderChild,只有當 children 發生變化時,才會重新執行子組件的渲染。
useCallback 和 useMemo 接收的參數類似,都是在其依賴項發生變化后才執行,都返回緩存的值。但是它們的區別在于,useMemo 返回的是函數運行的結果,而 useCallback 返回的是一個經過處理的函數本身。它主要用于優化性能,避免不必要的函數重新創建,特別是在向子組件傳遞函數時,避免因為函數重新創建而導致子組件不必要的重新渲染。
const cachedCallback = useCallback(callbackFunction, deps)
const DemoChildren = React.memo((props)=>{ console.log('子組件更新') useEffect(()=>{ props.getInfo('子組件') },[]) return <div>子組件</div>})const DemoUseCallback=({ id })=>{ const [number, setNumber] = useState(1) const getInfo = useCallback((sonName)=>{ console.log(sonName) }, [id]) // 只有當 id 發生變化時,才會重新創建 getInfo 函數 return ( <div> <button onClick={ ()=>setNumber(number+1) }>增加</button> <DemoChildren getInfo={getInfo} /> </div> )}
在上面的示例中,getInfo 函數通過 useCallback 進行了緩存,只有當 id 發生變化時,才會重新創建 getInfo 函數。這樣可以避免因為函數重新創建而導致子組件不必要的重新渲染。
在組件的頂層調用 useId 生成唯一 ID:
import { useId } from 'react';function PasswordField() { const passwordHintId = useId(); // ...
在你的 自定義 Hook 的頂層調用 useDebugValue,以顯示可讀的調試值:
import { useDebugValue } from 'react';function useOnlineStatus() { // ... useDebugValue(isOnline ? 'Online' : 'Offline'); // ...}
本文鏈接:http://www.tebozhan.com/showinfo-26-84029-0.htmlReactHooks由淺入深:所有 hooks 的梳理、匯總與解析
聲明:本網頁內容旨在傳播知識,若有侵權等問題請及時與本網聯系,我們將在第一時間刪除處理。郵件:2376512515@qq.com