一些關(guān)于React的常見(jiàn)面試題（分享）

1、redux中間件

成都創(chuàng)新互聯(lián)長(zhǎng)期為超過(guò)千家客戶提供的網(wǎng)站建設(shè)服務(wù)，團(tuán)隊(duì)從業(yè)經(jīng)驗(yàn)10年，關(guān)注不同地域、不同群體，并針對(duì)不同對(duì)象提供差異化的產(chǎn)品和服務(wù)；打造開(kāi)放共贏平臺(tái)，與合作伙伴共同營(yíng)造健康的互聯(lián)網(wǎng)生態(tài)環(huán)境。為新化企業(yè)提供專業(yè)的成都網(wǎng)站制作、做網(wǎng)站，新化網(wǎng)站改版等技術(shù)服務(wù)。擁有10余年豐富建站經(jīng)驗(yàn)和眾多成功案例,為您定制開(kāi)發(fā)。

答：中間件提供第三方插件的模式，自定義攔截 action -> reducer 的過(guò)程。變?yōu)?action -> middlewares -> reducer 。這種機(jī)制可以讓我們改變數(shù)據(jù)流，實(shí)現(xiàn)如異步 action ，action 過(guò)濾，日志輸出，異常報(bào)告等功能。

常見(jiàn)的中間件： redux-logger：提供日志輸出；redux-thunk：處理異步操作；redux-promise：處理異步操作；actionCreator的返回值是promise

2、redux有什么缺點(diǎn)

答：1.一個(gè)組件所需要的數(shù)據(jù)，必須由父組件傳過(guò)來(lái)，而不能像flux中直接從store取。

2.當(dāng)一個(gè)組件相關(guān)數(shù)據(jù)更新時(shí)，即使父組件不需要用到這個(gè)組件，父組件還是會(huì)重新render，可能會(huì)有效率影響，或者需要寫(xiě)復(fù)雜的shouldComponentUpdate進(jìn)行判斷。

3、react組件的劃分業(yè)務(wù)組件技術(shù)組件？

答：根據(jù)組件的職責(zé)通常把組件分為UI組件和容器組件。UI 組件負(fù)責(zé) UI 的呈現(xiàn)，容器組件負(fù)責(zé)管理數(shù)據(jù)和邏輯。兩者通過(guò)React-Redux 提供connect方法聯(lián)系起來(lái)。

4、react生命周期函數(shù)

答：一、初始化階段：

getDefaultProps:獲取實(shí)例的默認(rèn)屬性

getInitialState:獲取每個(gè)實(shí)例的初始化狀態(tài)

componentWillMount：組件即將被裝載、渲染到頁(yè)面上

render:組件在這里生成虛擬的DOM節(jié)點(diǎn)

componentDidMount:組件真正在被裝載之后

二、運(yùn)行中狀態(tài)：

componentWillReceiveProps:組件將要接收到屬性的時(shí)候調(diào)用

shouldComponentUpdate:組件接受到新屬性或者新?tīng)顟B(tài)的時(shí)候（可以返回false，接收數(shù)據(jù)后不更新，阻止render調(diào)用，后面的函數(shù)不會(huì)被繼續(xù)執(zhí)行了）

componentWillUpdate:組件即將更新不能修改屬性和狀態(tài)

render:組件重新描繪

componentDidUpdate:組件已經(jīng)更新

三、銷毀階段：

componentWillUnmount:組件即將銷毀

5、react性能優(yōu)化是哪個(gè)周期函數(shù)？

答：shouldComponentUpdate 這個(gè)方法用來(lái)判斷是否需要調(diào)用render方法重新描繪dom。因?yàn)閐om的描繪非常消耗性能，如果我們能在shouldComponentUpdate方法中能夠?qū)懗龈鼉?yōu)化的dom diff算法，可以極大的提高性能。

6、為什么虛擬dom會(huì)提高性能?

答：虛擬dom相當(dāng)于在js和真實(shí)dom中間加了一個(gè)緩存，利用dom diff算法避免了沒(méi)有必要的dom操作，從而提高性能。

具體實(shí)現(xiàn)步驟如下：

1.用 JavaScript 對(duì)象結(jié)構(gòu)表示 DOM 樹(shù)的結(jié)構(gòu)；然后用這個(gè)樹(shù)構(gòu)建一個(gè)真正的 DOM 樹(shù)，插到文檔當(dāng)中；

