背上沉重的書包準備面試之react篇

react特性？

react生命周期？

state和props區別

react中setState執行機制？

在react類組件形式中，setState第二個參數的作用？

react事件機制？

react事件綁定方式有哪些？

react組件之間如何通信？

react中key有什么作用？

react函數組件和類組件的理解和區別？

受控組件和非受控組件的理解？應用場景？

react refs的作用是什莫？

高階組件的理解和應用場景？

react hooks的理解？解決了什么問題？

react redux的理解？工作原理？

redux中間件的理解？

react常用的鉤子？

沉重，太沉重了。。。沒理好捏，等我腦子歇歇再好好補充一下

react特性？

React 是一個用于構建用戶界面的 JavaScript 庫，它具有以下特性：

組件化開發：React 基于組件化思想，將 UI 拆分為獨立、可重用的組件。每個組件負責管理自己的狀態和渲染邏輯，使代碼更模塊化、可維護和可測試。

虛擬 DOM：React 使用虛擬 DOM 技術，通過在內存中構建虛擬 DOM 樹，然后通過對比前后兩次虛擬 DOM 的差異，只對實際變動的部分進行更新，以提高性能和效率。

單向數據流：React 推崇單向數據流，即數據的流動是單向的，從父組件傳遞給子組件。這種設計使得數據流清晰可追蹤，易于調試和理解。

JSX 語法：React 使用 JSX 語法，它是一種 JavaScript 和 HTML 結合的語法擴展，允許開發者在 JavaScript 中編寫類似 HTML 的標記結構，并且能夠直接引用組件。

高效的更新策略：通過使用虛擬 DOM 和精確的差異計算算法，React 可以高效地更新和渲染組件，只更新需要改變的部分，而不是重新渲染整個頁面。

生命周期方法：React 組件具有生命周期方法，用于在組件的不同階段執行特定的邏輯操作。這些方法包括組件的創建、掛載、更新和銷毀等階段。

react生命周期？

掛載階段（Mounting Phase）：

constructor：組件的構造函數，在組件實例化時調用，用于初始化狀態和綁定事件處理程序。

render：渲染方法，在組件掛載到 DOM 樹上時調用，返回要顯示的 JSX 元素。

componentDidMount：在組件第一次渲染完成后調用，通常用于進行異步數據獲取、訂閱事件等操作。

更新階段（Updating Phase）：

render：重新渲染方法，在組件的 props 或 state 發生變化時調用，返回要更新的 JSX 元素。

componentDidUpdate：在組件更新完成后調用，通常用于對 DOM 進行操作或觸發其他副作用。

卸載階段（Unmounting Phase）：

componentWillUnmount：在組件從 DOM 中移除之前調用，用于清理工作，如取消訂閱、清除定時器等。

除了以上的生命周期方法，React 16.3 版本引入了新的生命周期方法：

static getDerivedStateFromProps：在組件接收到新的 props 時調用，它允許組件根據新的 props 更新其 state。

shouldComponentUpdate：決定組件是否重新渲染，通過返回布爾值來控制是否進行重渲染。

state和props區別

在 React 中，state 和 props 是兩個重要的概念，用于管理組件的數據。它們之間的區別如下：

定義：

state：組件的內部狀態，是組件自身管理和維護的數據。通過?this.state?來訪問和更新。

props：父組件傳遞給子組件的數據，是只讀的，在子組件中不可直接修改。通過組件的函數參數（props）來訪問。

數據來源：

state：通常在組件的構造函數中初始化，并可以通過?setState?方法進行更新。它是組件私有的，僅在組件內部可訪問和修改。

props：作為父組件傳遞給子組件的數據，由父組件控制和管理，子組件無法直接修改。

更新機制：

state：當組件的 state 發生變化時，React 會自動重新渲染組件，并且更新相應的 DOM。

props：當父組件的 props 發生變化時，React 會將新的 props 傳遞給子組件，觸發子組件的重新渲染。

影響范圍：

state：影響組件本身及其子組件。更新組件的 state 可能導致組件及其子組件的重新渲染。

props：影響子組件。當父組件的 props 發生變化時，只有依賴這些 props 的子組件會重新渲染。

使用場景：

state：適用于組件內部管理的變化狀態，如用戶輸入、計數器等。

props：適用于父子組件之間傳遞數據和通信，將數據從父組件傳遞給子組件。

總結來說，state 是組件私有的、可變的數據，由組件自身管理和更新。而 props 是父組件傳遞給子組件的只讀數據，子組件無法直接修改。理解并正確使用 state 和 props 是 React 組件編程的重要基礎。

react中setState執行機制？

在 React 中，setState 是一個用于更新組件狀態的方法。當調用 setState 時，React 會觸發一系列的操作來執行狀態的更新過程，其執行機制如下：

