已經開源

地址：https://github.com/nanhupatar...
關註我們團隊：

React 中 keys 的作用是什麽？

Keys 是 React 用於追蹤哪些列表中元素被修改、被添加或者被移除的輔助標識。

render () {
  return (
    <ul>
      {this.state.todoItems.map(({item, key}) => {
        return <li key={key}>{item}</li>
      })}
    </ul>
  )
}
 

在開發過程中，我們需要保證某個元素的 key 在其同級元素中具有唯一性。在 React Diff 算法中 React 會借助元素的 Key 值來判斷該元素是新近創建的還是被移動而來的元素，從而減少不必要的元素重渲染。此外，React 還需要借助 Key 值來判斷元素與本地狀態的關聯關系，因此我們絕不可忽視轉換函數中 Key 的重要性。

調用 setState 之後發生了什麽？

在代碼中調用 setState 函數之後，React 會將傳入的參數對象與組件當前的狀態合並，然後觸發所謂的調和過程（Reconciliation）。經過調和過程，React 會以相對高效的方式根據新的狀態構建 React 元素樹並且著手重新渲染整個 UI 界面。在 React 得到元素樹之後，React 會自動計算出新的樹與老樹的節點差異，然後根據差異對界面進行最小化重渲染。在差異計算算法中，React 能夠相對精確地知道哪些位置發生了改變以及應該如何改變，這就保證了按需更新，而不是全部重新渲染。

react 生命周期函數

• 初始化階段：

  • getDefaultProps:獲取實例的默認屬性
  • getInitialState:獲取每個實例的初始化狀態
  • componentWillMount：組件即將被裝載、渲染到頁面上
  • render:組件在這裏生成虛擬的 DOM 節點
  • componentDidMount:組件真正在被裝載之後

• 運行中狀態：

  • componentWillReceiveProps:組件將要接收到屬性的時候調用
  • shouldComponentUpdate:組件接受到新屬性或者新狀態的時候（可以返回 false，接收數據後不更新，阻止 render 調用，後面的函數不會被繼續執行了）
  • componentWillUpdate:組件即將更新不能修改屬性和狀態
  • render:組件重新描繪
  • componentDidUpdate:組件已經更新

• 銷毀階段：

  • componentWillUnmount:組件即將銷毀

shouldComponentUpdate 是做什麽的，（react 性能優化是哪個周期函數？）

shouldComponentUpdate 這個方法用來判斷是否需要調用 render 方法重新描繪 dom。因為 dom 的描繪非常消耗性能，如果我們能在 shouldComponentUpdate 方法中能夠寫出更優化的 dom diff 算法，可以極大的提高性能。

參考react 性能優化-sf

為什麽虛擬 dom 會提高性能?(必考)

虛擬 dom 相當於在 js 和真實 dom 中間加了一個緩存，利用 dom diff 算法避免了沒有必要的 dom 操作，從而提高性能。

用 JavaScript 對象結構表示 DOM 樹的結構；然後用這個樹構建一個真正的 DOM 樹，插到文檔當中當狀態變更的時候，重新構造一棵新的對象樹。然後用新的樹和舊的樹進行比較，記錄兩棵樹差異把 2 所記錄的差異應用到步驟 1 所構建的真正的 DOM 樹上，視圖就更新了。

參考 如何理解虛擬 DOM?-zhihu

react diff 原理（常考，大廠必考）

• 把樹形結構按照層級分解，只比較同級元素。
• 給列表結構的每個單元添加唯一的 key 屬性，方便比較。
• React 只會匹配相同 class 的 component（這裏面的 class 指的是組件的名字）
• 合並操作，調用 component 的 setState 方法的時候, React 將其標記為 dirty.到每一個事件循環結束, React 檢查所有標記 dirty 的 component 重新繪制.
• 選擇性子樹渲染。開發人員可以重寫 shouldComponentUpdate 提高 diff 的性能。

參考：React 的 diff 算法

React 中 refs 的作用是什麽？

Refs 是 React 提供給我們的安全訪問 DOM 元素或者某個組件實例的句柄。我們可以為元素添加 ref 屬性然後在回調函數中接受該元素在 DOM 樹中的句柄，該值會作為回調函數的第一個參數返回：

class CustomForm extends Component {
  handleSubmit = () => {
    console.log("Input Value: ", this.input.value)
  }
  render () {
    return (
      <form onSubmit={this.handleSubmit}>
        <input
          type='text'
          ref={(input) => this.input = input} />
        <button type='submit'>Submit</button>
      </form>
    )
  }
}

上述代碼中的 input 域包含了一個 ref 屬性，該屬性聲明的回調函數會接收 input 對應的 DOM 元素，我們將其綁定到 this 指針以便在其他的類函數中使用。另外值得一提的是，refs 並不是類組件的專屬，函數式組件同樣能夠利用閉包暫存其值：

