react面試題及答案

React面試整理前端面試的范圍非常廣泛，如果你面試的公司需要react框架方面的知識(shí)，以下內(nèi)容是你必須掌握的，小編根據(jù)自己的工作以及平常面試經(jīng)驗(yàn)整理了以下react面試必備技能，希望能夠幫助你通過面試，你只需要請我喝杯咖啡的錢就可以拿走所有經(jīng)驗(yàn)！為了方便學(xué)習(xí)，小編按照以下四個(gè)方面進(jìn)行分類講解：1、基本知識(shí)區(qū)分RealDOM和VirtualDOMRealDOMVirtualDOM1.更新緩慢1.更新更快2.可以直接更新HTML2.無法直接更新HTML 一3.如果元素更新，則創(chuàng)建新DOM3.如果元素更新，則更新JSX 一4.DOM操作代價(jià)很高4.DOM操作非常簡單5.消耗的內(nèi)存較多5.很少的內(nèi)存消耗什么是React1、React是Facebook在2011年開發(fā)的前端JavaScript庫。2、它遵循基于組件的方法，有助于構(gòu)建可重用的UI組件。3、它用于開發(fā)復(fù)雜和交互式的Web和移動(dòng)UI。4、盡管它僅在2015年開源，但有一個(gè)很大的支持社區(qū)。React有什么特點(diǎn)？React的主要功能如下：1、它使用**虛擬DOM**而不是真正的DOM。2、它可以用服務(wù)器端渲染。3、它遵循單向數(shù)據(jù)流或數(shù)據(jù)綁定。列出React的一些主要優(yōu)點(diǎn)。React的一些主要優(yōu)點(diǎn)是：它提高了應(yīng)用的性能可以方便地在客戶端和服務(wù)器端使用由于JSX,代碼的可讀性很好React很容易與Meteor，Angular等其他框架集成使用ReaCt，編寫UI測試用例變得非常容易1.5React有哪些限制？React的限制如下：.React只是一個(gè)庫，而不是一個(gè)完整的框架.它的庫非常龐大，需要時(shí)間來理解.新手程序員可能很難理解.編碼變得復(fù)雜，因?yàn)樗褂脙?nèi)聯(lián)模板和JSX什么是JSX？JSX是JavaScriptXML的簡寫。是React使用的一種文件，它利用JavaSCriPt的表現(xiàn)力和類似HTML的模板語法。這使得HTML文件非常容易理解。此文件能使應(yīng)用非?？煽?，并能夠提高其性能。下面是JSX的一個(gè)例子：render(){return(<div><h1>HelloWorldfromEdureka!!</h1></div>你了解VirtualDOM嗎？解釋一下它的工作原理。VirtualDOM是一個(gè)輕量級(jí)的JavaScript對象，它最初只是realDOM的副本。它是一個(gè)節(jié)點(diǎn)樹，它將元素、它們的屬性和內(nèi)容作為對象及其屬性。React的渲染函數(shù)從React組件中創(chuàng)建一個(gè)節(jié)點(diǎn)樹。然后它響應(yīng)數(shù)據(jù)模型中的變化來更新該樹，該變化是由用戶或系統(tǒng)完成的各種動(dòng)作引起的。VirtualDOM工作過程有三個(gè)簡單的步驟：1、每當(dāng)?shù)讓訑?shù)據(jù)發(fā)生改變時(shí)，整個(gè)UI都將在VirtualDOM描述中重新渲染。2、然后計(jì)算之前DOM表示與新表示的之間的差異。compareVirtualDOMRealDOM3、完成計(jì)算后，將只用實(shí)際更改的內(nèi)容更新realDOM。RealDOM(updated)為什么瀏覽器無法讀取JSX?瀏覽器只能處理JavaScript對象，而不能讀取常規(guī)JavaScript對象中的JSX。所以為了使瀏覽器能夠讀取JSX,首先，需要用像Babel這樣的JSX轉(zhuǎn)換器將JSX文件轉(zhuǎn)換為JavaScript對象，然后再將其傳給瀏覽器。與ES5相比，React的ES6語法有何不同？以下語法是ES5與ES6中的區(qū)別：1、require與import//ES5varReact=require('react');//ES6importReactfrom'react';2、export與exportsmodule.exports=Component;//ES6exportdefaultComponent;3、component和function//ES5varMyComponent=React.createClass({render:function(){return<h3>HelloEdureka!</h3>;}});//ES6classMyComponentextendsReact.Component{render(){return<h3>HelloEdureka!</h3>;}}4、props//ES5varApp=React.createClass({propTypes:{name:React.PropTypes.string},render:function(){return<h3>Hello,{}!</h3>;}});//ES6classAppextendsReact.Component{render(){return<h3>Hello,{}!</h3>;}}5、statevarApp=React.createClass({getInitialState:function(){return{name:'world'};},render:function(){return<h3>Hello,{}!</h3>;}});//ES6classAppextendsReact.Component{constructor(){super();this.state={name:'world'};}render(){return<h3>Hello,{}!</h3>;}}React與Angular有何不同？主題ReactAngular1.體系結(jié)構(gòu)只有MVC中的VieW完整的MVC2.渲染可以在服務(wù)器端渲染客戶端渲染3.DOM使用VirtuaIDOM使用realDOM4.數(shù)據(jù)綁定單向數(shù)據(jù)綁定雙向數(shù)據(jù)綁定5.調(diào)試編譯時(shí)調(diào)試運(yùn)行時(shí)調(diào)試6.作者FacebookGoogle2、組件理解“在React中，一切都是組件”組件是React應(yīng)用UI的構(gòu)建塊。這些組件將整個(gè)UI分成小的獨(dú)立并可重用的部分。每個(gè)組件彼此獨(dú)立，而不會(huì)影響UI的其余部分。解釋React中render()的目的每個(gè)React組件強(qiáng)制要求必須有一個(gè)render()o它返回一個(gè)React元素，是原生DOM組件的表示。如果需要渲染多個(gè)HTML元素，則必須將它們組合在一個(gè)封閉標(biāo)記內(nèi)，例如<form>、<group>、<div>等。此函數(shù)必須保持純凈，即必須每次調(diào)用時(shí)都返回相同的結(jié)果。如何將兩個(gè)或多個(gè)組件嵌入到一個(gè)組件中可以通過以下方式將組件嵌入到一個(gè)組件中：classMyComponentextendsReact.Component{render(){return(<div><h1>Hello</h1><Header/></div>);}}classHeaderextendsReact.Component{render(){return<h1>HeaderComponent</h1>};}ReactDOM.render(<MyComponent/>,document.getElementById('content'));什么是PropsProps是React中屬性的簡寫。它們是只讀組件，必須保持純，即不可變。它們總是在整個(gè)應(yīng)用中從父組件傳遞到子組件。子組件永遠(yuǎn)不能將prop送回父組件。這有助于維護(hù)單向數(shù)據(jù)流，通常用于呈現(xiàn)動(dòng)態(tài)生成的數(shù)據(jù)。React中的狀態(tài)是什么？它是如何使用的？狀態(tài)是React組件的核心，是數(shù)據(jù)的來源，必須盡可能簡單。基本上狀態(tài)是確定組件呈現(xiàn)和行為的對象。與props不同，它們是可變的，并創(chuàng)建動(dòng)態(tài)和交互式組件?？梢酝ㄟ^this.state()訪問它們。16.區(qū)分狀態(tài)和props條件 StateProps從父組件中接收初始值是是父組件可以改變值 否 是在組件中設(shè)置默認(rèn)值 是 是在組件的內(nèi)部變化 是 否設(shè)置子組件的初始值 是 是在子組件的內(nèi)部更改 否 是2.7如何更新組件的狀態(tài)可以用this.setState()更新組件的狀態(tài)。classMyComponentextendsReact.Component{constructor(){super();this.state={name:'Maxx',id:'101'}}render(){setTimeout(()=>{this.setState({name:'Jaeha',id:'222'})},2000)return(<div><h1>Hello{}</h1><h2>YourIdis{this.state.id}</h2></div>);}}ReactDOM.render(<MyComponent/>,document.getElementById('content'));React中的箭頭函數(shù)是什么？如何使用？箭頭函數(shù)(=>)是用于編寫函數(shù)表達(dá)式的簡短語法。這些函數(shù)允許正確綁定組件的上下文，因?yàn)樵贓S6中默認(rèn)下不能使用自動(dòng)綁定。使用高階函數(shù)時(shí)，箭頭函數(shù)非常有用。//Generalwayrender(){return(<MyInputonChange={this.handleChange.bind(this)}/>);}//WithArrowFunctionrender(){return(<MyInputonChange={(e)=>this.handleOnChange(e)}/>);}區(qū)分有狀態(tài)和無狀態(tài)組件有狀態(tài)組件 無狀態(tài)組件在內(nèi)存中存儲(chǔ)有關(guān)組件狀態(tài)變化的信息1.計(jì)算組件的內(nèi)部的狀態(tài)有權(quán)改變狀態(tài) 2.無權(quán)改變狀態(tài)包含過去、現(xiàn)在和未來可能的狀態(tài)變化情3.不包含過去，現(xiàn)在和未來可能況 發(fā)生的狀態(tài)變化情況接受無狀態(tài)組件狀態(tài)變化要求的通知，然4.從有狀態(tài)組件接收props并將后將props發(fā)送給他們。 其視為回調(diào)函數(shù)。React組件生命周期的階段React組件的生命周期有三個(gè)不同的階段：初始渲染階段：這是組件即將開始其生命之旅并進(jìn)入DOM的階段。更新階段：一旦組件被添加到DOM,它只有在prop或狀態(tài)發(fā)生變化時(shí)才可能更新和重新渲染。這些只發(fā)生在這個(gè)階段。卸載階段：這是組件生命周期的最后階段，組件被銷毀并從DOM中刪除。一些最重要的生命周期方法是：*componentWillMount*****()-在渲染之前執(zhí)行，在客戶端和服務(wù)器端都會(huì)執(zhí)行。*componentDidMount*****()-僅在第一次渲染后在客戶端執(zhí)行。*componentWillReceiveProps*****()-當(dāng)從父類接收到props并且在調(diào)用另一個(gè)渲染器之前調(diào)用。ShouldComponentUpdate*****()-根據(jù)特定條件返回true或false。如果你希望更新組件，請返回rue*否則返回false。默認(rèn)情況下，它返回false。*componentWillUpdate*****()-在DOM中進(jìn)行渲染之前調(diào)用。*componentDidUpdate*****()-在渲染發(fā)生后立即調(diào)用。*componentWillUnmount*****()-從DOM卸載組件后調(diào)用。用于清理內(nèi)存空間。2.12React中的事件在React中，事件是對鼠標(biāo)懸停、鼠標(biāo)單擊、按鍵等特定操作的觸發(fā)反應(yīng)。處理這些事件類似于處理DOM元素中的事件。但是有一些語法差異，如：用駝峰命名法對事件命名而不是僅使用小寫字母。事件作為函數(shù)而不是字符串傳遞。事件參數(shù)重包含一組特定于事件的屬性。每個(gè)事件類型都包含自己的屬性和行為，只能通過其事件處理程序訪問。如何在React中創(chuàng)建一個(gè)事classDisplayextendsReact.Component({show(evt){//code},render(){//RenderthedivwithanonClickprop(valueisafunction)return(<divonClick={this.show}>ClickMe!</div>);}});合成事件是圍繞瀏覽器原生事件充當(dāng)跨瀏覽器包裝器的對象。它們將不同瀏覽器的行為合并為一個(gè)API。這樣做是為了確保事件在不同瀏覽器中顯示一致的屬性。React中refs的了解Refs是React中引用的簡寫。它是一個(gè)有助于存儲(chǔ)對特定的React元素或組件的引用的屬性，它將由組件渲染配置函數(shù)返回。用于對render()返回的特定元素或組件的引用。當(dāng)需要進(jìn)行DOM測量或向組件添加方法時(shí)，它們會(huì)派上用場。classReferenceDemoextendsReact.Component{display(){constname=this.inputDemo.value;document.getElementById('disp').innerHTML=name;}render(){return(<div>Name:<input ref={input=>this.inputDemo=input}/></div>);}}列出一些應(yīng)該使用Refs的情況以下是應(yīng)該使用refs的情況：1、需要管理焦點(diǎn)、選擇文本或媒體播放時(shí)2、觸發(fā)式動(dòng)畫3、與第三方DOM庫集成如何模塊化React中的代碼可以使用export和import屬性來模塊化代碼。它們有助于在不同的文件中單獨(dú)編寫組件。//ChildComponent.jsxexportdefaultclassChildComponentextendsReact.Component{render(){return(<div><h1>Thisisachildcomponent</h1></div>);}}//ParentComponent.jsximportChildComponentfrom'./childcomponent.js';classParentComponentextendsReact.Component{render(){return(<div><App/></div>);}}如何在React中創(chuàng)建表單React表單類似于HTML表單。但是在React中，狀態(tài)包含在組件的state屬性中，并且只能通過setState()更新。因此元素不能直接更新它們的狀態(tài)，它們的提交是由JavaScript函數(shù)處理的。此函數(shù)可以完全訪問用戶輸入到表單的數(shù)據(jù)。handleSubmit(event){alert('Anamewassubmitted:'+this.state.value);event.preventDefault();}render(){return(<formonSubmit={this.handleSubmit}><label>Name:onChange={this.handleSubmit}/></label></form>);}你對受控組件和非受控組件了解多少受控組件非受控組件1.沒有維持自己的狀態(tài)2.數(shù)據(jù)由父組件控制.保持著自己的狀態(tài).數(shù)據(jù)由DOM控制通過props獲取當(dāng)前值，然后通過回調(diào)通知更改3.Refs用于獲取其當(dāng)前值什么是高階組件（HOC）高階組件是重用組件邏輯的高級(jí)方法，是一種源于React的組件模式。HOC是自定義組件，在它之內(nèi)包含另一個(gè)組件。它們可以接受子組件提供的任何動(dòng)態(tài)，但不會(huì)修改或復(fù)制其輸入組件中的任何行為。你可以認(rèn)為HOC是“純（PUre）”組件。HOC能做什么HOC可用于許多任務(wù)，例如：1、代碼重用，邏輯和引導(dǎo)抽象2、渲染劫持3、狀態(tài)抽象和控制4、Props控制什么是純組件純Sure）組件是可以編寫的最簡單、最快的組件。它們可以替換任何只有render（）的組件。這些組件增強(qiáng)了代碼的簡單性和應(yīng)用的性能。React中key的重要性是什么key用于識(shí)別唯一的VirtUalDOM元素及其驅(qū)動(dòng)UI的相應(yīng)數(shù)據(jù)。它們通過回收DOM中當(dāng)前所有的元素來幫助React優(yōu)化渲染。這些key必須是唯一的數(shù)字或字符串，React只是重新排序元素而不是重新渲染它們。這可以提高應(yīng)用程序的性能。3、ReactReduxMVC框架的主要問題是什么以下是MVC框架的一些主要問題：1、對DOM操作的代價(jià)非常高2、程序運(yùn)行緩慢且效率低下3、內(nèi)存浪費(fèi)嚴(yán)重4、由于循環(huán)依賴性，組件模型需要圍繞models和views進(jìn)行創(chuàng)建解釋一下FluxFlux是一種強(qiáng)制單向數(shù)據(jù)流的架構(gòu)模式。它控制派生數(shù)據(jù)，并使用具有所有數(shù)據(jù)權(quán)限的中心store實(shí)現(xiàn)多個(gè)組件之間的通信。整個(gè)應(yīng)用中的數(shù)據(jù)更新必須只能在此處進(jìn)行。Flux為應(yīng)用提供穩(wěn)定性并減少運(yùn)行時(shí)的錯(cuò)誤。什么是ReduXRedux是當(dāng)今最熱門的前端開發(fā)庫之一。它是JavaScript程序的可預(yù)測狀態(tài)容器，用于整個(gè)應(yīng)用的狀態(tài)管理。使用Redux開發(fā)的應(yīng)用易于測試，可以在不同環(huán)境中運(yùn)行，并顯示一致的行為。Redux遵循的三個(gè)原則單一事實(shí)來源：整個(gè)應(yīng)用的狀態(tài)存儲(chǔ)在單個(gè)store中的對象/狀態(tài)樹里。單一狀態(tài)樹可以更容易地跟蹤隨時(shí)間的變化，并調(diào)試或檢查應(yīng)用程序。狀態(tài)是只讀的：改變狀態(tài)的唯一方法是去觸發(fā)一個(gè)動(dòng)作。動(dòng)作是描述變化的普通JS對象。就像state是數(shù)據(jù)的最小表示一樣，該操作是對數(shù)據(jù)更改的最小表示。使用純函數(shù)進(jìn)行更改：為了指定狀態(tài)樹如何通過操作進(jìn)行轉(zhuǎn)換，你需要純函數(shù)。純函數(shù)是那些返回值僅取決于其參數(shù)值的函數(shù)。你對“單一事實(shí)來源”有什么理解Redux使用“Store”將程序的整個(gè)狀態(tài)存儲(chǔ)在同一個(gè)地方。因此所有組件的狀態(tài)都存儲(chǔ)在Store中，并且它們從Store本身接收更新。單一狀態(tài)樹可以更容易地跟蹤隨時(shí)間的變化，并調(diào)試或檢查程序。列出Redux的組件Redux由以下組件組成：Action-這是一個(gè)用來描述發(fā)生了什么事情的對象。Reducer-這是一個(gè)確定狀態(tài)將如何變化的地方。Store-整個(gè)程序的狀態(tài)/對象樹保存在Store中。View-只顯示Store提供的數(shù)據(jù)。數(shù)據(jù)如何通過Redux流動(dòng)ContainerIDumbCClTIPOneM)Dat.aFlowinRedux如何在Redux中定義ActionReact中的Action必須具有type屬性，該屬性指示正在執(zhí)行的ACTION的類型。必須將它們定義為字符串常量，并且還可以向其添加更多的屬性。在RedUX中，action被名為ActionCreators的函數(shù)所創(chuàng)建。以下是Action和ActionCreator的示例：functionaddTodo(text){return{type:ADD_TODO,text}}解釋Reducer的作用。RedUcers是純函數(shù)，它規(guī)定應(yīng)用程序的狀態(tài)怎樣因響應(yīng)ACTION而改變。RedUcers通過接受先前的狀態(tài)和action來工作，然后它返回一個(gè)新的狀態(tài)。它根據(jù)操作的類型確定需要執(zhí)行哪種更新，然后返回新的值。如果不需要完成任務(wù)，它會(huì)返回原來的狀態(tài)。Store在Redux中的意義是什么Store是一個(gè)JavaScript對象，它可以保存程序的狀態(tài)，并提供一些方法來訪問狀態(tài)、調(diào)度操作和注冊偵聽器。應(yīng)用程序的整個(gè)狀態(tài)/對象樹保存在單一存儲(chǔ)中。因此，Redux非常簡單且是可預(yù)測的。我們可以將中間件傳遞到store來處理數(shù)據(jù)，并記錄改變存儲(chǔ)狀態(tài)的各種操作。所有操作都通過redUcer返回一個(gè)新狀態(tài)。ReduX與FluX有何不同F(xiàn)luxStore包含狀態(tài)和更改邏輯 1.有多個(gè)Store 2.所有Store都互不影響且是平級(jí)的3.有單一調(diào)度器 4.React組件訂閱store 5.狀態(tài)是可變的 6.ReduXStore和更改邏輯是分開的