合并更新：React 對連續多次調用的 setState 進行合并處理，以減少不必要的更新操作。如果在同一個事件循環中多次調用 setState，React 只會執行一次狀態更新。

創建新的 state 隊列：React 在內部創建一個待更新的狀態隊列，用于保存即將進行更新的狀態數據。

批量更新：React 會在適當的時機（例如事件處理程序結束、生命周期方法中）對狀態隊列進行批量處理，以提高性能。在批量更新過程中，React 會根據算法確定最終的狀態值，并準備進行實際的 DOM 更新。

觸發重新渲染：在批量更新完成后，React 會檢查組件是否需要重新渲染。它會通過比較前后的虛擬 DOM 樹差異，只更新有變化的部分，從而提高效率。

調用生命周期方法和更新后的回調函數：如果組件的狀態更新后需要執行其他操作，React 會調用相應的生命周期方法（如 componentDidUpdate）或傳入的更新后的回調函數。

需要注意的是，由于 setState 是異步執行的，所以不能保證立即獲取到更新后的狀態。如果需要基于新的狀態進行操作，應該在回調函數或生命周期方法中進行處理。

另外，React 還提供了一種使用函數作為 setState 的參數的方式。通過這種方式，可以利用前一個狀態和當前的 props 來計算新的狀態值，以避免因異步更新而導致的問題。

正確理解和使用 setState 的機制對于開發高效和可靠的 React 組件非常重要。

在react類組件形式中，setState第二個參數的作用？

setState 的第一個參數：當 obj 為一個對象的時候，則為即將合并的 state，如何 obj 是一個函數，那么當前組件的 state 和 props 將作為參數，返回值用于合并新的 state。

setState 的第二個參數：是一個callback函數，函數執行上下文中可以獲取當前 setState 更新后的最新 state 的值，可以作為以來 state 變化的副作用函數，可以用來做一些基本的 DOM 操作等。
?

react事件機制？

在 React 中，事件機制主要是通過合成事件（Synthetic Event）來處理。React 的合成事件系統提供了一種更高效和跨瀏覽器兼容的方式來處理事件。

以下是 React 事件機制的基本流程：

綁定事件處理程序：在 JSX 中，可以通過將事件處理函數作為屬性賦值給元素來綁定事件。例如，<button onClick={handleClick}>Click Me</button> 將一個名為 handleClick 的函數作為點擊事件的處理程序。

事件委托和合成事件：React 使用事件委托機制將事件綁定到頂層的 document 對象上，以實現事件的統一管理。當事件被觸發時，React 使用合成事件（Synthetic Event）來封裝原生事件對象，并提供了一個跨瀏覽器兼容的接口。

調用事件處理函數：當事件被觸發后，React 會根據合成事件中的信息找到對應的事件處理函數，并調用它。

合成事件池和事件回收：為了提高性能，React 會復用合成事件對象，并將其放入事件池中。在事件處理完成后，合成事件對象會被重置并回收到事件池中，等待下次再次使用。

需要注意的是，由于事件處理函數中的 this 默認指向 undefined，如果需要在事件處理函數中使用組件實例的方法或訪問組件的狀態和屬性，需要手動綁定事件處理函數或使用箭頭函數。

React 的事件機制簡化了跨瀏覽器兼容性和事件處理的復雜性，并提供了一種高效的方式來處理事件。但同時，也要注意合理使用事件委托、避免過多的事件處理函數嵌套等，以保證事件的性能和可維護性。

react事件綁定方式有哪些？

使用 JSX 語法中的屬性方式：

在 JSX 中，可以通過將事件處理函數作為屬性賦值給元素來綁定事件。例如，<button onClick={handleClick}>Click Me</button>?將一個名為?handleClick?的函數作為點擊事件的處理程序。

使用類組件中的成員方法：

在類組件中，可以把事件處理函數定義為類的成員方法，并在 JSX 中通過引用該方法來綁定事件。例如，在類組件中定義?handleClick?方法，然后在 JSX 中使用?onClick={this.handleClick}?來綁定點擊事件。

使用箭頭函數：

可以使用箭頭函數來定義事件處理函數，并直接在 JSX 中使用。例如，<button onClick={() => handleClick()}>Click Me</button>。

react組件之間如何通信？

Props（屬性）：

父組件可以通過 props 將數據傳遞給子組件。父組件將需要傳遞的數據作為屬性傳遞給子組件，在子組件中通過?this.props?來訪問這些屬性。這種單向數據流的方式是 React 中最常用的組件通信方式。

Callback 函數：

父組件可以將一個函數作為 props 傳遞給子組件，子組件可以調用該函數來向父組件傳遞信息或觸發特定操作。通過這種方式，實現了從子組件到父組件的通信。