2.當(dāng)狀態(tài)變更的時(shí)候，重新構(gòu)造一棵新的對(duì)象樹(shù)。然后用新的樹(shù)和舊的樹(shù)進(jìn)行比較，記錄兩棵樹(shù)差異；

把2所記錄的差異應(yīng)用到步驟1所構(gòu)建的真正的DOM樹(shù)上，視圖就更新了。

7、diff算法?

答：1.把樹(shù)形結(jié)構(gòu)按照層級(jí)分解，只比較同級(jí)元素。

2.給列表結(jié)構(gòu)的每個(gè)單元添加唯一的key屬性，方便比較。

3.React 只會(huì)匹配相同 class 的 component（這里面的class指的是組件的名字）

4.合并操作，調(diào)用 component 的 setState 方法的時(shí)候, React 將其標(biāo)記為 dirty.到每一個(gè)事件循環(huán)結(jié)束, React 檢查所有標(biāo)記 dirty 的 component 重新繪制.

6．選擇性子樹(shù)渲染。開(kāi)發(fā)人員可以重寫(xiě)shouldComponentUpdate提高diff的性能。

8、react性能優(yōu)化方案

答：1）重寫(xiě)shouldComponentUpdate來(lái)避免不必要的dom操作。

2）使用 production 版本的react.js。

3）使用key來(lái)幫助React識(shí)別列表中所有子組件的最小變化

9、簡(jiǎn)述flux 思想

答：Flux 的特點(diǎn)，就是數(shù)據(jù)的"單向流動(dòng)"。

1.用戶訪問(wèn) View

2.View 發(fā)出用戶的 Action

3.Dispatcher 收到 Action，要求 Store 進(jìn)行相應(yīng)的更新

4.Store 更新后，發(fā)出一個(gè)"change"事件

5.View 收到"change"事件后，更新頁(yè)面

10、React項(xiàng)目用過(guò)什么腳手架？Mern? Yeoman?

答：Mern：MERN是腳手架的工具，它可以很容易地使用Mongo, Express, React and NodeJS生成同構(gòu)JS應(yīng)用。它限度地減少安裝時(shí)間，并得到您使用的成熟技術(shù)來(lái)加速開(kāi)發(fā)。

11、你了解React嗎？

答：了解，React是facebook搞出來(lái)的一個(gè)輕量級(jí)的組件庫(kù)，用于解決前端視圖層的一些問(wèn)題，就是MVC中V層的問(wèn)題，它內(nèi)部的Instagram網(wǎng)站就是用React搭建的。

12、React解決了什么問(wèn)題？

答：解決了三個(gè)問(wèn)題： 1.組件復(fù)用問(wèn)題， 2.性能問(wèn)題，3.兼容性問(wèn)題：

13、React的協(xié)議？

答：React遵循的協(xié)議是“BSD許可證 + 專利開(kāi)源協(xié)議”，這個(gè)協(xié)議比較奇葩，如果你的產(chǎn)品跟facebook沒(méi)有競(jìng)爭(zhēng)關(guān)系，你可以自由的使用react，但是如果有競(jìng)爭(zhēng)關(guān)系，你的react的使用許可將會(huì)被取消

14、了解shouldComponentUpdate嗎？

答：React虛擬dom技術(shù)要求不斷的將dom和虛擬dom進(jìn)行diff比較，如果dom樹(shù)比價(jià)大，這種比較操作會(huì)比較耗時(shí)，因此React提供了shouldComponentUpdate這種補(bǔ)丁函數(shù)，如果對(duì)于一些變化，如果我們不希望某個(gè)組件刷新，或者刷新后跟原來(lái)其實(shí)一樣，就可以使用這個(gè)函數(shù)直接告訴React，省去diff操作，進(jìn)一步的提高了效率。

15、React 的工作原理？

答：React 會(huì)創(chuàng)建一個(gè)虛擬 DOM(virtual DOM)。當(dāng)一個(gè)組件中的狀態(tài)改變時(shí)，React 首先會(huì)通過(guò) "diffing" 算法來(lái)標(biāo)記虛擬 DOM 中的改變，第二步是調(diào)節(jié)(reconciliation)，會(huì)用 diff 的結(jié)果來(lái)更新 DOM。

