面試 React 框架八股文十問十答第十期

作者：程序員小白條，個人博客

相信看了本文后，對你的面試是有一定幫助的！關注專欄后就能收到持續(xù)更新！

?點贊?收藏?不迷路！?文章來源地址http://www.zghlxwxcb.cn/news/detail-799350.html

1）為什么 useState 要使用數(shù)組而不是對象

在React中，useState的設計選擇使用數(shù)組而不是對象是為了提高性能和簡化實現(xiàn)。數(shù)組的方式使得React能夠更容易地追蹤狀態(tài)的變化，并且可以按照狀態(tài)的聲明順序來匹配相應的狀態(tài)值，而不需要使用鍵值對的方式來管理。

使用數(shù)組的好處包括：

• 更輕量的實現(xiàn)： 使用數(shù)組可以更簡單、更輕量地追蹤狀態(tài)的變化，不需要額外的鍵值對映射關系。
• 無需命名： 不需要為每個狀態(tài)值命名，可以直接通過數(shù)組的索引來獲取和更新對應位置的狀態(tài)。
• 保持聲明順序： React可以通過數(shù)組的順序來確保每個狀態(tài)的更新都匹配正確的位置，無需額外的映射關系。

2）React Hooks 解決了哪些問題？

React Hooks解決了一些在類組件中存在的問題，使得函數(shù)組件能夠擁有類組件相似的功能，包括但不限于：

• 狀態(tài)管理： 使用useState可以在函數(shù)組件中管理局部狀態(tài)。
• 副作用處理： 使用useEffect處理副作用，替代了類組件的生命周期方法。
• 邏輯復用： 自定義Hook使得邏輯可以被抽象和復用，提高組件的可維護性。
• 無需關心 this： 函數(shù)組件不涉及this關鍵字，避免了在類組件中可能引起混淆的問題。

3）React Hook 的使用限制有哪些？

React Hooks有一些使用規(guī)則和限制：

• 只能在函數(shù)組件中使用： Hooks只能在函數(shù)組件中使用，不能在類組件中使用。
• 只能在頂層調用： Hook的調用必須在組件的最頂層，不能在條件語句、循環(huán)語句或嵌套函數(shù)中調用。
• 依賴項聲明要正確： 在useEffect等鉤子中，依賴項的聲明要準確，確保副作用和狀態(tài)的更新按預期進行。
• 自定義Hook命名要以"use"開頭： 自定義Hook的命名約定是以"use"開頭，這有助于清晰地區(qū)分。

4）useEffect 與 useLayoutEffect 的區(qū)別

useEffect和useLayoutEffect都用于處理副作用，但它們之間有一些重要的區(qū)別：

• 時機不同： useEffect會在瀏覽器繪制完成后執(zhí)行，而useLayoutEffect會在瀏覽器布局和繪制之前執(zhí)行，即在DOM更新前執(zhí)行。
• 對性能的影響： 由于useLayoutEffect在布局前執(zhí)行，如果執(zhí)行的操作影響布局，可能導致頁面閃爍。因此，一般情況下應優(yōu)先使用useEffect，除非有明確的需求需要在布局前執(zhí)行。
• 使用場景： 如果不需要在布局前執(zhí)行副作用，一般使用useEffect；如果需要在布局前執(zhí)行，例如獲取DOM元素的尺寸等，可以使用useLayoutEffect。

5）React Hooks在平時開發(fā)中需要注意的問題和原因

在使用React Hooks時，需要注意一些問題和原因，例如：

• 依賴項數(shù)組的正確性： 在useEffect等鉤子中，依賴項數(shù)組的聲明要準確，確保只有在依賴項變化時才執(zhí)行副作用，防止不必要的重復執(zhí)行。
• 自定義Hook的命名： 自定義Hook應該以"use"開頭，這有助于清晰地表明這是一個自定義Hook，而不是普通的函數(shù)。
• 狀態(tài)更新的不可變性： 使用useState時，要確保對狀態(tài)的更新是不可變的，避免直接修改狀態(tài)對象。
• 性能優(yōu)化的考慮： 在處理大型數(shù)據(jù)集或頻繁變化的場景下，要注意性能優(yōu)化，可以使用useMemo、useCallback等進行優(yōu)化。

在使用React Hooks時，理解這些問題并采用最佳實踐可以提高代碼的可維護性和性能。

6）React Hooks 和生命周期的關系？