Context（上下文）：

Context 允許你在組件樹中共享數據，而不需要一級級地手動傳遞 props。通過創建一個 context 對象并將其提供給組件樹中的所有組件，可以在子組件中讀取和修改這個共享數據。

狀態管理庫（例如 Redux、MobX）：

使用第三方狀態管理庫可以更好地管理應用程序的狀態，并使組件之間的通信更加靈活和高效。這些庫提供了一種集中化的狀態管理機制，讓多個組件可以共享和監聽同一個狀態，實現了跨組件的通信。

發布-訂閱模式：

可以使用自定義的事件系統或第三方庫（如 EventEmitter、PubSub.js）實現發布-訂閱模式，使組件之間能夠通過事件進行解耦的通信。組件可以發布事件，并且其他組件可以訂閱這些事件來處理相應的邏輯。

react中key有什么作用？

在 React 中，key 是用于標識組件的特殊屬性。它主要用于幫助 React 在進行列表渲染或動態更新元素時更準確地識別每個元素，并提高性能和重用性。

key 的作用如下：

元素身份識別：key 屬性可以用來唯一標識一個元素，使 React 能夠準確地識別每個元素，從而正確地進行添加、更新和刪除操作。這對于列表渲染非常重要，以避免出現不必要的元素重新創建或重新渲染的情況。

提高重用性和性能：通過在元素中使用 key，React 可以更好地追蹤元素的變化，并嘗試最小化對 DOM 的操作。在列表渲染時，使用具有穩定和唯一的 key 值的元素可以提高 React 的重用性和性能。

解決列表渲染中的問題：當列表中的元素順序發生變化或新增、刪除元素時，如果沒有設置 key，React 可能會產生錯誤的渲染結果。通過為每個元素設置唯一的 key 值，可以確保 React 正確追蹤元素的變化并進行準確的渲染。

需要注意的是，key 只在兄弟節點中必須是唯一的，而并不需要在全局范圍內保持唯一。React 會在兄弟節點之間進行比較和重排序，而不會跨父組件比較。

綜上所述，key 在 React 中的作用是確保每個元素在列表渲染時都有一個穩定且唯一的標識，并幫助 React 進行準確的元素追蹤和渲染優化。

react函數組件和類組件的理解和區別？

函數組件：

使用函數來定義組件，函數接受?props?參數并返回 JSX 元素。

函數組件是純粹的 JavaScript 函數，沒有實例、生命周期方法或狀態。

通常適用于簡單的展示性組件，它們只依賴于傳入的屬性（props）進行渲染，并且沒有自己的內部狀態和方法。

函數組件更簡潔、易讀和易于測試，也更容易優化和重構。

類組件：

使用 ES6 類來定義組件，繼承自?React.Component?類或其子類。

類組件具有實例、生命周期方法和狀態管理的能力。

可以使用?this.props?訪問傳入的屬性，同時也可以使用?this.state?來管理內部狀態。

類組件更適合處理復雜的業務邏輯，需要使用生命周期方法、處理狀態和事件等。

在 React 16.8 版本之前，只有類組件才能使用 React 的特性，如生命周期方法和狀態管理等。

受控組件和非受控組件的理解？應用場景？

受控組件：

受控組件是由 React 組件狀態（state）來管理表單元素的值和變化。

通過將?value?屬性綁定到狀態值，并通過事件處理函數更新狀態值，可以實現對表單元素的完全控制。

當用戶輸入時，React 更新組件狀態并重新渲染組件。這樣，可以根據需要訪問、驗證或修改用戶輸入數據。

受控組件適用于需要實時訪問和處理用戶輸入數據的場景，例如表單驗證、實時搜索等。

非受控組件：

非受控組件是由 DOM 自身來管理表單元素的值和變化，而不是通過 React 組件狀態。

對于非受控組件，使用?ref?來獲取表單元素的值，通常是在需要時才獲取元素的當前值。

非受控組件適用于不需要實時訪問和處理用戶輸入數據的場景，例如簡單的表單提交或少量的交互。

應用場景：

使用受控組件時，可以在狀態中保存并操作用戶輸入數據，實現實時驗證、格式化或修改數據的需求。

在需要對用戶輸入進行更精確控制、驗證或處理的復雜表單中，受控組件通常更為適用。

對于簡單的表單，少量的交互或需要與第三方庫集成的場景，非受控組件可能更為便捷。

react refs的作用是什莫？

Refs允許我們直接訪問DOM元素、組件實例和自定義組件中的方法和屬性，從而可以實現一些React本身無法實現的功能。

高階組件的理解和應用場景？

理解：

高階組件本質上是一個函數，接受一個組件作為輸入，并返回一個新的組件。

