我經常會問應聘者的三個React面試題
簡介
在面試 React 開發人員時，了解他們如何思考解決問題和優化 React 應用程序至關重要。簡單的問題是不夠的。我喜歡向候選人提出更具挑戰性的問題，以測試他們處理 React 復雜性的能力。
在今天這篇文章中，我分享3個我經常會問應聘者的 React 面試題。這些問題側重于管理嵌套狀態、避免不必要的重新渲染以及有效使用 useCallback 來優化性能。每個問題都附有詳細的解釋和實用的解決方案。
現在，讓我們分解這些問題并探索解決它們的最佳實踐！
1. 在 React 組件中更新嵌套狀態
問題：您在 React 組件中有一個深度嵌套的狀態對象，它表示用戶信息，包括用戶的地址。您的任務是在單擊按鈕時更新地址對象中的城市屬性。挑戰在于確保在狀態中僅更新城市值，而不直接改變原始狀態。單擊“更新城市”按鈕后，UI 應反映新的城市值。
具體任務：單擊“更新城市”按鈕時，將城市值更新為“舊金山”，并確保此更改立即反映在 UI 中。
解決方案：
為了正確更新城市屬性而不改變原始狀態，您應該使用擴展運算符創建需要更新的狀態的每個級別的淺表副本：
此方法可確保狀態對象的每個級別都被不可變地復制和修改。單擊“更新城市”按鈕時，updateCity 函數會創建一個新的狀態對象，其中只有地址對象內的城市屬性會更新為“舊金山”。
使用擴展運算符 (...) 有助于通過創建每個嵌套對象的新副本而不是直接修改它們來保持不變性。這確保了 React 的狀態管理有效運行，并且 UI 正確反映了更新的城市值。
2. 防止子組件不必要的重新渲染
問題：你有一個父組件，它將 props 傳遞給子組件。每當父組件重新渲染時，子組件也會重新渲染，即使它的 props 沒有改變。挑戰在于優化組件結構，以便當父組件的狀態更新但子組件的 props 保持不變時，子組件不會不必要地重新渲染。
場景：
考慮一個維護兩個狀態的父組件：計數和數據。計數狀態經常更新，而數據狀態保持不變。父組件渲染一個 ChildComponent，將數據作為 prop 傳遞。
目標是防止在計數狀態改變但數據不變時 ChildComponent 重新渲染。
解決方案：
為了防止在計數狀態改變但數據保持不變時 ChildComponent 重新渲染，你可以使用 React.memo 來記憶 ChildComponent。
- React.memo：這個高階組件會記住 ChildComponent 的渲染輸出。如果傳遞給 ChildComponent 的數據 prop 沒有改變，則當父組件由于其他狀態（如計數）的更改而重新渲染時，React.memo 將阻止 ChildComponent 重新渲染。
- 工作原理：單擊“增加計數”按鈕時，ParentComponent 中的計數狀態將更新。通常，這會導致 ParentComponent 和 ChildComponent 都重新渲染。但是，使用 React.memo，ChildComponent 僅在數據 prop 更改時才會重新渲染。由于數據保持不變，控制臺日志“ChildComponent 已渲染”僅出現一次，表明 ChildComponent 不會不必要地重新渲染。
3. 使用 useCallback 防止不必要的重新渲染
問題：您有一個父組件，它將事件處理程序函數作為 prop 傳遞給子組件。每當父組件重新渲染時，子組件也會重新渲染，因為函數 prop 被重新創建。挑戰在于防止子組件在父組件狀態改變時不必要地重新渲染。
場景：
在父組件中，有一個計數狀態，每次單擊“增加計數”按鈕時，計數狀態都會增加。handleClick 函數作為 prop 傳遞給 ChildComponent。
即使 ChildComponent 用 React.memo 包裝，它仍然會在父組件重新渲染時重新渲染，因為 handleClick 函數每次都是一個新的引用。目標是使用 useCallback 來防止這種不必要的重新渲染。
解決方案：
要阻止 ChildComponent 每次 ParentComponent 重新渲染時重新渲染，請使用 useCallback 來記憶 handleClick 函數。
- useCallback：記憶 handleClick，這樣它就不會在每次渲染時重新創建。這可確保 ChildComponent 僅在實際 props 發生變化時重新渲染。
- React.memo：除非其 props 發生變化，否則防止 ChildComponent 重新渲染。
通過使用 useCallback，handleClick 函數在渲染過程中保留相同的引用，即使父狀態（計數）發生變化，也可以防止 ChildComponent 不必要的重新渲染。
結論
要掌握 React，重要的是不僅要了解如何創建組件，還要了解如何使它們高效。本文中的問題——關于更新嵌套狀態、停止不必要的重新渲染以及使用 useCallback——專注于解決您在實際 React 項目中可能遇到的常見問題。
學習這些技術將幫助您編寫更好、更快、更有效的 React 應用程序，無論您是在準備面試還是希望提高技能，都會對您有一定幫助。
