2025年react考試題及答案一、單項(xiàng)選擇題（每題3分，共30分）1.關(guān)于React組件更新機(jī)制，以下說法正確的是：A.調(diào)用setState后，組件會立即重新渲染B.父組件更新時，所有子組件都會無條件重新渲染C.使用React.memo包裹的函數(shù)組件，僅當(dāng)props淺比較不同時才會重新渲染D.類組件中this.state的直接修改會觸發(fā)重新渲染答案：C2.以下哪個Hooks不能在條件語句中使用？A.useStateB.useContextC.useMemoD.以上均不能答案：D3.關(guān)于React事件系統(tǒng)，錯誤的描述是：A.事件處理函數(shù)的參數(shù)是合成事件（SyntheticEvent）B.所有事件都會冒泡到document對象C.事件處理函數(shù)命名采用小駝峰式（如onClick）D.可以通過e.nativeEvent獲取原生DOM事件答案：B4.在并發(fā)模式下，React可能會中斷以下哪種操作？A.組件渲染過程B.狀態(tài)更新隊(duì)列處理C.DOM節(jié)點(diǎn)掛載D.事件處理函數(shù)執(zhí)行答案：A5.自定義Hooks的核心作用是：A.復(fù)用組件邏輯B.替代類組件生命周期C.優(yōu)化條件渲染D.簡化狀態(tài)管理答案：A6.關(guān)于useEffect的依賴數(shù)組，正確的用法是：A.空數(shù)組表示只在掛載時執(zhí)行B.省略依賴數(shù)組會導(dǎo)致每次渲染都執(zhí)行C.包含函數(shù)時需要用useCallback包裹D.以上均正確答案：D7.使用React.lazy加載動態(tài)組件時，必須配合哪個組件處理加載狀態(tài)？A.SuspenseB.ErrorBoundaryC.FragmentD.Portal答案：A8.以下哪種方式不能實(shí)現(xiàn)組件間通信？A.通過props傳遞回調(diào)函數(shù)B.使用Context提供全局狀態(tài)C.直接修改兄弟組件的stateD.通過Redux的store.dispatch發(fā)送動作答案：C9.關(guān)于React服務(wù)器組件（ServerComponents），錯誤的說法是：A.可以直接訪問后端數(shù)據(jù)庫B.不會包含在客戶端JavaScriptbundle中C.支持使用useState等客戶端HooksD.適合處理數(shù)據(jù)加載和復(fù)雜業(yè)務(wù)邏輯答案：C10.優(yōu)化React列表渲染時，key的最佳實(shí)踐是：A.使用數(shù)組索引作為keyB.使用唯一且穩(wěn)定的標(biāo)識（如數(shù)據(jù)id）C.多個列表共享相同的key值D.動態(tài)提供隨機(jī)字符串作為key答案：B二、填空題（每空2分，共20分）1.React組件的兩種主要類型是__________和__________。答案：類組件（ClassComponent）、函數(shù)組件（FunctionComponent）2.useState的初始值如果是計算密集型操作，應(yīng)該使用__________形式傳遞。答案：函數(shù)（functioninitializer）3.useRef的常見用途包括__________和__________（寫出兩種）。答案：訪問DOM節(jié)點(diǎn)、保存可變值（跨渲染周期）4.React.memo的第二個參數(shù)作用是__________，其返回值為__________時表示不需要重新渲染。答案：自定義props比較邏輯、true5.并發(fā)模式下的兩個關(guān)鍵特性是__________和__________。答案：可中斷渲染（InterruptibleRendering）、優(yōu)先級更新（PriorityUpdates）6.要獲取Context的最新值，函數(shù)組件應(yīng)使用__________Hooks，類組件應(yīng)使用__________屬性。答案：useContext、contextType三、簡答題（每題8分，共40分）1.簡述類組件和函數(shù)組件在狀態(tài)管理上的區(qū)別。答案：類組件通過this.state初始化狀態(tài)，使用this.setState更新狀態(tài)（異步且合并更新）；函數(shù)組件通過useStateHook管理狀態(tài)，返回的setState函數(shù)可以是替換式更新（根據(jù)參數(shù)類型決定合并或替換）。類組件的狀態(tài)是對象形式，函數(shù)組件支持任意類型狀態(tài)值。類組件的setState會觸發(fā)重新渲染（除非shouldComponentUpdate返回false），函數(shù)組件的setState通過閉包捕獲當(dāng)前狀態(tài)，需注意閉包陷阱。2.說明useEffect中清理函數(shù)（return的函數(shù)）的執(zhí)行時機(jī)。答案：清理函數(shù)會在組件卸載時執(zhí)行（用于取消訂閱、清除定時器等副作用）；在組件重新渲染時，如果新的useEffect執(zhí)行前，上一次的清理函數(shù)會先執(zhí)行（實(shí)現(xiàn)副作用的更新）。如果依賴數(shù)組為空，清理函數(shù)僅在組件卸載時執(zhí)行；如果依賴數(shù)組有值，每次依賴變化導(dǎo)致useEffect重新執(zhí)行前，都會先執(zhí)行上一次的清理函數(shù)。3.比較useCallback和useMemo的使用場景及區(qū)別。答案：useCallback用于緩存函數(shù)引用，避免因函數(shù)重新創(chuàng)建導(dǎo)致子組件不必要的重新渲染（通常配合React.memo使用）；useMemo用于緩存計算結(jié)果，避免重復(fù)執(zhí)行高開銷的計算操作。兩者的第一個參數(shù)都是回調(diào)函數(shù)，第二個參數(shù)都是依賴數(shù)組。區(qū)別在于useCallback返回緩存的函數(shù)，useMemo返回緩存的計算結(jié)果。當(dāng)需要緩存的是函數(shù)時用useCallback，需要緩存的是計算值時用useMemo。4.描述React事件系統(tǒng)的“事件委托”機(jī)制及其優(yōu)勢。答案：React并沒有直接將事件綁定到具體的DOM元素，而是將所有事件綁定到頁面的根元素（如document），通過統(tǒng)一的事件監(jiān)聽器來管理。當(dāng)事件觸發(fā)時，React會提供合成事件對象（SyntheticEvent），并根據(jù)事件類型分發(fā)到對應(yīng)的組件處理函數(shù)。優(yōu)勢包括：減少內(nèi)存占用（避免為每個元素單獨(dú)綁定事件）、統(tǒng)一事件處理邏輯（兼容不同瀏覽器的事件差異）、提升性能（批量處理事件）。5.解釋服務(wù)器組件（ServerComponents）和客戶端組件（ClientComponents）的核心差異及應(yīng)用場景。答案：核心差異：服務(wù)器組件在服務(wù)器端渲染，不包含客戶端JavaScript代碼，無法使用瀏覽器API或客戶端Hooks（如useState）；客戶端組件在客戶端渲染，包含交互邏輯，可使用所有客戶端Hooks。應(yīng)用場景：服務(wù)器組件適合需要訪問后端資源（數(shù)據(jù)庫、API）、需要SEO優(yōu)化、靜態(tài)內(nèi)容或復(fù)雜數(shù)據(jù)加載的場景；客戶端組件適合需要用戶交互（點(diǎn)擊、輸入）、需要狀態(tài)管理、需要使用瀏覽器特性（如Geolocation）的場景。四、編程題（共60分）1.（10分）使用函數(shù)組件和Hooks實(shí)現(xiàn)一個計數(shù)器，要求：包含遞增/遞減按鈕點(diǎn)擊按鈕時，300ms內(nèi)連續(xù)點(diǎn)擊只觸發(fā)最后一次更新顯示當(dāng)前計數(shù)值答案：```tsximport{useState,useCallback,useRef}from'react';constDebounceCounter=()=>{const[count,setCount]=useState(0);consttimerRef=useRef<NodeJS.Timeout>();consthandleClick=useCallback((delta:number)=>{if(timerRef.current)clearTimeout(timerRef.current);timerRef.current=setTimeout(()=>{setCount(prev=>prev+delta);},300);},[]);return(<div><buttononClick={()=>handleClick(-1)}>-</button><span>{count}</span><buttononClick={()=>handleClick(1)}>+</button></div>);};exportdefaultDebounceCounter;```關(guān)鍵點(diǎn)：使用useRef保存定時器引用避免重復(fù)創(chuàng)建，useCallback緩存事件處理函數(shù)，setTimeout實(shí)現(xiàn)防抖，函數(shù)式更新確保獲取最新狀態(tài)。2.（12分）自定義一個HooksuseLocalStorage，要求：支持存儲任意類型數(shù)據(jù)（自動序列化/反序列化）當(dāng)本地存儲值變化時（包括其他標(biāo)簽頁修改），組件自動更新提供設(shè)置值和清除值的方法答案：```tsximport{useState,useEffect,useCallback}from'react';constuseLocalStorage=<T>(key:string,initialValue:T)=>{const[storedValue,setStoredValue]=useState<T>(()=>{try{constitem=window.localStorage.getItem(key);returnitem?JSON.parse(item):initialValue;}catch(error){console.error('讀取本地存儲失敗:',error);returninitialValue;}});constsetValue=useCallback((value:T|((prev:T)=>T))=>{try{constvalueToStore=valueinstanceofFunction?value(storedValue):value;window.localStorage.setItem(key,JSON.stringify(valueToStore));setStoredValue(valueToStore);}catch(error){console.error('寫入本地存儲失敗:',error);}},[key,storedValue]);constclearValue=useCallback(()=>{window.localStorage.removeItem(key);setStoredValue(initialValue);},[key,initialValue]);useEffect(()=>{consthandleStorageChange=(event:StorageEvent)=>{if(event.key===key&&event.newValue){setStoredValue(JSON.parse(event.newValue));}};window.addEventListener('storage',handleStorageChange);return()=>{window.removeEventListener('storage',handleStorageChange);};},[key]);return{storedValue,setValue,clearValue};};exportdefaultuseLocalStorage;```關(guān)鍵點(diǎn)：初始化時讀取本地存儲（處理函數(shù)式初始值），setValue支持函數(shù)式更新，監(jiān)聽storage事件實(shí)現(xiàn)跨標(biāo)簽頁同步，清除方法重置為初始值，使用泛型支持任意類型。3.（14分）使用ReactQuery（v4）實(shí)現(xiàn)數(shù)據(jù)獲取組件，要求：獲取用戶列表（API：GET/api/users）顯示加載狀態(tài)（加載中提示）處理錯誤狀態(tài)（顯示錯誤信息）支持手動刷新數(shù)據(jù)緩存時間設(shè)置為5分鐘答案：```tsximport{useQuery}from'@tanstack/react-query';import{useEffect}from'react';interfaceUser{id:number;name:string;email:string;}constfetchUsers=async():Promise<User[]>=>{constresponse=awaitfetch('/api/users');if(!response.ok)thrownewError('獲取用戶失敗');returnresponse.json();};constUserList=()=>{const{data:users,isLoading,isError,error,refetch}=useQuery({queryKey:['users'],queryFn:fetchUsers,cacheTime:5601000,//5分鐘});if(isLoading)return<div>加載中...</div>;if(isError)return<div>錯誤：{error?.message}</div>;return(<div><buttononClick={refetch}>刷新</button><ul>{users?.map(user=>(<likey={user.id}>{}({user.email})</li>))}</ul></div>);};exportdefaultUserList;```關(guān)鍵點(diǎn)：定義User接口保證類型安全，使用useQuery配置queryKey和queryFn，設(shè)置cacheTime為5分鐘，通過isLoading和isError狀態(tài)控制UI，refetch方法實(shí)現(xiàn)手動刷新，錯誤處理使用error對象。4.（12分）使用Context和useReducer實(shí)現(xiàn)一個全局主題切換功能，要求：支持亮色/暗色主題提供主題切換按鈕刷新頁面后保持主題設(shè)置（使用localStorage）答案：```tsximport{createContext,useContext,useReducer,useEffect}from'react';typeTheme='light'|'dark';interfaceThemeState{current:Theme;}interfaceThemeAction{type:'TOGGLE';}constinitialState:ThemeState={current:localStorage.getItem('theme')==='dark'?'dark':'light',};constthemeReducer=(state:ThemeState,action:ThemeAction):ThemeState=>{switch(action.type){case'TOGGLE':constnewTheme=state.current==='light'?'dark':'light';localStorage.setItem('theme',newTheme);return{current:newTheme};default:returnstate;}};constThemeContext=createContext<{state:ThemeState;dispatch:React.Dispatch<ThemeAction>;}>({state:initialState,dispatch:()=>{}});exportconstThemeProvider:React.FC<{children:React.ReactNode}>=({children})=>{const[state,dispatch]=useReducer(themeReducer,initialState);useEffect(()=>{document.body.className=state.current;},[state.current]);return(<ThemeContext.Providervalue={{state,dispatch}}>{children}</ThemeContext.Provider>);};exportconstuseTheme=()=>useContext(ThemeContext);//使用示例組件constThemeToggle=()=>{const{state,dispatch}=useTheme();return(<buttononClick={()=>dispatch({type:'TOGGLE'})}>切換主題（當(dāng)前：{state.current}）</button>);};```關(guān)鍵點(diǎn)：定義Theme類型限制主題值，useReducer處理狀態(tài)邏輯（包含localStorage持久化），Context提供全局狀態(tài)和dispatch方法，useEffect同步主題到body類名，ThemeToggle組件暴露切換功能。5.（12分）優(yōu)化一個包含1000條數(shù)據(jù)的長列表渲染，要求：使用虛擬滾動（僅渲染可見區(qū)域）每項(xiàng)高度固定（60px）支持滾動時自動更新可見項(xiàng)使用TypeScript答案：```tsximport{useState,useRef,useEffect}from'react';interfaceListItem{id:number;content:string;}constVirtualList:React.FC<{data:ListItem[]}>=({data})=>{const[visibleData,setVisibleData]=useState<ListItem[]>([]);const[scrollTop,setScrollTop]=useState(0);constlistRef=useRef<HTMLDivElement>(null);constitemHeight=60;constvisibleCount=Math.ceil(window.innerHeight/itemHeight)+2;//多渲染2項(xiàng)緩沖useEffect(()=>{constupdateVisibleData=()=>{if(!listRef.current)return;constcurrentScrollTop=listRef.current.scrollTop;setScrollTop(currentScrollTop);conststartIdx=Math.floor(currentScrollTop/itemHeight);constendIdx=startIdx+visibleCount;setVisibleData(data.slice(startIdx,endIdx));};consthandleScroll=()=>requestAnimationFrame(updateVisibleData);listRef.current?.addEventListener('scroll',handleScroll);updateVisibleData();//初始加載