React Hooks 是在 React 16.8 版本引入的，它提供了在函數(shù)組件中使用狀態(tài)和副作用的能力，以及自定義 Hook 的方式。與傳統(tǒng)的類組件相比，Hooks 并不取代生命周期，而是提供了一種不同的方式來管理組件的狀態(tài)和副作用。

在使用 Hooks 的函數(shù)組件中，你可以使用 useState 管理狀態(tài)，useEffect 處理副作用，而無需使用類組件中的生命周期方法。Hooks 的引入使得組件的邏輯更加集中，易于理解和維護。

7）對虛擬 DOM 的理解？虛擬 DOM 主要做了什么？虛擬 DOM 本身是什么？

虛擬 DOM（Virtual DOM）是 React 中一種提高性能的機制。它本質上是一個虛擬的樹形結構，對應著真實 DOM 中的元素。當組件狀態(tài)發(fā)生變化時，React 會先在虛擬 DOM 中進行比較（稱為協(xié)調），找出需要更新的部分，然后才會將這些變化同步到實際的 DOM。

虛擬 DOM 主要做了以下事情：

• 高效更新： 通過比較虛擬 DOM 樹的差異，避免直接操作實際 DOM 的高昂成本，從而提高更新效率。
• 批量更新： React 會批量處理狀態(tài)變化，然后一次性更新虛擬 DOM，最后再將變化應用到實際 DOM，以減少重排和重繪次數(shù)，優(yōu)化性能。

虛擬 DOM 本身是一個輕量級的 JavaScript 對象，它映射了真實 DOM 的層次結構。在進行更新時，React 會比較新舊虛擬 DOM 的差異，然后只更新有變化的部分。

8）React diff 算法的原理是什么？

React 的 diff 算法是一種協(xié)調策略，用于比較新舊虛擬 DOM 樹并確定如何最小化更新實際 DOM。算法的基本原理包括：

1. 深度優(yōu)先搜索： React 通過深度優(yōu)先搜索比較兩棵樹的同級節(jié)點，盡早發(fā)現(xiàn)不同之處。
2. 同層比較： 在同一層級上，React 會比較相同位置的節(jié)點，而不是跨層級比較。
3. 唯一 key： 在進行列表渲染時，為每個元素賦予唯一的 key 值，以便更準確地定位變化的元素。
4. 組件類型比較： 如果兩個組件類型不同，React 會銷毀舊組件并創(chuàng)建新組件，而不嘗試更新。

React 的 diff 算法通過這些原理，盡量減少操作實際 DOM 的次數(shù)，提高更新效率。

9）React key 是干嘛用的 為什么要加？key 主要是解決哪一類問題的

key 是 React 中用于標識列表中子元素的特殊屬性。它的主要作用是幫助 React 識別列表中每個元素的唯一性，從而在更新列表時更加高效地進行 diff 操作。

主要問題和解決方案：

• 唯一性問題： 當列表發(fā)生變化時，React 需要追蹤每個元素的變化，而沒有唯一標識的情況下，React 會采用一種不夠準確的方式進行比較，導致性能下降。
• 解決方案： 通過給每個列表元素分配唯一的 key，React 在更新時可以根據(jù) key 快速定位到對應的元素，提高 diff 算法的準確性和效率。

10）虛擬 DOM 的引入與直接操作原生 DOM 相比，哪一個效率更高，為什么

虛擬 DOM 的引入相比直接操作原生 DOM，通常具有更高的效率，原因如下：

• 批量更新和異步更新： 虛擬 DOM 允許 React 在內部進行批量更新，通過異步更新機制，React 可以將多次狀態(tài)變化合并成一次更新，減少了頻繁操作 DOM 的次數(shù)，提高了性能。
• 減少重排和重繪： 虛擬 DOM 通過比較新舊樹的差異，只更新有變化的部分，從而最小化了對實際 DOM 的重排和重繪，減少了性能開銷。
• 跨平臺兼容性： 虛擬 DOM 可以提供一種抽象層，使得 React 應用能夠在不同平臺上運行，而不需要直接操作特定平臺的原生 DOM 接口，增加了跨平臺的兼容性。

總體而言，虛擬 DOM 在提高開發(fā)效率的同時，通過巧妙的 diff 算法和批量更新機制，使得 React 應用在性能上有更好的表現(xiàn)。

開源項目地址：https://gitee.com/falle22222n-leaves/vue_-book-manage-system

已 300 + Star！

?點贊?收藏?不迷路！?

到了這里，關于面試 React 框架八股文十問十答第十期的文章就介紹完了。如果您還想了解更多內容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網(wǎng)！