16、使用 React 有何優(yōu)點(diǎn)？

答：1.只需查看 render 函數(shù)就會(huì)很容易知道一個(gè)組件是如何被渲染的

2.JSX 的引入，使得組件的代碼更加可讀，也更容易看懂組件的布局，或者組件之間是如何互相引用的

3.支持服務(wù)端渲染，這可以改進(jìn) SEO 和性能

4.易于測(cè)試

5.React 只關(guān)注 View 層，所以可以和其它任何框架(如Backbone.js, Angular.js)一起使用

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

答：1.展示組件關(guān)心組件看起來(lái)是什么。展示專門(mén)通過(guò) props 接受數(shù)據(jù)和回調(diào)，并且?guī)缀醪粫?huì)有自身的狀態(tài)，但當(dāng)展示組件擁有自身的狀態(tài)時(shí)，通常也只關(guān)心 UI 狀態(tài)而不是數(shù)據(jù)的狀態(tài)。

2.容器組件則更關(guān)心組件是如何運(yùn)作的。容器組件會(huì)為展示組件或者其它容器組件提供數(shù)據(jù)和行為(behavior)，它們會(huì)調(diào)用 Flux actions，并將其作為回調(diào)提供給展示組件。容器組件經(jīng)常是有狀態(tài)的，因?yàn)樗鼈兪?其它組件的)數(shù)據(jù)源

18、類組件(Class component)和函數(shù)式組件(Functional component)之間有何不同？

答：1.類組件不僅允許你使用更多額外的功能，如組件自身的狀態(tài)和生命周期鉤子，也能使組件直接訪問(wèn) store 并維持狀態(tài)

2.當(dāng)組件僅是接收 props，并將組件自身渲染到頁(yè)面時(shí)，該組件就是一個(gè) '無(wú)狀態(tài)組件(stateless component)'，可以使用一個(gè)純函數(shù)來(lái)創(chuàng)建這樣的組件。這種組件也被稱為啞組件(dumb components)或展示組件

19、(組件的)狀態(tài)(state)和屬性(props)之間有何不同？

答：1. State 是一種數(shù)據(jù)結(jié)構(gòu)，用于組件掛載時(shí)所需數(shù)據(jù)的默認(rèn)值。State 可能會(huì)隨著時(shí)間的推移而發(fā)生突變，但多數(shù)時(shí)候是作為用戶事件行為的結(jié)果。

2. Props(properties 的簡(jiǎn)寫(xiě))則是組件的配置。props 由父組件傳遞給子組件，并且就子組件而言，props 是不可變的(immutable)。組件不能改變自身的 props，但是可以把其子組件的 props 放在一起(統(tǒng)一管理)。Props 也不僅僅是數(shù)據(jù)--回調(diào)函數(shù)也可以通過(guò) props 傳遞。

20、應(yīng)該在 React 組件的何處發(fā)起 Ajax 請(qǐng)求？

答：在 React 組件中，應(yīng)該在 componentDidMount 中發(fā)起網(wǎng)絡(luò)請(qǐng)求。這個(gè)方法會(huì)在組件第一次“掛載”(被添加到 DOM)時(shí)執(zhí)行，在組件的生命周期中僅會(huì)執(zhí)行一次。更重要的是，你不能保證在組件掛載之前 Ajax 請(qǐng)求已經(jīng)完成，如果是這樣，也就意味著你將嘗試在一個(gè)未掛載的組件上調(diào)用 setState，這將不起作用。在 componentDidMount 中發(fā)起網(wǎng)絡(luò)請(qǐng)求將保證這有一個(gè)組件可以更新了。

21、何為受控組件(controlled component)？

答；在 HTML 中，類似 <input>, <textarea> 和 <select> 這樣的表單元素會(huì)維護(hù)自身的狀態(tài)，并基于用戶的輸入來(lái)更新。當(dāng)用戶提交表單時(shí)，前面提到的元素的值將隨表單一起被發(fā)送。但在 React 中會(huì)有些不同，包含表單元素的組件將會(huì)在 state 中追蹤輸入的值，并且每次調(diào)用回調(diào)函數(shù)時(shí)，如 onChange 會(huì)更新 state，重新渲染組件。一個(gè)輸入表單元素，它的值通過(guò) React 的這種方式來(lái)控制，這樣的元素就被稱為"受控元素"。

