<kbd id="afajh"><form id="afajh"></form></kbd>
<strong id="afajh"><dl id="afajh"></dl></strong>
    <del id="afajh"><form id="afajh"></form></del>
        1. <th id="afajh"><progress id="afajh"></progress></th>
          <b id="afajh"><abbr id="afajh"></abbr></b>
          <th id="afajh"><progress id="afajh"></progress></th>

          【前端面試題】—30道常見(jiàn)React基礎(chǔ)面試題(附答案)

          共 12655字,需瀏覽 26分鐘

           ·

          2021-03-30 22:19

          當(dāng)今最流行的框架非 React莫屬。 React以其岀色的性能,顛覆了互聯(lián)網(wǎng)的理念,簡(jiǎn)單的開發(fā)方式受到許多開發(fā)者的青睞。
          因此,在 React中,虛擬DOM、組件的生命周期、組件的通信、組件的約束性,配合 Reflux、 Redux等框架的使用,基于 EMAScript6語(yǔ)法開發(fā),以及 Webpack編譯等都是讀者要掌握的內(nèi)容。
          當(dāng)然, React的三大特色(虛擬DOM、組件開發(fā)、多端適配)的具體實(shí)現(xiàn),開發(fā)者也要有所了解。
          1、當(dāng)調(diào)用 setState的時(shí)候,發(fā)生了什么操作?
          當(dāng)調(diào)用 setState時(shí), React做的第一件事是將傳遞給setState的對(duì)象合并到組件的當(dāng)前狀態(tài),這將啟動(dòng)一個(gè)稱為和解( reconciliation)的過(guò)程。
          和解的最終目標(biāo)是,根據(jù)這個(gè)新的狀態(tài)以最有效的方式更新DOM。
          為此, React將構(gòu)建一個(gè)新的 React虛擬DOM樹(可以將其視為頁(yè)面DOM元素的對(duì)象表示方式)。
          一旦有了這個(gè)DOM樹,為了弄清DOM是如何響應(yīng)新的狀態(tài)而改變的, React會(huì)將這個(gè)新樹與上一個(gè)虛擬DOM樹比較。
          這樣做, React會(huì)知道發(fā)生的確切變化,并且通過(guò)了解發(fā)生的變化后,在絕對(duì)必要的情況下進(jìn)行更新DOM,即可將因操作DOM而占用的空間最小化。
          2、在 React中元素( element)和組件( component)有什么區(qū)別?
          簡(jiǎn)單地說(shuō),在 React中元素(虛擬DOM)描述了你在屏幕上看到的DOM元素。
          換個(gè)說(shuō)法就是,在 React中元素是頁(yè)面中DOM元素的對(duì)象表示方式。在 React中組件是一個(gè)函數(shù)或一個(gè)類,它可以接受輸入并返回一個(gè)元素。
          注意:工作中,為了提高開發(fā)效率,通常使用JSX語(yǔ)法表示 React元素(虛擬DOM)。在編譯的時(shí)候,把它轉(zhuǎn)化成一個(gè) React. createElement調(diào)用方法。

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

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

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

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

          如果該屬性的值是一個(gè)回調(diào)函數(shù),它將接受底層的DOM元素或組件的已掛載實(shí)例作為其第一個(gè)參數(shù)。可以在組件中存儲(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.bindthis)}>展示結(jié)果</ button></div>);}}

          如果該屬性值是一個(gè)字符串, React將會(huì)在組件實(shí)例化對(duì)象的refs屬性中,存儲(chǔ)一個(gè)同名屬性,該屬性是對(duì)這個(gè)DOM元素的引用。可以通過(guò)原生的 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ú)一無(wú)二的。在 React的和解過(guò)程中,比較新的虛擬DOM樹與上一個(gè)虛擬DOM樹之間的差異,并映射到頁(yè)面中。key使 React處理列表中虛擬DOM時(shí)更加高效,因?yàn)?React可以使用虛擬DOM上的key屬性,快速了解元素是新的、需要?jiǎng)h除的,還是修改過(guò)的。如果沒(méi)有key,Rεat就不知道列表中虛擬DOM元素與頁(yè)面中的哪個(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ù)來(lái)處理。

          具體實(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īng)顟B(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ù)來(lái)處理。這種模式的好處是,我們已經(jīng)將父組件與子組件分離了,父組件管理狀態(tài)。父組件的使用者可以決定父組件以何種形式渲染子組件。

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

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

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

          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è)過(guò)程中, Loading組件都未渲染。

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

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

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

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

          如下所示, username沒(méi)有存儲(chǔ)在DOM元素內(nèi),而是存儲(chǔ)在組件的狀態(tài)中。每次要更新 username時(shí),就要調(diào)用 setState更新?tīng)顟B(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īng)顟B(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ǔ)并處理,而不是通過(guò) React組件。表單如何呈現(xiàn)由表單元素自身決定。

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

          注意:為了方便在組件中獲取表單元素,通常為元素設(shè)置ref屬性,在組件內(nèi)部通過(guò)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>{/*非約束性組件中,表單元素通過(guò) defaultvalue定義*/}< input type="text"  ref=" username"  defaultvalue="有課前端網(wǎng)"/></p><p>< button onClick={this. showResult.bind ( this ) }>查看結(jié)果</button></p></div> )  }   }
          雖然非約東性組件通常更容易實(shí)現(xiàn),可以通過(guò)refs直接獲取DOM元素,并獲取其值,但是 React建議使用約束性組件。主要原因是,約東性組件支持即時(shí)字段驗(yàn)證,允許有條件地禁用/啟用按鈕,強(qiáng)制輸入格式等。
          8、在哪個(gè)生命周期中你會(huì)發(fā)出Ajax請(qǐng)求?為什么?
          Ajax請(qǐng)求應(yīng)該寫在組件創(chuàng)建期的第五個(gè)階段,即 componentDidMount生命周期方法中。原因如下。
          在創(chuàng)建期的其他階段,組件尚未渲染完成。而在存在期的5個(gè)階段,又不能確保生命周期方法一定會(huì)執(zhí)行(如通過(guò) shouldComponentUpdate方法優(yōu)化更新等)。在銷毀期,組件即將被銷毀,請(qǐng)求數(shù)據(jù)變得無(wú)意義。因此在這些階段發(fā)岀Ajax請(qǐng)求顯然不是最好的選擇。
          在組件尚未掛載之前,Ajax請(qǐng)求將無(wú)法執(zhí)行完畢,如果此時(shí)發(fā)出請(qǐng)求,將意味著在組件掛載之前更新?tīng)顟B(tài)(如執(zhí)行 setState),這通常是不起作用的。
          在 componentDidMount方法中,執(zhí)行Ajax即可保證組件已經(jīng)掛載,并且能夠正常更新組件。
          9、shouldComponentUpdate有什么用?為什么它很重要?
          組件狀態(tài)數(shù)據(jù)或者屬性數(shù)據(jù)發(fā)生更新的時(shí)候,組件會(huì)進(jìn)入存在期,視圖會(huì)渲染更新。在生命周期方法 should ComponentUpdate中,允許選擇退出某些組件(和它們的子組件)的和解過(guò)程。
          和解的最終目標(biāo)是根據(jù)新的狀態(tài),以最有效的方式更新用戶界面。如果我們知道用戶界面的某一部分不會(huì)改變,那么沒(méi)有理由讓 React弄清楚它是否應(yīng)該更新渲染。通過(guò)在 shouldComponentUpdate方法中返回 false, React將讓當(dāng)前組件及其所有子組件保持與當(dāng)前組件狀態(tài)相同。
          10、如何用 React構(gòu)建( build)生產(chǎn)模式?

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

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

          因?yàn)椴荒鼙WC 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中的處理方式。

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

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

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

          createElement是JSX被轉(zhuǎn)載得到的,在 React中用來(lái)創(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、這段代碼有什么問(wèn)題?

          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 )

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

          16、請(qǐng)說(shuō)岀 React從 EMAScript5編程規(guī)范到 EMAScript6編程規(guī)范過(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)屬性,來(lái)定義默認(rèn)屬性。

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

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

          (4)定義屬性約束的方法不同。

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

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

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

          EMAScript5版本中,通過(guò)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版本中,無(wú)法改變作用域。

          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無(wú)法很妤地處理這個(gè)問(wèn)題。循環(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è)來(lái)開發(fā)。

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

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

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

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

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

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

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

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

          相似性如下。

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

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

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

          (4)都使用虛擬DOM。

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

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

          它們最大的區(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īng)顟B(tài)

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

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

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

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

          在 EMAScript5語(yǔ)法規(guī)范中,關(guān)于作用域的常見(jiàn)問(wèn)題如下。

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

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

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

          在 EMAScript6語(yǔ)法規(guī)范中,關(guān)于作用域的常見(jiàn)問(wèn)題如下。

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

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

          (3)父組件傳遞方法要綁定父組件作用域。

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

          24、在 Redux中使用 Action要注意哪些問(wèn)題?

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

          25、在 Reducer文件里,對(duì)于返回的結(jié)果,要注意哪些問(wèn)題?

          在 Reducer文件里,對(duì)于返回的結(jié)果,必須要使用 Object.assign ( )來(lái)復(fù)制一份新的 state,否則頁(yè)面不會(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)被占用而提示無(wú)法訪問(wèn)的問(wèn)題?

          在運(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è)備的問(wèn)題?

          在使用 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,通過(guò)散列實(shí)現(xiàn),路由要帶#。

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

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

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

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

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



          瀏覽 195
          點(diǎn)贊
          評(píng)論
          收藏
          分享

          手機(jī)掃一掃分享

          分享
          舉報(bào)
          評(píng)論
          圖片
          表情
          推薦
          點(diǎn)贊
          評(píng)論
          收藏
          分享

          手機(jī)掃一掃分享

          分享
          舉報(bào)
          <kbd id="afajh"><form id="afajh"></form></kbd>
          <strong id="afajh"><dl id="afajh"></dl></strong>
            <del id="afajh"><form id="afajh"></form></del>
                1. <th id="afajh"><progress id="afajh"></progress></th>
                  <b id="afajh"><abbr id="afajh"></abbr></b>
                  <th id="afajh"><progress id="afajh"></progress></th>
                  青青草成人免费自拍视频 | 亚洲色图一区二区 | 91北条麻妃二区 | 亚洲自拍小视频在线观看 | 婷婷五月天在线播放 |