3、什么時(shí)候使用類組件（ Class Component）？什么時(shí)候使用功能組件(Functional Component）？

如果組件具有狀態(tài)（ state）或生命周期方法，請(qǐng)使用類組件；否則，使用功能組件。

4、什么是 React的refs？為什么它們很重要？

refs允許你直接訪問DOM元素或組件實(shí)例。為了使用它們，可以向組件添加個(gè)ref屬性。

如果該屬性的值是一個(gè)回調(diào)函數(shù)，它將接受底層的DOM元素或組件的已掛載實(shí)例作為其第一個(gè)參數(shù)?？梢栽诮M件中存儲(chǔ)它。

export class App extends Component  {showResult ( ) {console. log（this. input. value）}render ( ) {return (<div><input  type="text" ref={input => this .input =input } />< button onClick={this. showResult.bind（this）}>展示結(jié)果</ button></div>);}}

如果該屬性值是一個(gè)字符串， React將會(huì)在組件實(shí)例化對(duì)象的refs屬性中，存儲(chǔ)一個(gè)同名屬性，該屬性是對(duì)這個(gè)DOM元素的引用?？梢酝ㄟ^原生的 DOM API操作它。

export class App extends Component { showResult( )console .log ( this.refs.username.value)render ( ){  return (<div><input type="text" ref="username"/>< button onClick={this. showResu1t.bind (this)}>展示結(jié)果</ button></div>);}}

5、React 中的key是什么？為什么它們很重要？

key可以幫助 React跟蹤循環(huán)創(chuàng)建列表中的虛擬DOM元素，了解哪些元素已更改、添加或刪除。

每個(gè)綁定key的虛擬DOM元素，在兄弟元素之間都是獨(dú)一無二的。在 React的和解過程中，比較新的虛擬DOM樹與上一個(gè)虛擬DOM樹之間的差異，并映射到頁面中。key使 React處理列表中虛擬DOM時(shí)更加高效，因?yàn)?React可以使用虛擬DOM上的key屬性，快速了解元素是新的、需要?jiǎng)h除的，還是修改過的。如果沒有key,Rεat就不知道列表中虛擬DOM元素與頁面中的哪個(gè)元素相對(duì)應(yīng)。所以在創(chuàng)建列表的時(shí)候，不要忽略key。

6、如果創(chuàng)建了類似于下面的 Icketang元素，那么該如何實(shí)現(xiàn) Icketang類？