22、在 React 中，refs 的作用是什么？

答：Refs 可以用于獲取一個(gè) DOM 節(jié)點(diǎn)或者 React 組件的引用。何時(shí)使用 refs 的好的示例有管理焦點(diǎn)/文本選擇，觸發(fā)命令動(dòng)畫(huà)，或者和第三方 DOM 庫(kù)集成。你應(yīng)該避免使用 String 類型的 Refs 和內(nèi)聯(lián)的 ref 回調(diào)。Refs 回調(diào)是 React 所推薦的。

23、何為高階組件(higher order component)？

答：高階組件是一個(gè)以組件為參數(shù)并返回一個(gè)新組件的函數(shù)。HOC 運(yùn)行你重用代碼、邏輯和引導(dǎo)抽象。最常見(jiàn)的可能是 Redux 的 connect 函數(shù)。除了簡(jiǎn)單分享工具庫(kù)和簡(jiǎn)單的組合，HOC最好的方式是共享 React 組件之間的行為。如果你發(fā)現(xiàn)你在不同的地方寫(xiě)了大量代碼來(lái)做同一件事時(shí)，就應(yīng)該考慮將代碼重構(gòu)為可重用的 HOC。

24. 使用箭頭函數(shù)(arrow functions)的優(yōu)點(diǎn)是什么？

答：1. 作用域安全：在箭頭函數(shù)之前，每一個(gè)新創(chuàng)建的函數(shù)都有定義自身的 this 值(在構(gòu)造函數(shù)中是新對(duì)象；在嚴(yán)格模式下，函數(shù)調(diào)用中的 this 是未定義的；如果函數(shù)被稱為“對(duì)象方法”，則為基礎(chǔ)對(duì)象等)，但箭頭函數(shù)不會(huì)，它會(huì)使用封閉執(zhí)行上下文的 this 值。

2. 簡(jiǎn)單：箭頭函數(shù)易于閱讀和書(shū)寫(xiě)

3. 清晰：當(dāng)一切都是一個(gè)箭頭函數(shù)，任何常規(guī)函數(shù)都可以立即用于定義作用域。開(kāi)發(fā)者總是可以查找 next-higher 函數(shù)語(yǔ)句，以查看 this 的值

25、為什么建議傳遞給 setState 的參數(shù)是一個(gè) callback 而不是一個(gè)對(duì)象？

答：因?yàn)?this.props 和 this.state 的更新可能是異步的，不能依賴它們的值去計(jì)算下一個(gè) state。

26、除了在構(gòu)造函數(shù)中綁定 this，還有其它方式嗎？

答：可以使用屬性初始值設(shè)定項(xiàng)(property initializers)來(lái)正確綁定回調(diào)，create-react-app 也是默認(rèn)支持的。在回調(diào)中你可以使用箭頭函數(shù)，但問(wèn)題是每次組件渲染時(shí)都會(huì)創(chuàng)建一個(gè)新的回調(diào)。

27、怎么阻止組件的渲染？

答：在組件的 render 方法中返回 null 并不會(huì)影響觸發(fā)組件的生命周期方法

28、當(dāng)渲染一個(gè)列表時(shí)，何為 key？設(shè)置 key 的目的是什么？

答：Keys 會(huì)有助于 React 識(shí)別哪些 items 改變了，被添加了或者被移除了。Keys 應(yīng)該被賦予數(shù)組內(nèi)的元素以賦予(DOM)元素一個(gè)穩(wěn)定的標(biāo)識(shí)，選擇一個(gè) key 的方法是使用一個(gè)字符串，該字符串能惟一地標(biāo)識(shí)一個(gè)列表項(xiàng)。很多時(shí)候你會(huì)使用數(shù)據(jù)中的 IDs 作為 keys，當(dāng)你沒(méi)有穩(wěn)定的 IDs 用于被渲染的 items 時(shí)，可以使用項(xiàng)目索引作為渲染項(xiàng)的 key，但這種方式并不推薦，如果 items 可以重新排序，就會(huì)導(dǎo)致 re-render 變慢

29、(在構(gòu)造函數(shù)中)調(diào)用 super(props) 的目的是什么？

答：在 super() 被調(diào)用之前，子類是不能使用 this 的，在 ES2015 中，子類必須在 constructor 中調(diào)用 super()。傳遞 props 給 super() 的原因則是便于(在子類中)能在 constructor 訪問(wèn) this.props。

