100道React高頻題整理(附答案背誦版)

1、簡述React有什麼特點？

React是一個用於構建用戶界面的JavaScript庫，由Facebook開發並維護。React有以下幾個主要特點：

聲明式設計： React採用聲明式設計，讓代碼更易於理解，且方便調試。你只需描述出你希望程序的最終狀態，React會自動確保用戶界面與你描述的狀態保持一致。
組件化： React基於組件構建界面，每個組件都可以包含自己的狀態和邏輯，可以複用，這使得代碼的組織和維護變得更簡單。例如，一個購物網站的前端可以由“導航欄組件”、“商品列表組件”、“購物車組件”等多個組件構成。
虛擬DOM： React引入了虛擬DOM的概念，當組件的狀態改變時，React會創建一個新的虛擬DOM，然後與舊的虛擬DOM進行對比，最後只更新真實DOM中差異的部分。這種方式大大提高了性能。
單向數據流： React的數據流動是單向的，從父組件流向子組件。這種方式使得組件的狀態預測變得更加容易，同時也簡化了應用的複雜度。
跨平臺： React可以用於開發Web應用，同時，通過React Native，也可以開發iOS和Android應用，代碼複用率高。

例如，如果我們要創建一個任務列表應用，每一個任務都可以是一個單獨的組件，每個任務的完成狀態、標題等就是它的狀態。當我們添加一個新的任務時，React會創建一個新的虛擬DOM，然後與舊的虛擬DOM進行對比，最後只更新真實DOM中差異的部分，例如添加一個新的任務項。

2、簡述虛擬DOM的概念和機制？

虛擬DOM（Virtual DOM）是React的一項核心特性，它是對真實DOM的抽象表達，是一個輕量級的JavaScript對象。

在React中，當組件的狀態改變時，React並不會直接去更新真實的DOM。相反，它會創建一個新的虛擬DOM，這個虛擬DOM代表了在狀態改變後應用的新狀態。然後，React會將這個新的虛擬DOM與舊的虛擬DOM進行比較，這個過程叫做"diffing"。通過比較，React可以找出兩個虛擬DOM之間的區別，也就是哪些部分需要更新。最後，React會將這些差異應用到真實的DOM上，這個過程叫做"reconciliation"或"協調"。這種方式稱爲DOM diffing算法。

虛擬DOM的主要優勢在於其性能。操作真實DOM在瀏覽器中是非常消耗性能的。而使用虛擬DOM，React可以最小化真實DOM的更新，從而提高性能和應用的響應速度。

例如，假設我們有一個評論列表，當新的評論添加時，React會創建一個新的虛擬DOM，然後與舊的虛擬DOM進行比較，找出需要更新的部分（即新的評論），然後只將這個新的評論添加到真實DOM中，而不是整個評論列表都重新渲染。這樣就大大提高了性能。

3、React 類組件和函數組件之間的區別是什麼？

React提供了兩種主要的方式來創建組件：類組件（Class Components）和函數組件（Function Components）。以下是它們之間的主要區別：

定義方式： 類組件是使用ES6的類來定義的，需要繼承React.Component。而函數組件則是簡單的JavaScript函數。
狀態管理： 在React的早期版本中，類組件是唯一可以使用內部狀態（state）的組件類型。函數組件是無狀態的，只能接收props。但是從React 16.8版本開始，引入了Hooks這個新特性，使得函數組件也可以使用狀態以及其他React特性了。
生命週期方法： 類組件提供了生命週期方法，如 componentDidMount，componentDidUpdate，componentWillUnmount等。而在引入Hooks之前，函數組件無法使用這些生命週期方法。但是現在，通過使用 useEffect Hook，函數組件也可以模擬生命週期方法的行爲。
使用方式： 類組件需要使用this關鍵字來訪問props和狀態，而函數組件則可以直接訪問這些值。

例如，一個簡單的類組件可以這樣定義：

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }

  render() {
    return (
      <div>
        {this.props.message}
        <button onClick={() => this.setState({ count: this.state.count + 1 })}>
          Count: {this.state.count}
        </button>
      </div>
    );
  }
}

同樣的功能，使用函數組件和Hooks可以這樣實現：

function MyComponent(props) {
  const [count, setCount] = React.useState(0);

  return (
    <div>
      {props.message}
      <button onClick={() => setCount(count + 1)}>
        Count: {count}
      </button>
    </div>
  );
}

在這個例子中，類組件和函數組件都實現了同樣的功能，即點擊按鈕時計數器增加。但是函數組件的代碼更簡潔，更易於理解。

4、簡述React 中 refs 的作用？

