本文和大家分享的主要是React面試中常見的問題及相關(guān)分析，一起來看看吧，希望對大家學(xué)習(xí)React 有所幫助。

　　調(diào)用 setState 之后發(fā)生了什么？

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

　　React 中 Element 與 Component 的區(qū)別是？

　　簡單而言，React Element 是描述屏幕上所見內(nèi)容的數(shù)據(jù)結(jié)構(gòu)，是對于 UI 的對象表述。典型的 React Element 就是利用 JSX 構(gòu)建的聲明式代碼片然后被轉(zhuǎn)化為 createElement 的調(diào)用組合。而 React Component 則是可以接收參數(shù)輸入并且返回某個 React Element 的函數(shù)或者類。更多介紹可以參考 React Elements vs React Components。

　　在什么情況下你會優(yōu)先選擇使用 Class Component 而不是 Functional Component？

　　在組件需要包含內(nèi)部狀態(tài)或者使用到生命周期函數(shù)的時候使用 Class Component ，否則使用函數(shù)式組件。

　　React 中 refs 的作用是什么？

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

　　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

　　

　　)

　　}

　　}

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

　　function CustomForm ({handleSubmit}) {

　　let inputElement

　　return (

　　<form onSubmit={() => handleSubmit(inputElement.value)}>

　　<input

　　type='text'

　　ref={(input) => inputElement = input} />

　　<button type='submit'>Submitbutton>

　　form>

　　)

　　}

　　React 中 keys 的作用是什么？

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

　　render () {

　　return (

　　<ul>

　　{this.state.todoItems.map(({task, uid}) => {

　　return <li key={uid}>{task}li>

　　})}

　　ul>

　　)

　　}

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

　　如果你創(chuàng)建了類似于下面的 Twitter 元素，那么它相關(guān)的類定義是啥樣子的？

　　<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

　　}

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

　　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)

　　}

　　}

　　這種模式的優(yōu)勢在于將父組件與子組件解耦和，父組件可以直接訪問子組件的內(nèi)部狀態(tài)而不需要再通過Props傳遞，這樣父組件能夠更為方便地控制子組件展示的UI界面。譬如產(chǎn)品經(jīng)理讓我們將原本展示的 Badge 替換為 Profile ，我們可以輕易地修改下回調(diào)函數(shù)即可：

　　<Twitter username='tylermcginnis33'>

　　{(user) => user === null

　　? <Loading />

　　: <Profile info={user} />}Twitter>

　　Controlled Component 與 Uncontrolled Component 之間的區(qū)別是什么？

　　React 的核心組成之一就是能夠維持內(nèi)部狀態(tài)的自治組件，不過當(dāng)我們引入原生的HTML表單元素時（input,select,textarea 等），我們是否應(yīng)該將所有的數(shù)據(jù)托管到 React 組件中還是將其仍然保留在 DOM 元素中呢？這個問題的答案就是受控組件與非受控組件的定義分割。受控組件（Controlled Component）代指那些交由 React 控制并且所有的表單數(shù)據(jù)統(tǒng)一存放的組件。譬如下面這段代碼中 username 變量值并沒有存放到DOM元素中，而是存放在組件狀態(tài)數(shù)據(jù)中。任何時候我們需要改變 username 變量值時，我們應(yīng)當(dāng)調(diào)用 setState 函數(shù)進(jìn)行修改。

　　class ControlledForm extends Component {

　　state = {

　　username: ''

　　}

　　updateUsername = (e) => {

　　this.setState({

　　username: e.target.value,

　　})

　　}

　　handleSubmit = () => {}

　　render () {

　　return (

　　<form onSubmit={this.handleSubmit}>

　　<input

　　type='text'

　　value={this.state.username}

　　onChange={this.updateUsername} />

　　<button type='submit'>Submit

　　

　　)

　　}

　　}

　　而非受控組件（Uncontrolled Component）則是由DOM存放表單數(shù)據(jù)，并非存放在 React 組件中。我們可以使用 refs 來操控DOM元素：

　　class UnControlledForm 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

　　

　　)

　　}

　　}

　　竟然非受控組件看上去更好實現(xiàn)，我們可以直接從 DOM 中抓取數(shù)據(jù)，而不需要添加額外的代碼。不過實際開發(fā)中我們并不提倡使用非受控組件，因為實際情況下我們需要更多的考慮表單驗證、選擇性的開啟或者關(guān)閉按鈕點擊、強制輸入格式等功能支持，而此時我們將數(shù)據(jù)托管到 React 中有助于我們更好地以聲明式的方式完成這些功能。引入 React 或者其他 MVVM 框架最初的原因就是為了將我們從繁重的直接操作 DOM 中解放出來。