< Icketang username="雨夜清荷">{user = > user ？<Info user={user} />：<Loading />}</Icketang>import React, { Component } fromr "react"； export class Icketang extends Component {//請(qǐng)實(shí)現(xiàn)你的代碼}

在上面的案例中，一個(gè)組件接受一個(gè)函數(shù)作為它的子組件。Icketang組件的子組件是一個(gè)函數(shù)，而不是一個(gè)常用的組件。這意味著在實(shí)現(xiàn) Icketang組件時(shí)，需要將props. children作為一個(gè)函數(shù)來處理。

具體實(shí)現(xiàn)如下。

import React,  { Component } from "react"；class Icketang extends Component { constructor ( props ){  super ( props ) this .state = { user : props.user }}componentDidMount( ) {//模擬異步獲取數(shù)據(jù)操作，更新狀態(tài)setTimeout ( ( ) => this .setstate ({user：'有課前端網(wǎng)'})，2000）}render ( ) {return this.props.children ( this .state.user )}}class Loading extends Component { render  ( ) { return <p>Loading.</p>}}class Info extends Component  { render ( ) { return <hl> { this .props.user }</h1>}}

調(diào)用 Icketang組件，并傳遞給user屬性數(shù)據(jù)，把 props.children作為一個(gè)函數(shù)來處理。這種模式的好處是，我們已經(jīng)將父組件與子組件分離了，父組件管理狀態(tài)。父組件的使用者可以決定父組件以何種形式渲染子組件。

為了演示這一點(diǎn)，在渲染 Icketang組件時(shí)，分別傳遞和不傳遞user屬性數(shù)據(jù)來觀察渲染結(jié)果。

import {render} from  "react-dom"; render (<Icketang>{ user = > user ？<Info user = {user} /> ：<Loading /> }</Icketang> , ickt）

上述代碼沒有為 Icketang組件傳遞user屬性數(shù)據(jù)，因此將首先渲染 Loading組件，當(dāng)父組件的user狀態(tài)數(shù)據(jù)發(fā)生改變時(shí)，我們發(fā)現(xiàn)Info組件可以成功地渲染出來。

render（< Icketang user="雨夜清荷">{ user => user ？<Info user = {user} /> ：<Loading />}</Icketang>， ickt)

上述代碼為 Icketang組件傳遞了user屬性數(shù)據(jù)，因此將直接渲染Info組件，當(dāng)父組件的user狀態(tài)數(shù)據(jù)發(fā)生改變時(shí)，我們發(fā)現(xiàn)Info組件產(chǎn)生了更新，在整個(gè)過程中， Loading組件都未渲染。

7、約束性組件（ controlled component）與非約束性組件（ uncontrolled  component）有什么區(qū)別？

在 React中，組件負(fù)責(zé)控制和管理自己的狀態(tài)。

如果將HTML中的表單元素（ input、 select、 textarea等）添加到組件中，當(dāng)用戶與表單發(fā)生交互時(shí)，就涉及表單數(shù)據(jù)存儲(chǔ)問題。根據(jù)表單數(shù)據(jù)的存儲(chǔ)位置，將組件分成約東性組件和非約東性組件。

約束性組件（ controlled component）就是由 React控制的組件，也就是說，表單元素的數(shù)據(jù)存儲(chǔ)在組件內(nèi)部的狀態(tài)中，表單到底呈現(xiàn)什么由組件決定。

如下所示， username沒有存儲(chǔ)在DOM元素內(nèi)，而是存儲(chǔ)在組件的狀態(tài)中。每次要更新 username時(shí)，就要調(diào)用 setState更新狀態(tài)；每次要獲取 username的值，就要獲取組件狀態(tài)值。

class App extends Component {//初始化狀態(tài)constructor ( props ) { super ( props )this .state = { username：'有課前端網(wǎng)'}}//查看結(jié)果showResult ( ) {//獲取數(shù)據(jù)就是獲取狀態(tài)值console. log ( this .state. username )}changeUsername (e) {//原生方法獲取var value =e .target .value//更新前，可以進(jìn)行臟值檢測(cè)//更新狀態(tài)this .setState ( {tusername:value} )}//渲染組件render( ) {//返回虛擬DOM return (<div><p>{/*輸入框綁定va1ue*/}<input type="text" onChange={ this.changeUsername .bind (this ) }value= { this .state.username }/></p><p>< button onClick={this.showResult.bind (this)}>查看結(jié)果</ button></p></div>)}}

非約束性組件（ uncontrolled component）就是指表單元素的數(shù)據(jù)交由元素自身存儲(chǔ)并處理，而不是通過 React組件。表單如何呈現(xiàn)由表單元素自身決定。

如下所示，表單的值并沒有存儲(chǔ)在組件的狀態(tài)中，而是存儲(chǔ)在表單元素中，當(dāng)要修改表單數(shù)據(jù)時(shí)，直接輸入表單即可。有時(shí)也可以獲取元素，再手動(dòng)修改它的值。當(dāng)要獲取表單數(shù)據(jù)時(shí)，要首先獲取表單元素，然后通過表單元素獲取元素的值。

注意：為了方便在組件中獲取表單元素，通常為元素設(shè)置ref屬性，在組件內(nèi)部通過refs屬性獲取對(duì)應(yīng)的DOM元素。

class App extends Component {//查看結(jié)果showResult ( ) {//獲取值console. log（this. refs. username .value）//修改值，就是修改元素自身的值this.refs.username.value="專業(yè)前端學(xué)習(xí)平臺(tái)"//渲染組件render ( ) {//返回虛擬DOM return (<div><p>{/*非約束性組件中，表單元素通過 defaultvalue定義*/}< input type="text"  ref=" username"  defaultvalue="有課前端網(wǎng)"/></p><p>< button onClick={this. showResult.bind ( this ) }>查看結(jié)果</button></p></div> )  }   }

通常，使用 Webpack的 DefinePlugin方法將 NODE ENV設(shè)置為 production。這將剝離 propType驗(yàn)證和額外的警告。除此之外，還可以減少代碼，因?yàn)?React使用 Uglify的dead-code來消除開發(fā)代碼和注釋，這將大大減少包占用的空間。

11、為什么要使用 React. Children. map（ props. children，( )=>)而不是props. children. map ( (  ) => )？

因?yàn)椴荒鼙ＷC props. children將是一個(gè)數(shù)組。

以下面的代碼為例。

<Parent><h1>有課前端網(wǎng)</h1></Parent>

在父組件內(nèi)部，如果嘗試使用 props.children. map映射子對(duì)象，則會(huì)拋出錯(cuò)誤，因?yàn)閜rops. children是一個(gè)對(duì)象，而不是一個(gè)數(shù)組。

如果有多個(gè)子元素， React會(huì)使 props.children成為一個(gè)數(shù)組，如下所示。

<Parent><h1>有課前端網(wǎng)</h1><h2>前端技術(shù)學(xué)習(xí)平臺(tái)</h2></Parent>不建議使用如下方式，在這個(gè)案例中會(huì)拋出錯(cuò)誤。class Parent extends Component { render ( ) { return (<div> { this .props.children.map (obj = > obj ) }</div>)} }

建議使用如下方式，避免在上一個(gè)案例中拋出錯(cuò)誤。

class Parent extends Component  {render ( ) {  return (<div> { React.Children.map ( this .props.children, obj => obj) }</div>)}}

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

為了解決跨瀏覽器兼容性問題， React中的事件處理程序?qū)鬟f SyntheticEvent的實(shí)例，它是跨瀏覽器事件的包裝器。這些 SyntheticEvent與你習(xí)慣的原生事件具有相同的接口，它們?cè)谒袨g覽器中都兼容。

React實(shí)際上并沒有將事件附加到子節(jié)點(diǎn)本身。而是通過事件委托模式，使用單個(gè)事件監(jiān)聽器監(jiān)聽頂層的所有事件。這對(duì)于性能是有好處的。這也意味著在更新DOM時(shí)， React不需要擔(dān)心跟蹤事件監(jiān)聽器。

13、createElement和 cloneElement有什么區(qū)別？

createElement是JSX被轉(zhuǎn)載得到的，在 React中用來創(chuàng)建 React元素（即虛擬DOM）的內(nèi)容。cloneElement用于復(fù)制元素并傳遞新的 props。

14、setState方法的第二個(gè)參數(shù)有什么用？使用它的目的是什么？

它是一個(gè)回調(diào)函數(shù)，當(dāng) setState方法執(zhí)行結(jié)束并重新渲染該組件時(shí)調(diào)用它。在工作中，更好的方式是使用 React組件生命周期之——“存在期”的生命周期方法，而不是依賴這個(gè)回調(diào)函數(shù)。

export class App extends Component {constructor （props） { super ( props )this.state = {username："雨夜清荷"}}render ( ) {return (<div> { this .state. username） </div>);}componentDidMount ( ) {this .setstate ( {  username ：'有課前端網(wǎng)'}，( ) => console. log ( 're-rendered success. ' ) )

15、這段代碼有什么問題？

class App extends Component { constructor ( props )  {super ( props )this .state = {username："有課前端網(wǎng)"， msg：' '}}render ( ) {return (<div> { this .state. msg }</div>);}componentDidMount ( )  { this .setState ( ( oldState, props ) => {return {msg:oldState .username + ' - ' + props.intro }} )}

render ( < App intro=" 前端技術(shù)專業(yè)學(xué)習(xí)平臺(tái)"></App>，ickt )

在頁面中正常輸出“有課前端網(wǎng)-前端技術(shù)專業(yè)學(xué)習(xí)平臺(tái)”。但是這種寫法很少使用，并不是常用的寫法。React允許對(duì) setState方法傳遞一個(gè)函數(shù)，它接收到先前的狀態(tài)和屬性數(shù)據(jù)并返回一個(gè)需要修改的狀態(tài)對(duì)象，正如我們?cè)谏厦嫠龅哪菢?。它不但沒有問題，而且如果根據(jù)以前的狀態(tài)（ state）以及屬性來修改當(dāng)前狀態(tài)，推薦使用這種寫法。

16、請(qǐng)說岀 React從 EMAScript5編程規(guī)范到 EMAScript6編程規(guī)范過程中的幾點(diǎn)改變。

主要改變?nèi)缦隆?/span>

（1）創(chuàng)建組件的方法不同。

EMAScript5版本中，定義組件用 React.createClass。EMAScript6版本中，定義組件要定義組件類，并繼承 Component類。

（2）定義默認(rèn)屬性的方法不同。

EMAScript5版本中，用 getDefaultProps定義默認(rèn)屬性。EMAScript6版本中，為組件定義 defaultProps靜態(tài)屬性，來定義默認(rèn)屬性。

（3）定義初始化狀態(tài)的方法不同。EMAScript5版本中，用 getInitialState定義初始化狀態(tài)。EMAScript6版本中，在構(gòu)造函數(shù)中，通過this. state定義初始化狀態(tài)。

注意：構(gòu)造函數(shù)的第一個(gè)參數(shù)是屬性數(shù)據(jù)，一定要用 super繼承。

（4）定義屬性約束的方法不同。

EMAScript5版本中，用 propTypes定義屬性的約束。

EMAScript6版本中，為組件定義 propsTypes靜態(tài)屬性，來對(duì)屬性進(jìn)行約束。

（5）使用混合對(duì)象、混合類的方法不同。

EMAScript5版本中，通過mixins繼承混合對(duì)象的方法。

EMAScript6版本中，定義混合類，讓混合類繼承 Component類，然后讓組件類繼承混合類，實(shí)現(xiàn)對(duì)混合類方法的繼承。

（6）綁定事件的方法不同。

EMAScript5版本中，綁定的事件回調(diào)函數(shù)作用域是組件實(shí)例化對(duì)象。

EMAScript6版本中，綁定的事件回調(diào)函數(shù)作用域是null。

（7）父組件傳遞方法的作用域不同。

EMAScript5版本中，作用域是父組件。 EMAScript6版本中，變成了null。

（8）組件方法作用域的修改方法不同。

EMAScript5版本中，無法改變作用域。

EMAScript6版本中，作用域是可以改變的。

17、React中D算法的原理是什么？

原理如下。

（1）節(jié)點(diǎn)之間的比較。

節(jié)點(diǎn)包括兩種類型：一種是 React組件，另一種是HTML的DOM。

如果節(jié)點(diǎn)類型不同，按以下方式比較。

如果 HTML DOM不同，直接使用新的替換舊的。如果組件類型不同，也直接使用新的替換舊的。

如果 HTML DOM類型相同，按以下方式比較。

在 React里樣式并不是一個(gè)純粹的字符串，而是一個(gè)對(duì)象，這樣在樣式發(fā)生改變時(shí)，只需要改變替換變化以后的樣式。修改完當(dāng)前節(jié)點(diǎn)之后，遞歸處理該節(jié)點(diǎn)的子節(jié)點(diǎn)。

如果組件類型相同，按以下方式比較。

如果組件類型相同，使用 React機(jī)制處理。一般使用新的 props替換舊的 props，并在之后調(diào)用組件的 componentWillReceiveProps方法，之前組件的 render方法會(huì)被調(diào)用。

節(jié)點(diǎn)的比較機(jī)制開始遞歸作用于它的子節(jié)點(diǎn)。

（2）兩個(gè)列表之間的比較。

一個(gè)節(jié)點(diǎn)列表中的一個(gè)節(jié)點(diǎn)發(fā)生改變， React無法很妤地處理這個(gè)問題。循環(huán)新舊兩個(gè)列表，并找出不同，這是 React唯一的處理方法。

但是，有一個(gè)辦法可以把這個(gè)算法的復(fù)雜度降低。那就是在生成一個(gè)節(jié)點(diǎn)列表時(shí)給每個(gè)節(jié)點(diǎn)上添加一個(gè)key。這個(gè)key只需要在這一個(gè)節(jié)點(diǎn)列表中唯一，不需要全局唯一。

（3）取舍

需要注意的是，上面的啟發(fā)式算法基于兩點(diǎn)假設(shè)。

類型相近的節(jié)點(diǎn)總是生成同樣的樹，而類型不同的節(jié)點(diǎn)也總是生成不同的樹

可以為多次 render都表現(xiàn)穩(wěn)定的節(jié)點(diǎn)設(shè)置key。

上面的節(jié)點(diǎn)之間的比較算法基本上就是基于這兩個(gè)假設(shè)而實(shí)現(xiàn)的。要提高 React應(yīng)用的效率，需要按照這兩點(diǎn)假設(shè)來開發(fā)。

18、概述一下 React中的事件處理邏輯。

為了解決跨瀏覽器兼容性問題， React會(huì)將瀏覽器原生事件（ Browser Native Event）封裝為合成事件（ Synthetic Event）并傳入設(shè)置的事件處理程序中。

這里的合成事件提供了與原生事件相同的接口，不過它們屏蔽了底層瀏覽器的細(xì)節(jié)差異，保證了行為的一致性。另外， React并沒有直接將事件附著到子元素上，而是以單一事件監(jiān)聽器的方式將所有的事件發(fā)送到頂層進(jìn)行處理（基于事件委托原理）。

這樣 React在更新DOM時(shí)就不需要考慮如何處理附著在DOM上的事件監(jiān)聽器，最終達(dá)到優(yōu)化性能的目的。

19、傳入 setstate函數(shù)的第二個(gè)參數(shù)的作用是什么？

第二個(gè)參數(shù)是一個(gè)函數(shù)，該函數(shù)會(huì)在 setState函數(shù)調(diào)用完成并且組件開始重渲染時(shí)調(diào)用，可以用該函數(shù)來監(jiān)聽渲染是否完成。

this .setstate ({ username：'有課前端網(wǎng)'}, ( ) => console.log ( 're-rendered success. ' ) )

20、React和vue.js的相似性和差異性是什么？

相似性如下。

（1）都是用于創(chuàng)建UI的 JavaScript庫。

（2）都是快速和輕量級(jí)的代碼庫（這里指 React核心庫）。

（3）都有基于組件的架構(gòu)。

（4）都使用虛擬DOM。

（5）都可以放在單獨(dú)的HTML文件中，或者放在 Webpack設(shè)置的一個(gè)更復(fù)雜的模塊中。

（6）都有獨(dú)立但常用的路由器和狀態(tài)管理庫。

它們最大的區(qū)別在于 Vue. js通常使用HTML模板文件，而 React完全使用 JavaScript創(chuàng)建虛擬DOM。 Vue. js還具有對(duì)于“可變狀態(tài)”的“ reactivity”的重新渲染的自動(dòng)化檢測(cè)系統(tǒng)。

21、生命周期調(diào)用方法的順序是什么？

React生命周期分為三大周期，11個(gè)階段，生命周期方法調(diào)用順序分別如下。

（1）在創(chuàng)建期的五大階段，調(diào)用方法的順序如下。

• getDetaultProps：定義默認(rèn)屬性數(shù)據(jù)。

• getInitialState：初始化默認(rèn)狀態(tài)數(shù)據(jù)。

• component WillMount：組件即將被構(gòu)建。

• render：渲染組件。

• componentDidMount：組件構(gòu)建完成

（2）在存在期的五大階段，調(diào)用方法的順序如下。

• componentWillReceiveProps：組件即將接收新的屬性數(shù)據(jù)。

• shouldComponentUpdate：判斷組件是否應(yīng)該更新。

• componnent WillUpdate：組件即將更新。

• render：渲染組件。

• componentDidUpdate：組件更新完成。

（3）在銷毀期的一個(gè)階段，調(diào)用方法 componentWillUnmount，表示組件即將被銷毀。

22、使用狀態(tài)要注意哪些事情？

要注意以下幾點(diǎn)。

• 不要直接更新狀態(tài)

• 狀態(tài)更新可能是異步的

• 狀態(tài)更新要合并。

• 數(shù)據(jù)從上向下流動(dòng)

23、說說 React組件開發(fā)中關(guān)于作用域的常見問題。

在 EMAScript5語法規(guī)范中，關(guān)于作用域的常見問題如下。

（1）在map等方法的回調(diào)函數(shù)中，要綁定作用域this（通過bind方法）。

（2）父組件傳遞給子組件方法的作用域是父組件實(shí)例化對(duì)象，無法改變。

（3）組件事件回調(diào)函數(shù)方法的作用域是組件實(shí)例化對(duì)象（綁定父組件提供的方法就是父組件實(shí)例化對(duì)象），無法改變。

在 EMAScript6語法規(guī)范中，關(guān)于作用域的常見問題如下。

（1）當(dāng)使用箭頭函數(shù)作為map等方法的回調(diào)函數(shù)時(shí)，箭頭函數(shù)的作用域是當(dāng)前組件的實(shí)例化對(duì)象（即箭頭函數(shù)的作用域是定義時(shí)的作用域），無須綁定作用域。

（2）事件回調(diào)函數(shù)要綁定組件作用域。

（3）父組件傳遞方法要綁定父組件作用域。

總之，在 EMAScript6語法規(guī)范中，組件方法的作用域是可以改變的。

24、在 Redux中使用 Action要注意哪些問題？

在Redux中使用 Action的時(shí)候， Action文件里盡量保持 Action文件的純凈，傳入什么數(shù)據(jù)就返回什么數(shù)據(jù)，最妤把請(qǐng)求的數(shù)據(jù)和 Action方法分離開，以保持 Action的純凈。

25、在 Reducer文件里，對(duì)于返回的結(jié)果，要注意哪些問題？

在 Reducer文件里，對(duì)于返回的結(jié)果，必須要使用 Object.assign ( )來復(fù)制一份新的 state，否則頁面不會(huì)跟著數(shù)據(jù)刷新。

return Object. assign ( { }， state, {type:action .type,shouldNotPaint : true})

26、如何使用4.0版本的 React Router？

React Router 4.0版本中對(duì) hashHistory做了遷移，執(zhí)行包安裝命令 npm install react-router-dom后，按照如下代碼進(jìn)行使用即可。

import  { HashRouter, Route, Redirect, Switch  } from " react-router-dom"； class App extends Component {render ( ) {return (<div><Switch><Route path="/list"  componen t= { List }></Route><Route path="/detail/：id" component= { Detail } > </Route>
<Redirect from="/ "  to="/list"> </Redirect>
</Switch>
</div>
)
}
}
const routes = (
<HashRouter>
<App> </App>
</HashRouter>
)
render（routes, ickt）;

27、在 ReactNative中，如何解決8081端口號(hào)被占用而提示無法訪問的問題？

在運(yùn)行 react-native start時(shí)添加參數(shù)port 8082；在 package.json中修改“scripts”中的參數(shù)，添加端口號(hào)；修改項(xiàng)目下的 node_modules \react-native\local- cli\server\server.js文件配置中的 default端口值。

28、在 ReactNative中，如何解決 adb devices找不到連接設(shè)備的問題？

在使用 Genymotion時(shí)，首先需要在SDK的 platform-tools中加入環(huán)境變量，然后在 Genymotion中單擊 Setting，選擇ADB選項(xiàng)卡，單擊 Use custom Android SDK tools，瀏覽本地SDK的位置，單擊OK按鈕就可以了。啟動(dòng)虛擬機(jī)后，在cmd中輸入 adb devices可以查看設(shè)備。

29、React- Router有幾種形式？

有以下幾種形式。

HashRouter，通過散列實(shí)現(xiàn)，路由要帶#。

BrowerRouter，利用HTML5中 history API實(shí)現(xiàn)，需要服務(wù)器端支持，兼容性不是很好。

30、在使用 React Router時(shí)，如何獲取當(dāng)前頁面的路由或?yàn)g覽器中地址欄中的地址？

在當(dāng)前組件的 props中，包含 location屬性對(duì)象，包含當(dāng)前頁面路由地址信息，在 match中存儲(chǔ)當(dāng)前路由的參數(shù)等數(shù)據(jù)信息。可以直接通過 this .props使用它們。

學(xué)習(xí)更多技能

請(qǐng)點(diǎn)擊下方web前端開發(fā)