對標蘋果的靈動島 華為帶來實況窗功能
繼蘋果的靈動島之后，華為也在今天正式推出了“實況窗”功能。據今天鴻蒙OS 4.0的現場演示顯示，華為的實況窗可以更高效的展現出實時通知，比如鎖屏上就能看到外賣、打車、銀行
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
Copyright ? 2016-2023 天津谷騏科技有限公司 版權所有 sitemap.xml
違法及侵權請聯系：2376512515@qq.com 津ICP備18001702號
津公網安備 12010102000574號