function CustomForm ({handleSubmit}) {
  let inputElement
  return (
    <form onSubmit={() => handleSubmit(inputElement.value)}>
      <input
        type='text'
        ref={(input) => inputElement = input} />
      <button type='submit'>Submit</button>
    </form>
  )
}

如果你創建了類似於下面的 Twitter 元素，那麽它相關的類定義是啥樣子的？

<Twitter username='tylermcginnis33'>
  {(user) => user === null
    ? <Loading />
    : <Badge info={user} />}
</Twitter>

import React, { Component, PropTypes } from 'react'
import fetchUser from 'twitter'
// fetchUser take in a username returns a promise
// which will resolve with that username's data.
class Twitter extends Component {
  // finish this
}

如果你還不熟悉回調渲染模式（Render Callback Pattern），這個代碼可能看起來有點怪。這種模式中，組件會接收某個函數作為其子組件，然後在渲染函數中以 props.children 進行調用：

import React, { Component, PropTypes } from 'react'
import fetchUser from 'twitter'
class Twitter extends Component {
  state = {
    user: null,
  }
  static propTypes = {
    username: PropTypes.string.isRequired,
  }
  componentDidMount () {
    fetchUser(this.props.username)
      .then((user) => this.setState({user}))
  }
  render () {
    return this.props.children(this.state.user)
  }
}

這種模式的優勢在於將父組件與子組件解耦和，父組件可以直接訪問子組件的內部狀態而不需要再通過 Props 傳遞，這樣父組件能夠更為方便地控制子組件展示的 UI 界面。譬如產品經理讓我們將原本展示的 Badge 替換為 Profile，我們可以輕易地修改下回調函數即可：

<Twitter username='tylermcginnis33'>
  {(user) => user === null
    ? <Loading />
    : <Profile info={user} />}
</Twitter>

展示組件(Presentational component)和容器組件(Container component)之間有何不同

• 展示組件關心組件看起來是什麽。展示專門通過 props 接受數據和回調，並且幾乎不會有自身的狀態，但當展示組件擁有自身的狀態時，通常也只關心 UI 狀態而不是數據的狀態。
• 容器組件則更關心組件是如何運作的。容器組件會為展示組件或者其它容器組件提供數據和行為(behavior)，它們會調用 Flux actions，並將其作為回調提供給展示組件。容器組件經常是有狀態的，因為它們是(其它組件的)數據源。

類組件(Class component)和函數式組件(Functional component)之間有何不同

• 類組件不僅允許你使用更多額外的功能，如組件自身的狀態和生命周期鉤子，也能使組件直接訪問 store 並維持狀態
• 當組件僅是接收 props，並將組件自身渲染到頁面時，該組件就是一個 ‘無狀態組件(stateless component)‘，可以使用一個純函數來創建這樣的組件。這種組件也被稱為啞組件(dumb components)或展示組件

(組件的)狀態(state)和屬性(props)之間有何不同

• State 是一種數據結構，用於組件掛載時所需數據的默認值。State 可能會隨著時間的推移而發生突變，但多數時候是作為用戶事件行為的結果。
• Props(properties 的簡寫)則是組件的配置。props 由父組件傳遞給子組件，並且就子組件而言，props 是不可變的(immutable)。組件不能改變自身的 props，但是可以把其子組件的 props 放在一起(統一管理)。Props 也不僅僅是數據--回調函數也可以通過 props 傳遞。

何為受控組件(controlled component)

在 HTML 中，類似 <input>, <textarea> 和 <select> 這樣的表單元素會維護自身的狀態，並基於用戶的輸入來更新。當用戶提交表單時，前面提到的元素的值將隨表單一起被發送。但在 React 中會有些不同，包含表單元素的組件將會在 state 中追蹤輸入的值，並且每次調用回調函數時，如 onChange 會更新 state，重新渲染組件。一個輸入表單元素，它的值通過 React 的這種方式來控制，這樣的元素就被稱為"受控元素"。

何為高階組件(higher order component)

高階組件是一個以組件為參數並返回一個新組件的函數。HOC 運行你重用代碼、邏輯和引導抽象。最常見的可能是 Redux 的 connect 函數。除了簡單分享工具庫和簡單的組合，HOC 最好的方式是共享 React 組件之間的行為。如果你發現你在不同的地方寫了大量代碼來做同一件事時，就應該考慮將代碼重構為可重用的 HOC。

為什麽建議傳遞給 setState 的參數是一個 callback 而不是一個對象

因為 this.props 和 this.state 的更新可能是異步的，不能依賴它們的值去計算下一個 state。

除了在構造函數中綁定 this，還有其它方式嗎