只有一個(gè)Store帶有分層reducer的單一Store

沒有調(diào)度器的概念

容器組件是有聯(lián)系的

狀態(tài)是不可改變的ReduX有哪些優(yōu)點(diǎn)Redux的優(yōu)點(diǎn)如下：結(jié)果的可預(yù)測性-由于總是存在一個(gè)真實(shí)來源，即store，因此不存在如何將當(dāng)前狀態(tài)與動(dòng)作和應(yīng)用的其他部分同步的問題?？删S護(hù)性-代碼變得更容易維護(hù)，具有可預(yù)測的結(jié)果和嚴(yán)格的結(jié)構(gòu)。服務(wù)器端渲染-你只需將服務(wù)器上創(chuàng)建的store傳到客戶端即可。這對初始渲染非常有用，并且可以優(yōu)化應(yīng)用性能，從而提供更好的用戶體驗(yàn)。開發(fā)人員工具-從操作到狀態(tài)更改，開發(fā)人員可以實(shí)時(shí)跟蹤應(yīng)用中發(fā)生的所有事情。社區(qū)和生態(tài)系統(tǒng)-ReduX背后有一個(gè)巨大的社區(qū)，這使得它更加迷人。一個(gè)由才華橫溢的人組成的大型社區(qū)為庫的改進(jìn)做出了貢獻(xiàn)，并開發(fā)了各種應(yīng)用。易于測試-ReduX的代碼主要是小巧、純粹和獨(dú)立的功能。這使代碼可測試且獨(dú)立。組織-ReduX準(zhǔn)確地說明了代碼的組織方式，這使得代碼在團(tuán)隊(duì)使用時(shí)更加一致和簡單。4、React路由什么是React路由React路由是一個(gè)構(gòu)建在React