web前端面試題[react全家桶]


1、setState 什么時候同步什么時候異步?

* setState 只在合成事件(react為了解決跨平台,兼容性問題,自己封裝了一套事件機制,代理了原生的事件,像在jsx中常見的onClick、onChange這些都是合成事件)和鈎子函數(生命周期)中是“異步”的,在原生事件和 setTimeout 中都是同步的
* setState的“異步”並不是說內部由異步代碼實現,其實本身執行的過程和代碼都是同步的,只是合成事件和鈎子函數的調用順序在更新之前,導致在合成事件和鈎子函數中沒法立馬拿到更新后的值,形式了所謂的“異步”,當然可以通過第二個參數setState(partialState, callback) 中的callback拿到更新后的結果
* setState 的批量更新優化也是建立在“異步”(合成事件、鈎子函數)之上的,在原生事件和setTimeout 中不會批量更新,在“異步”中如果對同一個值進行多次 setState , setState 的批量更新策略會對其進行覆蓋,取最后一次的執行,如果是同時 setState 多個不同的值,在更新時會對其進行合並批量更新

2、react渲染機制?

* 當頁面一打開,就會調用render構建一棵DOM樹
* 當數據發生變化( state | props )時,就會再渲染出一棵DOM樹
* 此時,進行diff運算,兩棵DOM樹進行差異化對比,找到更新的地方進行批量改動

3、diff算法?

* diff:計算一棵樹形結構轉換成另一棵樹形結構的最少操作
* 把樹形結構按照層級分解,只比較同級元素
* 給列表結構的每個單元添加唯一的 key 屬性,方便比較
* React 只會匹配相同 class 的 component(這里面的 class 指的是組件的名字)
* 合並操作,調用 component 的 setState 方法的時候, React 將其標記為 dirty.到每一個事件循環結束, React 檢查所有標記 dirty 的 component 重新繪制
* 選擇性子樹渲染。開發人員可以重寫 shouldComponentUpdate 提高 diff 的性能

4、shouldComponentUpdate是做什么的,(react性能優化是哪個周期函數?)

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

7、七、虛擬dom

* 虛擬 dom 相當於在 js 和真實 dom 中間加了一個緩存,利用 dom diff 算法避免了沒有必要的 dom 操作,從而提高性能
* Virtual DOM 工作過程有三個簡單的步驟
  1. 每當底層數據發生改變時,整個 UI 都將在 Virtual DOM 描述中重新渲
  2. 然后計算之前 DOM 表示與新表示的之間的差異
  3. 完成計算后,將只用實際更改的內容更新 real DOM

8、calc, support, media各自的含義及用法?

* @support主要是用於檢測瀏覽器是否支持CSS的某個屬性,其實就是條件判斷,如果支持某個屬性,你可以寫一套樣式,如果不支持某個屬性,你也可以提供另外一套樣式作為替補。
* calc() 函數用於動態計算長度值。 calc()函數支持 “+”, “-”, “*”, “/” 運算;
* @media 查詢,你可以針對不同的媒體類型定義不同的樣式。

9、如何中斷ajax請求?

一種是設置超時時間讓ajax自動斷開,另一種是手動停止ajax請求,其核心是調用XML對象的abort方法,ajax.abort()

10、什么是會話cookie,什么是持久cookie?

cookie是服務器返回的,指定了expire time(有效期)的是持久cookie,沒有指定的是會話cookie

11、hooks useMemo 和 useCallback的區別

*  useMemo:
*  用來緩存數據,當組件內部某一個渲染的數據,需要通過計算而來,這個計算是依賴與特定的state、props數據,我們就用useMemo來緩存這個數據,以至於我們在修改她們沒有依賴的數據源的情況下,多次調用這個計算函數,浪費計算資源。

*  useCallback
*  緩存一個函數,這個函數如果是由父組件傳遞給子組件,或者自定義hooks里面的函數【通常自定義hooks里面的函數,不會依賴於引用它的組件里面的數據】,這時候我們可以考慮緩存這個函數,好處:

   1. 不用每次重新聲明新的函數,避免釋放內存、分配內存的計算資源浪費
   2. 子組件不會因為這個函數的變動重新渲染。【和React.memo搭配使用】