Refs（引用）在React中是一種特殊的屬性，可以用來訪問和交互React元素或組件的DOM節點。雖然我們通常推薦使用React的聲明式方式來管理應用程序的狀態和DOM，但在某些情況下，我們可能需要直接操作DOM，這就是Refs的用武之地。

以下是Refs的一些常見用途：

管理焦點： 對於一些需要用戶輸入的元素（如input或textarea），Refs可以用來獲取焦點。
觸發強制動畫： 有時候，我們可能需要直接操作DOM元素來觸發動畫。
集成第三方DOM庫： 當需要和非React庫（如jQuery插件）集成時，Refs可以用來直接操作DOM。

例如，如果我們創建一個自動獲取焦點的輸入框，我們可以使用Refs來實現：

class AutoFocusTextInput extends React.Component {
  constructor(props) {
    super(props);
    // 創建一個 ref 來存儲 textInput 的 DOM 元素
    this.textInput = React.createRef();
  }

  componentDidMount() {
    // 使用原生的 DOM API 讓 text input 元素獲取焦點
    this.textInput.current.focus();
  }

  render() {
    // 把 `this.textInput` 指向 `<input>` DOM 節點
    return (
      <input
        type="text"
        ref={this.textInput}
      />
    );
  }
}

在這個例子中，React.createRef()被用來創建一個新的ref，然後在<input>元素上通過ref屬性將其附加。這樣，我們就可以在組件的其他地方（如生命週期方法）通過this.textInput.current來訪問這個DOM元素。

請注意，過度使用Refs可能會導致代碼難以理解和維護，因此在大多數情況下，我們應優先考慮使用React的聲明式模式。

5、簡述React store的概念？

在React中，"store"通常指的是在使用Redux或MobX等狀態管理庫時用來管理應用全局狀態的地方。

下面以Redux爲例來解釋一下store的概念：

在Redux中，store是一個JavaScript對象，它可以存儲應用的整個狀態樹。Redux的store有以下幾個主要的特性和功能：

維護應用的狀態： store中包含了應用的整個狀態，包括應用的數據以及UI的狀態。
提供獲取狀態的方法： 可以通過store的getState方法來獲取應用的當前狀態。
提供更新狀態的方法： 可以通過store的dispatch方法來分發（dispatch）action，更新應用的狀態。這是改變store中狀態的唯一方式。
註冊和註銷監聽器： 可以通過store的subscribe方法來添加狀態變化的監聽器，當狀態發生變化時，這些監聽器會被調用。監聽器可以通過返回的函數來註銷。

例如，假設我們正在開發一個待辦事項應用，我們可能會在store中存儲一個待辦事項列表的狀態。當用戶添加一個新的待辦事項時，我們會分發一個action，這個action描述了這個變化（即添加一個新的待辦事項）。然後，我們的reducer會接收到這個action，並根據這個action來更新store中的狀態。當狀態更新後，我們的UI會自動更新來反映這個新的狀態。

// 創建一個 Redux store 來以存放應用的狀態。
// API 是 { subscribe, dispatch, getState }。
let store = createStore(todoApp);

// 可以手動訂閱更新，也可以事件綁定到視圖層。
store.subscribe(() => console.log(store.getState()));

// 改變內部 state 惟一方法是 dispatch 一個 action。
// action 可以被序列化，用日記記錄和儲存下來，後期還可以以回放的方式執行
store.dispatch(addTodo('Learn about actions'));

Redux的store提供了一種集中管理和更新應用狀態的方式，使得狀態的管理變得可預測且易於理解。

6、請介紹React中的key有什麼作用？

在React中，key是一個特殊的字符串屬性，你需要在創建元素數組時將其傳遞。在React的diff算法中，key用於識別哪些元素髮生了變化，哪些被添加或刪除。

具體來說，當我們渲染一個元素列表時，React需要追蹤每個元素的身份，以便在狀態發生變化時能正確地更新和渲染元素。key就是這個身份的標識。

例如，如果我們有一個待辦事項列表，每次添加一個新的待辦事項時，React需要確定是添加新的待辦事項，還是重新排序現有的待辦事項。如果每個待辦事項都有一個穩定的、獨一無二的key，React就可以正確地識別和更新每個待辦事項。

const todoItems = todos.map((todo) =>
  <li key={todo.id}>
    {todo.text}
  </li>
);

在這個例子中，todo.id被用作每個元素的key。這樣，無論列表如何變化（添加、刪除、重新排序等），React都可以通過key來識別每個元素。

需要注意的是，儘管在很多情況下，你可能會被誘使使用元素的索引作爲key，但這通常是不推薦的。如果列表可以重新排序，這可能會導致性能降低，或者狀態錯誤。除非你可以保證元素的順序永遠不會改變，否則最好使用一個唯一且穩定的標識符作爲key。