30、何為 JSX ？

答：JSX 是 JavaScript 語(yǔ)法的一種語(yǔ)法擴(kuò)展，并擁有 JavaScript 的全部功能。JSX 生產(chǎn) React "元素"，你可以將任何的 JavaScript 表達(dá)式封裝在花括號(hào)里，然后將其嵌入到 JSX 中。在編譯完成之后，JSX 表達(dá)式就變成了常規(guī)的 JavaScript 對(duì)象，這意味著你可以在 if 語(yǔ)句和 for 循環(huán)內(nèi)部使用 JSX，將它賦值給變量，接受它作為參數(shù)，并從函數(shù)中返回它。

31何為 Children ？

答：在JSX表達(dá)式中，一個(gè)開(kāi)始標(biāo)簽(比如<a>)和一個(gè)關(guān)閉標(biāo)簽(比如</a>)之間的內(nèi)容會(huì)作為一個(gè)特殊的屬性props.children被自動(dòng)傳遞給包含著它的組件。

這個(gè)屬性有許多可用的方法，包括 React.Children.map，React.Children.forEach， React.Children.count， React.Children.only，React.Children.toArray。

32、在 React 中，何為 state？

答：State 和 props 類似，但它是私有的，并且完全由組件自身控制。State 本質(zhì)上是一個(gè)持有數(shù)據(jù)，并決定組件如何渲染的對(duì)象。

33、什么原因會(huì)促使你脫離 create-react-app 的依賴？

答；當(dāng)你想去配置 webpack 或 babel presets。

34、何為 redux ？

答：Redux 的基本思想是整個(gè)應(yīng)用的 state 保持在一個(gè)單一的 store 中。store 就是一個(gè)簡(jiǎn)單的 javascript 對(duì)象，而改變應(yīng)用 state 的唯一方式是在應(yīng)用中觸發(fā) actions，然后為這些 actions 編寫(xiě) reducers 來(lái)修改 state。整個(gè) state 轉(zhuǎn)化是在 reducers 中完成，并且不應(yīng)該有任何副作用

35、在 Redux 中，何為 store ？

答：Store 是一個(gè) javascript 對(duì)象，它保存了整個(gè)應(yīng)用的 state。與此同時(shí)，Store 也承擔(dān)以下職責(zé)：

允許通過(guò) getState() 訪問(wèn) state運(yùn)行通過(guò) dispatch(action) 改變 state通過(guò) subscribe(listener) 注冊(cè) listeners通過(guò) subscribe(listener) 返回的函數(shù)處理 listeners 的注

36、何為 action ？

答；Actions 是一個(gè)純 javascript 對(duì)象，它們必須有一個(gè) type 屬性表明正在執(zhí)行的 action 的類型。實(shí)質(zhì)上，action 是將數(shù)據(jù)從應(yīng)用程序發(fā)送到 store 的有效載荷。

37、何為 reducer ？

答：一個(gè) reducer 是一個(gè)純函數(shù)，該函數(shù)以先前的 state 和一個(gè) action 作為參數(shù)，并返回下一個(gè) state。

38、Redux Thunk 的作用是什么？

答：Redux thunk 是一個(gè)允許你編寫(xiě)返回一個(gè)函數(shù)而不是一個(gè) action 的 actions creators 的中間件。如果滿足某個(gè)條件，thunk 則可以用來(lái)延遲 action 的派發(fā)(dispatch)，這可以處理異步 action 的派發(fā)(dispatch)。

39、何為純函數(shù)(pure function)？

答：一個(gè)純函數(shù)是一個(gè)不依賴于且不改變其作用域之外的變量狀態(tài)的函數(shù)，這也意味著一個(gè)純函數(shù)對(duì)于同樣的參數(shù)總是返回同樣的結(jié)果。

更多編程相關(guān)內(nèi)容，請(qǐng)關(guān)注php中文網(wǎng)編程入門(mén)欄目！

網(wǎng)頁(yè)題目：一些關(guān)于React的常見(jiàn)面試題（分享）
文章分享：http://muchs.cn/article12/cghegc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站排名、定制開(kāi)發(fā)、做網(wǎng)站、網(wǎng)站導(dǎo)航、小程序開(kāi)發(fā)、服務(wù)器托管

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)