　　在生命周期中的哪一步你應(yīng)該發(fā)起 AJAX 請求？

　　我們應(yīng)當(dāng)將AJAX 請求放到 componentDidMount 函數(shù)中執(zhí)行，主要原因有下：

　　·

　　React 下一代調(diào)和算法 Fiber 會通過開始或停止渲染的方式優(yōu)化應(yīng)用性能，其會影響到 componentWillMount 的觸發(fā)次數(shù)。對于 componentWillMount 這個生命周期函數(shù)的調(diào)用次數(shù)會變得不確定，React 可能會多次頻繁調(diào)用 componentWillMount。如果我們將 AJAX 請求放到 componentWillMount 函數(shù)中，那么顯而易見其會被觸發(fā)多次，自然也就不是好的選擇。

　　·

　　·

　　如果我們將 AJAX 請求放置在生命周期的其他函數(shù)中，我們并不能保證請求僅在組件掛載完畢后才會要求響應(yīng)。如果我們的數(shù)據(jù)請求在組件掛載之前就完成，并且調(diào)用了 setState 函數(shù)將數(shù)據(jù)添加到組件狀態(tài)中，對于未掛載的組件則會報錯。而在 componentDidMount 函數(shù)中進(jìn)行 AJAX 請求則能有效避免這個問題。

　　·

　　shouldComponentUpdate 的作用是啥以及為何它這么重要？

　　shouldComponentUpdate 允許我們手動地判斷是否要進(jìn)行組件更新，根據(jù)組件的應(yīng)用場景設(shè)置函數(shù)的合理返回值能夠幫我們避免不必要的更新。

　　如何告訴 React 它應(yīng)該編譯生產(chǎn)環(huán)境版本？

　　通常情況下我們會使用 Webpack 的 DefinePlugin 方法來將 NODE_ENV 變量值設(shè)置為 production。編譯版本中 React 會忽略 propType 驗證以及其他的告警信息，同時還會降低代碼庫的大小，React 使用了 Uglify 插件來移除生產(chǎn)環(huán)境下不必要的注釋等信息。

　　為什么我們需要使用 React 提供的 Children API 而不是 JavaScript 的 map？

　　props.children 并不一定是數(shù)組類型，譬如下面這個元素：

　　<Parent>

　　<h1>Welcome.h1>Parent>

　　如果我們使用 props.children.map 函數(shù)來遍歷時會受到異常提示，因為在這種情況下 props.children 是對象（object）而不是數(shù)組（array）。React 當(dāng)且僅當(dāng)超過一個子元素的情況下會將 props.children 設(shè)置為數(shù)組，就像下面這個代碼片：

　　<Parent>

　　<h1>Welcome.h1>

　　<h2>props.children will now be an arrayh2>Parent>

　　這也就是我們優(yōu)先選擇使用 React.Children.map 函數(shù)的原因，其已經(jīng)將 props.children 不同類型的情況考慮在內(nèi)了。

　　概述下 React 中的事件處理邏輯

　　為了解決跨瀏覽器兼容性問題，React 會將瀏覽器原生事件（Browser Native Event）封裝為合成事件（SyntheticEvent）傳入設(shè)置的事件處理器中。這里的合成事件提供了與原生事件相同的接口，不過它們屏蔽了底層瀏覽器的細(xì)節(jié)差異，保證了行為的一致性。另外有意思的是，React 并沒有直接將事件附著到子元素上，而是以單一事件監(jiān)聽器的方式將所有的事件發(fā)送到頂層進(jìn)行處理。這樣 React 在更新 DOM 的時候就不需要考慮如何去處理附著在 DOM 上的事件監(jiān)聽器，最終達(dá)到優(yōu)化性能的目的。

　　createElement 與 cloneElement 的區(qū)別是什么？

　　createElement 函數(shù)是 JSX 編譯之后使用的創(chuàng)建 React Element 的函數(shù)，而 cloneElement 則是用于復(fù)制某個元素并傳入新的 Props。

　　傳入 setState 函數(shù)的第二個參數(shù)的作用是什么？

　　該函數(shù)會在 setState 函數(shù)調(diào)用完成并且組件開始重渲染的時候被調(diào)用，我們可以用該函數(shù)來監(jiān)聽渲染是否完成：

　　this.setState(

　　{ username: 'tylermcginnis33' },

　　() => console.log('setState has finished and the component has re-rendered.')

　　)

　　下述代碼有錯嗎？

　　this.setState((prevState, props) => {

　　return {

　　streak: prevState.streak + props.count

　　}

　　})

　　這段代碼沒啥問題，不過只是不太常用罷了

 

來源：某熊的全棧之路