7、簡述類組件和函數式組件的區別？

React提供了兩種主要的方式來定義組件：類組件（Class Components）和函數組件（Function Components）。

類組件（Class Components）

類組件是使用ES6類來定義的，它必須擴展React.Component，並定義一個render方法，該方法返回一個React元素。類組件支持本地狀態（也就是this.state）和生命週期方法（如componentDidMount）。

class Welcome extends React.Component {
  constructor(props) {
    super(props);
    this.state = { name: 'John' };
  }

  render() {
    return <h1>Hello, {this.state.name}</h1>;
  }
}

函數組件（Function Components）

函數組件是一個接收props並返回React元素的函數。在React 16.8及其之後的版本中，函數組件通過使用Hooks還可以支持本地狀態和生命週期方法。

function Welcome(props) {
  const [name, setName] = React.useState('John');
  return <h1>Hello, {name}</h1>;
}

主要區別：

類組件需要使用this關鍵字來訪問props和狀態，而函數組件則可以直接訪問這些值。
原來只有類組件可以使用的特性，比如狀態和生命週期方法，現在函數組件通過Hooks也可以使用。
函數組件通常更簡潔，更易於測試和理解。
類組件目前仍然支持一些尚未在函數組件中提供的特性，比如錯誤邊界。

8、請列舉React和vue.js的相似性和差異性？

React和Vue.js都是非常流行的前端JavaScript框架，它們有許多相似之處，但也有一些重要的差異。

相似性：

虛擬DOM： React和Vue.js都使用虛擬DOM來提高性能。虛擬DOM是真實DOM的抽象，只有當虛擬DOM與真實DOM有差異時，才進行最小化的DOM更新。
組件化： 兩者都推崇組件化的開發模式，通過組合不同的組件來創建複雜的用戶界面。
響應式： 兩者都實現了響應式數據流，當數據發生變化時，框架會自動更新DOM。
單向數據流： 在組件層級中，兩者都實現了單向數據流。這使得狀態管理更加可預測，有利於應用的維護和理解。

差異性：

學習曲線： Vue.js通常被認爲比React更容易上手。Vue的API較爲簡單直觀，且提供了更多的內置功能和指令，使得開發者可以更快地上手開發。而React的學習曲線相對更陡峭一些，特別是當涉及到高級特性如Hooks和Context時。
編程範式： React更傾向於函數式編程，推崇不可變性和純函數。Vue則更接近於經典的MVVM模式，更加靈活。
模板語法： Vue使用基於HTML的模板語法，可以直接在模板中寫邏輯，較爲直觀。而React則使用JSX，這是一種JavaScript和HTML混寫的語法，需要一些時間去適應。
社區和生態系統： React由Facebook維護，擁有大量的用戶和豐富的第三方庫。Vue.js雖然社區規模小一些，但發展非常活躍，且核心庫和工具的集成度更高。
設計哲學： React傾向於提供較少的內置功能，但提供更多的靈活性，讓開發者可以選擇最適合他們的解決方案。而Vue則試圖提供一個更完善的解決方案，內置了更多的功能，如動畫支持、路由等。

選擇React還是Vue，很大程度上取決於你的項目需求和團隊的技術背景。

9、React中什麼是受控組件和非控組件？

在React中，表單元素的行爲分爲兩種類型：受控組件（Controlled Components）和非受控組件（Uncontrolled Components）。

受控組件：在受控組件中，表單數據由React組件的state管理。也就是說，表單輸入的值會與組件的state同步，每當狀態變化時，都會觸發一個函數（通常是onChange），然後在該函數中更新狀態。這樣，React組件就始終控制了輸入的狀態。

例如，一個簡單的受控組件可能是這樣的：

class ControlledForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {value: ''};

    this.handleChange = this.handleChange.bind(this);
  }

  handleChange(event) {
    this.setState({value: event.target.value});
  }

  render() {
    return (
      <form>
        <label>
          Name:
          <input type="text" value={this.state.value} onChange={this.handleChange} />
        </label>
        <input type="submit" value="Submit" />
      </form>
    );
  }
}

非受控組件：非受控組件則是讓表單數據由DOM自身來管理，而不是存儲在React組件的state中。通過使用ref來從DOM元素中獲取表單值，而不是爲每次鍵盤敲擊都編寫事件處理程序。

例如，一個簡單的非受控組件可能是這樣的：

