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

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

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

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

1）redux 的工作流程？

• 觸發(fā)一個 action，通過調用 store.dispatch(action) 發(fā)起。
• Redux store 收到 action 后，通過 reducer 函數處理，生成新的 state。
• 訂閱了 store 的組件會收到新的 state，從而更新視圖。

2）react-redux 是如何工作的？

• react-redux 提供了 Provider 組件，它將 Redux store 傳遞給應用的所有組件。
• 使用 connect 函數將 React 組件連接到 Redux store，該函數接受兩個參數：mapStateToProps 和 mapDispatchToProps，分別用于將 state 和 action 映射到組件的 props。
• 連接后的組件可以通過 props 直接訪問 Redux store 的 state 和 dispatch 函數。

3）redux 中如何進行異步操作？

• 可以使用中間件來處理異步操作，最常見的是 redux-thunk、redux-saga 等。
• 使用 redux-thunk，action 可以是一個函數而不僅僅是一個對象。這個函數接受 dispatch 和 getState 作為參數，允許進行異步操作后再分發(fā)其他 action。

4）redux 異步中間件 redux-thunk 的優(yōu)劣？

• 優(yōu)點：
  • 簡單易用，容易理解和上手。
  • 良好的社區(qū)支持，廣泛應用于許多項目。
• 缺點：
  • 對于復雜的異步流程，可能會導致 action 創(chuàng)建函數嵌套過深，使代碼難以維護。
  • 可能不如其他中間件處理一些復雜的異步場景。

5）合成事件是什么？

• 在 React 中，合成事件是指由 React 負責包裝瀏覽器原生事件對象而創(chuàng)建的事件對象。React 在不同瀏覽器之間提供了一致的事件處理方式。
• 這樣的設計使得 React 能夠屏蔽底層瀏覽器的差異，提供一致性的事件接口，方便開發(fā)者編寫跨瀏覽器的代碼。React 的事件系統(tǒng)支持冒泡、捕獲、委托等特性，同時也提供了合成事件對象的屬性和方法。

6）React Hooks 原理？

• Hooks 是 React 16.8 引入的特性，允許函數組件內部使用 state、生命周期等 React 特性。它們是函數，可讓你在不編寫 class 的情況下使用 state 以及其他 React 特性。
• Hooks 本質上是一些 JavaScript 函數，通過調用 React 提供的特定函數（如 useState, useEffect, useContext 等）來在函數組件中使用 React 的功能。
• 這些 Hook 函數通過使用 React 內部的特殊機制來跟蹤組件的狀態(tài)和生命周期，并確保在組件重新渲染時狀態(tài)保持不變。

7）為什么 ReactHooks 中不能有條件判斷？

• Hooks 需要在每次渲染中按照相同的順序被調用。如果在條件語句中使用 Hook，會導致調用順序發(fā)生變化，違反了 React Hooks 的規(guī)則。
• 這會導致 React 在重新渲染時無法正確地追蹤和處理狀態(tài)的變化，因此條件判斷內部使用 Hook 會引發(fā)錯誤。

8）用過哪些 Hook？

• useState: 用于在函數組件中添加狀態(tài)。
• useEffect: 處理副作用，如數據獲取、訂閱、手動操作 DOM 等。
• useContext: 獲取 React 上下文。
• useReducer: 可選的 state 管理方案，用于處理復雜的狀態(tài)邏輯。
• useCallback 和 useMemo: 優(yōu)化性能，避免不必要的重新渲染。

9）Class 組件 VS Hook

• Class 組件：使用傳統(tǒng)的生命周期方法，包含較多的模板代碼和狀態(tài)管理邏輯，可讀性較差。
• Hook：函數式組件更簡潔、易讀，通過提供各種 Hook，使得組件邏輯更為清晰，減少樣板代碼，更方便復用和測試。

10）自定義過哪些 Hook？文章來源地址http://www.zghlxwxcb.cn/news/detail-784490.html

• 自定義 Hook 是指在函數中封裝并抽象出可復用的邏輯。我可以幫你列舉一些常見的自定義 Hook，比如處理表單邏輯、訂閱事件、管理定時器等。

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