你可以使用屬性初始值設定項(property initializers)來正確綁定回調，create-react-app 也是默認支持的。在回調中你可以使用箭頭函數，但問題是每次組件渲染時都會創建一個新的回調。

(在構造函數中)調用 super(props) 的目的是什麽

在 super() 被調用之前，子類是不能使用 this 的，在 ES2015 中，子類必須在 constructor 中調用 super()。傳遞 props 給 super() 的原因則是便於(在子類中)能在 constructor 訪問 this.props。

應該在 React 組件的何處發起 Ajax 請求

在 React 組件中，應該在 componentDidMount 中發起網絡請求。這個方法會在組件第一次“掛載”(被添加到 DOM)時執行，在組件的生命周期中僅會執行一次。更重要的是，你不能保證在組件掛載之前 Ajax 請求已經完成，如果是這樣，也就意味著你將嘗試在一個未掛載的組件上調用 setState，這將不起作用。在 componentDidMount 中發起網絡請求將保證這有一個組件可以更新了。

描述事件在 React 中的處理方式。

為了解決跨瀏覽器兼容性問題，您的 React 中的事件處理程序將傳遞 SyntheticEvent 的實例，它是 React 的瀏覽器本機事件的跨瀏覽器包裝器。

這些 SyntheticEvent 與您習慣的原生事件具有相同的接口，除了它們在所有瀏覽器中都兼容。有趣的是，React 實際上並沒有將事件附加到子節點本身。React 將使用單個事件監聽器監聽頂層的所有事件。這對於性能是有好處的，這也意味著在更新 DOM 時，React 不需要擔心跟蹤事件監聽器。

createElement 和 cloneElement 有什麽區別？

React.createElement():JSX 語法就是用 React.createElement()來構建 React 元素的。它接受三個參數，第一個參數可以是一個標簽名。如 div、span，或者 React 組件。第二個參數為傳入的屬性。第三個以及之後的參數，皆作為組件的子組件。

React.createElement(
    type,
    [props],
    [...children]
)

React.cloneElement()與 React.createElement()相似，不同的是它傳入的第一個參數是一個 React 元素，而不是標簽名或組件。新添加的屬性會並入原有的屬性，傳入到返回的新元素中，而就的子元素獎杯替換。

React.cloneElement(
  element,
  [props],
  [...children]
)

React 中有三種構建組件的方式

React.createClass()、ES6 class 和無狀態函數。

react 組件的劃分業務組件技術組件？

• 根據組件的職責通常把組件分為 UI 組件和容器組件。
• UI 組件負責 UI 的呈現，容器組件負責管理數據和邏輯。
• 兩者通過 React-Redux 提供 connect 方法聯系起來。

簡述 flux 思想

Flux 的最大特點，就是數據的"單向流動"。

1. 用戶訪問 View
2. View 發出用戶的 Action
3. Dispatcher 收到 Action，要求 Store 進行相應的更新
4. Store 更新後，發出一個"change"事件
5. View 收到"change"事件後，更新頁面

React 項目用過什麽腳手架（本題是開放性題目）

creat-react-app Yeoman 等

了解 redux 麽，說一下 redux 把

• redux 是一個應用數據流框架，主要是解決了組件間狀態共享的問題，原理是集中式管理，主要有三個核心方法，action，store，reducer，工作流程是 view 調用 store 的 dispatch 接收 action 傳入 store，reducer 進行 state 操作，view 通過 store 提供的 getState 獲取最新的數據，flux 也是用來進行數據操作的，有四個組成部分 action，dispatch，view，store，工作流程是 view 發出一個 action，派發器接收 action，讓 store 進行數據更新，更新完成以後 store 發出 change，view 接受 change 更新視圖。Redux 和 Flux 很像。主要區別在於 Flux 有多個可以改變應用狀態的 store，在 Flux 中 dispatcher 被用來傳遞數據到註冊的回調事件，但是在 redux 中只能定義一個可更新狀態的 store，redux 把 store 和 Dispatcher 合並,結構更加簡單清晰
• 新增 state,對狀態的管理更加明確，通過 redux，流程更加規範了，減少手動編碼量，提高了編碼效率，同時缺點時當數據更新時有時候組件不需要，但是也要重新繪制，有些影響效率。一般情況下，我們在構建多交互，多數據流的復雜項目應用時才會使用它們

redux 有什麽缺點

• 一個組件所需要的數據，必須由父組件傳過來，而不能像 flux 中直接從 store 取。
• 當一個組件相關數據更新時，即使父組件不需要用到這個組件，父組件還是會重新 render，可能會有效率影響，或者需要寫復雜的 shouldComponentUpdate 進行判斷。

原文地址：https://segmentfault.com/a/1190000016885832

常見react面試題匯總