class UncontrolledForm extends React.Component {
  constructor(props) {
    super(props);
    this.handleSubmit

10、Redux 中間件是怎麼拿到store 和 action? 然後怎麼處理?

Redux 中間件的設計是基於高階函數和鏈式調用的概念。中間件的基本形式是一個函數，這個函數返回另一個函數，這個返回的函數再返回一個函數，這樣形成了一個閉包。

這裏先看一下標準的Redux中間件的基本形式：

const middleware = store => next => action => {
  // 在這裏處理你的代碼
}

store：Redux的store實例，你可以調用store.getState()獲取當前的state，或者store.dispatch()派發一個新的action。
next：這是一個函數，你可以調用next(action)來把控制權交給下一個中間件，如果沒有下一個中間件，那麼控制權就交給Redux。
action：這是當前派發的action。

中間件的處理流程通常是這樣的：

中間件拿到當前的action和store。
根據需要，中間件可以在action被傳遞到reducer之前，修改action，攔截action，或者在action被處理後做一些額外的操作。
中間件處理完後，通過next(action)將action傳遞給下一個中間件，如果沒有下一個中間件，那麼action將被傳遞給reducer。

例如，一個簡單的中間件，用於在console裏記錄每個action和state的變化：

const logger = store => next => action => {
  console.log('dispatching', action)
  let result = next(action)
  console.log('next state', store.getState())
  return result
}

在這個例子中，每當一個action被派發，我們都會在console裏記錄這個action，然後調用next(action)將action傳遞給下一個中間件或者reducer，然後再記錄新的state。

11、React Hook 的使用限制有哪些？

React Hook在使用過程中確實有一些限制和規則要遵守，主要有以下幾點：

只在最頂層使用Hook：不要在循環，條件判斷或者子函數中調用Hook。確保總是在你的React函數的最頂層調用他們。遵守這個規則，你可以確保Hooks在每一次渲染中都在同一個順序被調用。這讓React能夠在多次的useState和useEffect調用之間保持正確的狀態。
只在React函數中調用Hook：不要在普通的JavaScript函數中調用Hook。你可以在React的函數組件中調用Hook，也可以在你的自定義Hook中調用其他Hook。
在自定義Hook中使用Hook：當你想在兩個函數間共享一些狀態邏輯時，你可以創建你自己的自定義Hook，然後在那裏調用其他的Hook。

這些限制主要是爲了保證React能正確地追蹤各個Hook之間的狀態。不遵守這些規則可能會導致複雜且難以追蹤的bug。爲了幫助開發者遵守這些規則，React團隊提供了一個ESLint插件：eslint-plugin-react-hooks，這個插件可以幫助檢測你的代碼是否違反了這些規則。

12、React Hooks在平時開發中需要注意的問題和原因？

在使用React Hooks時，除了官方提出的使用規則，還有一些其他需要注意的事項：

避免過度使用useEffect：有時候我們可能會過度使用useEffect，導致組件的渲染和重渲染過於頻繁。我們需要明確地理解何時使用useEffect，尤其是它的依賴項數組。如果你的effect依賴於多個state或props，記得將它們全部包含在依賴項數組中，以避免不必要的副作用。
閉包問題：在使用useState和useEffect時，經常會遇到閉包問題。也就是說，當你在effect或事件處理函數中引用了state，你獲取到的其實是當次渲染中的state值，而不是最新的state值。如果你需要獲取最新的state值，可以考慮使用useRef或者函數形式的setState。
注意清理副作用：在使用useEffect處理諸如訂閱事件、網絡請求等副作用操作時，別忘了在effect返回的函數中進行清理，否則可能會導致內存泄漏。
自定義Hooks的命名要以“use”開頭：這是一種約定俗成的規則，這樣可以使得代碼更清晰，更容易分辨出哪些函數是Hook。
避免在循環、條件或嵌套函數中調用Hook：這是由於React依賴於Hook調用的順序來正確地保存內部state。如果我們在循環、條件或嵌套函數中調用Hook，可能會在多次渲染之間改變Hook的調用順序，從而導致錯誤。
不要在函數組件體外部定義Hook：這也是爲了保證Hook的調用順序的一致性。

遵守以上規則和注意事項，可以幫助我們更好地使用React Hooks，編寫出更健壯、更易於維護的代碼。

13、React的嚴格模式如何使用，有什麼用處？

React的嚴格模式是一種幫助你發現潛在問題的工具。要啓用嚴格模式，你可以將應用程序或其部分包裹在<React.StrictMode>標籤中。這是一個不渲染任何可見UI的組件，只用於檢查其子組件中的潛在問題。

import React from 'react';

function ExampleApplication() {
  return (
    <React.StrictMode>
      <div>
        {/* Your application code goes here */}
      </div>
    </React.StrictMode>
  );
}

嚴格模式當前有助於檢查以下方面的問題：

識別不安全的生命週期方法：如componentWillMount、componentWillReceiveProps和componentWillUpdate。這些生命週期方法在新版本的React中已經被廢棄，嚴格模式會警告你不要使用它們。
關於使用過時或未預期的ref用法的警告：例如，確保你沒有在函數組件上使用string ref。
檢測意外的副作用：嚴格模式會在開發模式下，故意將生命週期方法如render、componentDidUpdate調用兩次，以幫助你發現可能的副作用。注意，這隻在開發模式下會發生。
檢測過時的context API：舊的context API在新版本的React中已經被廢棄，嚴格模式會警告你不要使用它。

需要注意的是，嚴格模式只檢查開發環境下的應用程序。在生產環境中，它不會有任何影響，也不會消耗任何額外的資源。

14、State 是怎麼注入到組件的，從 reducer 到組件經歷了什麼樣的過程？

在React和Redux中，state的流動過程如下：

Dispatch Action：當用戶交互或者某些事件觸發時，你的應用會dispatch一個action。這個action是一個描述了發生了什麼的普通對象。
Reducer處理Action：Redux store會調用你提供的reducer函數，傳遞當前的state和剛剛dispatch的action作爲參數。Reducer是一個純函數，它接收舊的state和action，然後返回新的state，描述了用戶action如何改變state。
Store更新：Redux store保存了根reducer返回的整個state樹。當新的state返回後，Redux store會更新state，並且會通知所有的監聽器。
組件重新渲染：當store更新後，所有與state有關的組件都會重新渲染。在React和Redux應用中，你會使用react-redux庫的Provider組件將store提供給你的組件樹，然後使用connect函數將你的組件連接到Redux store。當state更新時，connect函數會確保React組件接收到新的props並重新渲染。

通過這一系列過程，state被注入到React組件中，當state更新時，與之相關聯的組件也會更新。

15、React state和props區別是什麼 ?

在React中，state和props都是組件處理數據和交互的重要方式，但它們的用途和行爲有一些重要的區別：

所有權：state是在組件內部自身管理的數據，可以被組件自身修改。而props則是由父組件傳遞給子組件的數據，子組件只能讀取props，不能修改props。
改變的方式：state可以通過組件內部的this.setState方法進行改變，這會導致組件重新渲染。而props只能通過父組件改變傳遞給子組件的值來改變，子組件不能直接修改props。
數據的流動：state可以在組件內部流動，可以被傳遞給子組件作爲props，但是不能流動到父組件。而props則可以在父子組件之間流動，父組件可以通過props將數據傳遞給子組件。
用途：state通常用於存儲組件的內部狀態，比如用戶輸入、UI狀態等需要響應用戶交互改變的數據。而props則用於父組件向子組件傳遞數據和回調函數。

簡單來說，state是讓組件控制自己的狀態，props是讓外部對組件自身進行配置。

16、簡述什麼是React 高階組件？

高階組件（Higher-Order Components，簡稱HOC）是React中用於複用組件邏輯的一種高級技術。它不是React的API的一部分，而是一種基於React的組合特性的設計模式。

高階組件就是一個函數，接受一個組件作爲參數，並返回一個新的組件。這個新的組件會使用原始的組件，並可以在其基礎上添加新的props或者新的功能。

function higherOrderComponent(WrappedComponent) {
  return class extends React.Component {
    render() {
      return <WrappedComponent {...this.props} />;
    }
  }
}

在這個例子中，higherOrderComponent就是一個高階組件。它接收一個組件WrappedComponent，返回一個新的組件。新的組件會渲染WrappedComponent，並且將自己接收的props傳遞給WrappedComponent。

高階組件的用途非常廣泛，例如，可以用於控制props，抽象state，控制渲染等等。比如React-Redux的connect函數就是一個高階組件，它用於將React組件連接到Redux store，使得組件可以訪問store中的state和dispatch函數。

17. 請簡述useCallback 和 useMemo 的使用場景？

18. 解釋React組件的生命週期方法？

19. 解釋React中的合成事件是什麼？

20. useEffect()的清除機制是什麼？在什麼時候執行？

21. useState()的 state 是否可以直接修改？是否可以引起組件渲染？

22. 完整的簡述React 的 diff 過程？

23. 請簡述react-router 和 react-router-dom 的有什麼區別？

24. 在 React中元素（ element）和組件（ component）有什麼區別？

25. 約束性組件（ controlled component）與非約束性組件（ uncontrolled component）有什麼區別？

26. React shouldComponentUpdate有什麼用？爲什麼它很重要？