• <object id="wee46"></object>
  • <center id="wee46"><tt id="wee46"></tt></center><kbd id="wee46"></kbd>
  • <sup id="wee46"></sup>
  • 廈門IT培訓
    美國上市IT培訓機構

    13429669395

    2020年Web前端面試問題總結之React問題

    • 時間:2020-11-04 14:02
    • 發布:廈門達內IT培訓
    • 來源:企業面試題

    今天小編要跟大家分享的文章是關于2020年Web前端面試問題總結之React問題。準備參加Web前端面試的小伙伴們來和小編一起看一看吧,希望本篇文章能夠對正在從事Web前端工作的小伙伴們有所幫助。

    2020年Web前端面試問題總結

    React問題

    1.react和vue的區別

    => 相同點:

    1.數據驅動頁面,提供響應式的試圖組件

    2.都有virtual DOM,組件化的開發,通過props參數進行父子之間組件傳遞數據,都實現了WebComponents規范

    3.數據流動單向,都支持服務器的渲染SSR

    4.都有支持native的方法,react有React native, vue有wexx

    => 不同點:

    1.數據綁定:Vue實現了雙向的數據綁定,react數據流動是單向的

    2.數據渲染:大規模的數據渲染,react更快

    3.使用場景:React配合Redux架構適合大規模多人協作復雜項目,Vue適合小快的項目

    4.開發風格:react推薦做法jsx + inline style把html和css都寫在js了

    vue是采用Webpack + vue-loader單文件組件格式,html, js, css同一個文件

    2.redux中的reducer(純函數)

    Redux數據流里,reduces其實是根據之前的狀態(previous state)和現有的action(current action)

    更新state(這個state可以理解為上下累加器的結果)

    每次redux reducer被執行時,state和action被傳入,這個state根據action進行累加或者是'自身消減'(reduce),

    進而返回最新的state,這也就是典型reduce函數的用法:state -> action -> state

    3.react的refs

    refs就想一個逃生窗,允許我們之間訪問dom元素或者組件實例,可以向組件添加一個ref屬性的值是一個回調函數,

    它將接受地城dom元素或組件的已掛在實例,作為第一個參數

    4.react中的keys

    幫組我們跟蹤哪些項目已更改、添加、從列表中刪除,key是獨一無二的,可以讓我們高效的去定位元素,并且操作它

    5.React的生命周期

    三個狀態:Mounting(已插入真實的DOM)

    Updating(正在被重新渲染)

    Unmounting(已移除真實的DOM)

    componentDIdMount 在第一次渲染后調用,只在客服端。之后組件已經生成對應的DOM結構,

    componentDidUpdate 在組件完成更新后立即調用,在出初始化是不會調用

    6.React子組件向父組件傳值

    父組件通過props 給子組件傳遞數據,子組件則是通過調用父組件傳給它的函數給父組件傳遞數據。

    7.為什么虛擬DOM會提高性能 www.zhihu.com/question/29…

    虛擬DOM相當于在js和真實dom中間加了一個緩存,利用dom diff算法避免了沒有必要的doom操作,從而提高性能

    具體實現步驟:

    ·用JavaScript對象結構表示DOM樹的結構;然后用這個樹構建一個真正的DOM樹,插到文檔中

    ·當狀態變更的時候,重新構造一棵樹的對象樹,然后用新的樹和舊的樹進行對比,記錄兩棵樹差異

    ·把2所記錄的差異應用到步驟1所構建的真正的DOM樹上,試圖就更新了。

    8.diff算法

    1.把樹形結構按照層級分解,只比較同級元素

    2.給列表結構的每個單元添加key屬性,方便比較。在實際代碼中,會對新舊兩棵樹進行一個深度優先的遍歷,這樣每個節點都會有一個標記

    3.在深度優先遍歷的時候,每遍歷到一個節點就把該節點和新的樹進行對比。如果有差異的話就記錄到一個對象里面

    Vritual DOM 算法主要實現上面步驟的三個函數:element, diff, patch。然后就可以實際的進行使用

    react只會匹配相同的class的component(這里的class指的是組件的名字)

    合并操作,條用component的setState方法的時候,React將其標記為dirty.到每一個時間循環借宿,React檢查所有標記dirty的component重新繪制

    4.選擇性子樹渲染。可以重寫shouldComponentUpdate提高diff的性能

    9.簡述下flux的思想

    flux的最大特點,就是數據的‘單向流動’ 1.用戶訪問View 2.View發出用戶的Action 3.Dispatcher收到Action,要求state進行相應的更新 4.store更新后,發出一個‘change’事件后,更新頁面

    10.reac性能優化是哪個周期函

    shouldComponentUpdate 這個方法用來判斷是否需要調用render方法重新描繪dom.因為dom的描繪非常消耗性能,如果我們在shouldComponentUpdate方法中能夠寫出更優化的dom diff算法,可以極大的提高性能

    11.react怎么劃分業務組件和技術組件

    根據組件的職責通常把組件分為UI組件和容器組件 UI組件負責UI的呈現,容器組件負責管理數據和邏輯兩者通過React-redux提供connect方法聯系起來

    12.setState

    setState通過一個隊列機制實現state更新,當執行setState時,會將需要更新的state很后放入狀態隊列

    而不會立即更新this.state,隊列機制可以高效地批量更新state。如果不通過setState而直接修改this.state的值

    那么該state將不會被放入狀態隊列中。當下次調用setState并對狀態隊列進行合并時,就會忽略之前修改的state,造成不可預知的錯誤

    同時,也利用了隊列機制實現了setState的異步更新,避免了頻繁的重復更新state

    同步更新state:

    setState 函數并不會阻塞等待狀態更新完畢,因此 setNetworkActivityIndicatorVisible 有可能先于數據渲染完畢就執行。

    第二個參數是一個回調函數,在setState的異步操作結束并且組件已經重新渲染的時候執行

    也就是說,我們可以通過這個回調來拿到更新的state的值,實現代碼的同步

    例子:componentDidMount() {

    fetch('https://test.com')

    .then((res) => res.json())

    .then(

    (data) => {

    this.setState({ data:data });

    StatusBar.setNetworkActivityIndicatorVisible(false);

    }

    以上就是小編今天為大家分享的關于2020年Web前端面試問題總結之React問題的文章,希望本篇文章能夠對正準備參加Web前端面試的小伙伴們有所幫助,想要了解更多Web前端知識記得關注達內Web培訓官網,最后祝愿小伙伴們工作順利,成為一名優秀的Web前端工程師

    【免責聲明:本文圖片及文字信息均由小編轉載自網絡,旨在分享提供閱讀,版權歸原作者所有,如有侵權請聯系我們進行刪除。】

    預約申請免費試聽課

    怕錢不夠?就業掙錢后再付學費!    怕學不會?從入學起,達內定制課程!     擔心就業?達內多家實踐企業供你挑選!

    上一篇:2020年Web前端筆試題匯總
    下一篇:2020年Web前端面試問題總結之VUE問題

    如何讓自己的簡歷脫穎而出

    運維的職業發展現狀及前景

    2021年Java面試題及答案匯總

    Java程序員面試如何獲得高薪

    • 關注微信公眾號

      回復關鍵字:視頻資料

      免費領取 達內課程視頻學習資料

    • 視頻學習QQ群

      添加QQ群:1143617948

      免費領取達內課程視頻學習資料

    Copyright ? 2018 Tedu.cn All Rights Reserved 京ICP備08000853號-56 京公網安備 11010802029508號 達內時代科技集團有限公司 版權所有

    選擇城市和中心
    江西省

    貴州省

    廣西省

    海南省

    深夜办公室完整版在线观看,中文文字幕在线电影,尹人在线最新香蕉视频,欧美,日韩,国产,专区