它通過包裹被傳入的組件來增強其功能或修改其行為，而不會修改原始組件的代碼。

高階組件可以用于添加額外的 props、操作組件的生命周期方法、處理數據邏輯等。

應用場景：

代碼復用：當多個組件需要共享相似的功能或行為時，可以使用高階組件來提取和封裝這些共享邏輯，從而避免重復編寫相同的代碼。

條件渲染：通過高階組件，可以根據條件來動態地選擇要渲染的組件，從而實現更靈活的條件渲染邏輯。

認證與授權：使用高階組件可以封裝認證和授權的邏輯，例如檢查用戶是否登錄、驗證用戶權限等，使得這些邏輯能夠在多個組件中復用。

數據獲取與處理：高階組件可以用于處理數據的獲取、轉換或緩存等，從而減少在多個組件中重復處理相同的數據邏輯。

react hooks的理解？解決了什么問題？

React Hooks 的理解：

React Hooks 是一些特殊的函數，可以在函數組件中使用來獲取和操作狀態、副作用、上下文等 React 功能。

在函數組件中使用 Hooks 可以像使用普通的 JavaScript 函數一樣來管理組件的狀態和生命周期。

React Hooks 的核心思想是通過提供可重用的、純粹的函數來處理組件邏輯，而不需要使用類組件的實例或生命周期方法。

React Hooks 解決的問題：

狀態管理：使用 useState Hook 可以在函數組件中定義和更新局部狀態。這消除了使用類組件時需要聲明構造函數和手動維護狀態的麻煩，并使狀態管理更簡潔和直觀。

副作用處理：使用 useEffect Hook 可以在函數組件中聲明副作用（如訂閱數據、操作 DOM 等），并自動處理副作用的創建、清理和依賴項的變化。這取代了類組件中的生命周期方法，使副作用的管理更方便和可預測。

上下文訪問：使用 useContext Hook 可以在函數組件中訪問上下文（Context），而不需要使用類組件的 Context.Consumer 或 static contextType。這簡化了對上下文的訪問和使用。

自定義 Hooks：通過自定義 Hook，可以將可重用的邏輯封裝成一個獨立的函數，并在多個組件之間共享。這使得無論是狀態管理、副作用處理還是其他邏輯，都可以被抽象為一個自定義的 Hook。

React Hooks 的引入使得函數組件在功能上與類組件越來越接近，并且更加靈活、簡潔。它提供了一種更直觀和易于理解的方式來編寫復雜的組件邏輯，并推動了 React 生態系統的發展和優化。

react redux的理解？工作原理？

React Redux 是一個用于在 React 應用中管理全局狀態的第三方庫。它與 React 結合使用，提供了一種可預測、可維護的方式來處理應用的狀態管理和數據流。

工作原理：

Store：Redux 中的核心概念是 Store，它是一個保存整個應用狀態樹的對象。在 Redux 中，只有一個單一的 Store 存儲應用的所有狀態。

Action：Action 是一個描述發生的事件的普通 JavaScript 對象。它包含一個 type 字段表示事件類型，并可以攜帶其他自定義的數據。

Reducer：Reducer 是一個純函數，負責根據 Action 的類型對應更新應用的狀態。它接收當前狀態和要執行的 Action，然后返回新的狀態。

Dispatch：通過調用 dispatch(action) 方法將 Action 分發給 Reducer。這樣會觸發 Reducer 執行相應的邏輯，并更新 Store 中的狀態。

Connect：React Redux 提供了 connect 方法，用于將組件連接到 Redux 的 Store。通過 connect 返回的高階組件，可以訂閱 Store 中的狀態，并將其以 props 的形式傳遞給組件。同時，它還提供了 mapStateToProps 和 mapDispatchToProps 兩個參數，用于將狀態和操作方法映射到組件的 props 上。

React Redux 的優勢:

單一數據源：Redux 的設計模式確保應用的狀態集中管理，所有的狀態都存儲在一個單一的 Store 中，方便跟蹤和調試應用狀態的變化。

可預測性：Redux 的數據流是單向的，由 Action 觸發 Reducer 更新狀態。這種明確的數據流使得應用的狀態變化可預測，并且易于理解和維護。

組件解耦：通過連接組件到 Redux 的 Store，可以將組件與狀態管理邏輯解耦。組件只關注自身的渲染和交互，而不需要關心如何獲取和更新狀態。

中間件支持：Redux 提供了中間件機制，用于擴展和增強 Redux 的功能。可以使用中間件來處理異步操作、日志記錄、錯誤處理等。

React Redux 是 React 生態系統中最常用的狀態管理庫之一，它提供了一種可靠和可擴展的方式來管理復雜的應用程序狀態。