12、hooks的規則?

只能在頂層調用 Hook,不要在循環、條件或嵌套函數中調用 Hook。
僅從 React 函數式組件中調用 Hook。不要從常規 JavaScript 函數調用 Hook。(還有另一個有效的地方來調用 Hook,即你的自定義 Hook。)

13、react16.8后的新特性?

14、實戰/坑)antd中,upLoad上傳圖片組件有批量上傳功能,接口是挨個調取,請問如何在不知道用戶上傳了幾張圖片的情況下獲取全部上傳完畢的狀態?

promise.all
配合上傳時onChange的回調中fileList的結果

15、祖孫傳參的方法?

context
redux
localstorage
(根據前提場景回答)

16、什么是無狀態組件,與有狀態組件的區別

無狀態組件主要用來定義模板,接收來自父組件props傳遞過來的數據,使用{props.xxx}的表達式把props塞到模板里面
有狀態組件主要用來定義交互邏輯和業務數據,使用{this.state.xxx}的表達式把業務數據掛載到容器組件的實例上(有狀態組件也可以叫做容器組件,無狀態組件也可以叫做展示組件),然后傳遞props到展示組件,展示組件接收到props,把props塞到模板里面

17、redux本身有什么不足?

* 向事件池中追加方法時,沒有做去重處理
* 把綁定的方從在事件池中移除掉時,用的是arr.splice(index,1),這樣可能會引起數組塌陷
* reducer中state,每次返回都需要深克隆,可以在redux中獲取狀態信息時,深克隆,這樣就不用在reducer里深克隆了

18、從 URL 在瀏覽器被被輸入到頁面展現的過程中發生了什么?

DNS 解析:將域名解析成 IP 地址
TCP 連接:TCP 三次握手
發送 HTTP 請求
服務器處理請求並返回 HTTP 報文
瀏覽器解析渲染頁面
斷開連接:TCP 四次揮手

19、JS 中構造函數和普通函數的區別

20、event loop 事件循環機制

* 先執行同步任務
* 微任務調用棧 resolve reject await
* 宏任務(macrotask): setTimeout setInterval I/O(異步操作) DOM渲染

21、鏈表(計算機基礎)

* 單向鏈表: 單向鏈表包含兩個域 一個是信息域 一個是指針域
* 雙向鏈表: 每個節點有2個指針域 一個是指向前一個節點 另一個則指向后一個節點
* 循環鏈表: 循環鏈表就是首節點和末節點被連接在一起
* 循環鏈表中第一個節點之前就是最后一個節點
數組和鏈表的區別
* 鏈表是鏈式的存儲結構 數組是順序的存儲結構
* 鏈表通過指針來連接元素 數組則是把所有元素按次序依次存儲
* 鏈表的插入刪除元素相對數組較為簡單 但是尋找某個元素較為困難
* 數組尋找某個元素較為簡單 但插入與刪除比較復雜
(簡單回答,最好再復習下堆棧,最近發現好多前端答不出這個)

22、一道關於箭頭函數的筆試題

關於箭頭函數,下面說法錯誤的有哪些?(多選) ( )
A. 箭頭函數沒有自己的 this,而是會繼承上層作用域的 this,就像其他普通的變量一樣
B. 箭頭函數還可以通過 .call()、.apply()、.bind() 方法來重新綁定它的 this 值
C. 箭頭函數可以像普通函數一樣使用 arguments 對象
D. 過度追求箭頭函數的“單行代碼”寫法可能會降低代碼可讀性
E. 箭頭函數雖然表面上看是匿名的,但它可以根據前面的變量名和屬性名自動推斷出同名的 name 屬性
F. 箭頭函數不可以被 new,也不會像普通函數一樣自動擁有 prototype 屬性

這道題都會選C然后帶幾個其他選項,正確答案是BC,經常會有人把ADF也選上,D不說了就當沒有讀通題目,剩余的就直接看ES6官網箭頭函數的使用注意點,熟記


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM