摘要：組件化編碼的一切都是基于組件的。屬性返回目標(biāo)節(jié)點(diǎn)的前一個(gè)兄弟節(jié)點(diǎn)。如果目標(biāo)節(jié)點(diǎn)前面沒有同屬于一個(gè)父節(jié)點(diǎn)的節(jié)點(diǎn)，將返回屬性是一個(gè)只讀屬性。而當(dāng)變量離開環(huán)境時(shí)，則將其標(biāo)記為離開環(huán)境。

第一次寫面試經(jīng)歷，雖然之前有過一些電話面試經(jīng)歷，但相對(duì)而言感覺此次的經(jīng)歷對(duì)自己收獲還是比較大，這里留下面經(jīng)當(dāng)作日記吧！（面試時(shí)間：2018-6-12 下午2:10；時(shí)長：50min；公司：*）

（一）、React特點(diǎn)

高效、虛擬DOM，最大限度地減少與DOM的交互：

瀏覽器在渲染網(wǎng)頁時(shí)，會(huì)先將HTML文檔解析并構(gòu)建DOM樹，然后與CSSOM樹生成RenderObject樹，最后渲染成頁面。瀏覽器中渲染引擎和JavaScript引擎是分離的，渲染引擎會(huì)提供一些接口給JavaScript調(diào)用，它們二者通信是通過橋接的，性能其實(shí)是很差的。

以往，為了優(yōu)化性能通常采用的辦法是減少DOM操作次數(shù)。而React提出了一個(gè)新的思路就是虛擬DOM：組件的HTML結(jié)構(gòu)不再是直接生成DOM，而是映射生成虛擬的JavaScript DOM結(jié)構(gòu)，React通過diff算法將最小變更寫入DOM中，從而減少DOM的實(shí)際次數(shù)，提升性能。

服務(wù)器端渲染

React提供開箱即用的服務(wù)器端渲染，服務(wù)器端渲染解除了服務(wù)器端對(duì)瀏覽器的依賴，它會(huì)將“可視”部分先渲染，然后再交給客戶端做渲染。

組件化編碼

React 的一切都是基于組件的?？梢酝ㄟ^定義一個(gè)組件，然后在其他的組件中，可以像HTML標(biāo)簽一樣引用它。說得通俗點(diǎn)，組件其實(shí)就是自定義的標(biāo)簽；通過 React 構(gòu)建組件，使得代碼更加容易得到復(fù)用，能夠很好的應(yīng)用在大項(xiàng)目的開發(fā)中。

聲明式設(shè)計(jì)

React采用聲明范式，函數(shù)式編程，可以輕松描述應(yīng)用。

靈活

React可以與已知的庫或框架很好地配合。

JSX

JSX 是 JavaScript 語法的擴(kuò)展。React開發(fā)不一定使用 JSX ，但我們建議使用它。

單向響應(yīng)的數(shù)據(jù)流

React 實(shí)現(xiàn)了單向響應(yīng)的數(shù)據(jù)流，數(shù)據(jù)是自頂向下單向流動(dòng)的，即從父組件到子組件，這種原則讓組件之間的關(guān)系變得簡單可預(yù)測；props作為外部接口、state作為內(nèi)部狀態(tài)。

（二）、為什么選擇React

相比其他如Vue、angular的雙向數(shù)據(jù)綁定的框架，個(gè)人比較喜歡這種比較流程化的單向數(shù)據(jù)流形式，因?yàn)榭梢愿玫念A(yù)測數(shù)據(jù)的變化；

當(dāng)然最主要的原因是學(xué)校圖書館，對(duì)于React的書籍資料更豐富（。。。。道出了真相、尷尬）

因?yàn)楫?dāng)時(shí)沒有怎么看這個(gè)算法，所以只是憑借之前的知識(shí)點(diǎn)簡單的說了下；

這里在具體的回顧下：

React的Diff算法巧妙的使用了試探法將復(fù)雜度為O（n^3）的數(shù)差異比較算法轉(zhuǎn)換成O(n)復(fù)雜度的問題；

該算法基于兩個(gè)假定：

相同類的兩個(gè)組件將會(huì)生成相似的樹形結(jié)構(gòu)，而不同類的兩個(gè)組件將會(huì)生成不同的樹形結(jié)構(gòu)；

可以為元素提供唯一的標(biāo)識(shí)，確保該元素在不同的渲染過程中保持不變。

具體實(shí)現(xiàn)細(xì)節(jié)：

（樹形結(jié)構(gòu)的比較）即首先檢查兩個(gè)節(jié)點(diǎn)的差異

節(jié)點(diǎn)類型不同時(shí)

React會(huì)把它們當(dāng)做兩個(gè)不同的字樹，導(dǎo)致直接移除之前的那顆子樹，然后創(chuàng)建并插入之前的那顆子樹

優(yōu)點(diǎn)：巧妙的避開了對(duì)樹形結(jié)構(gòu)的大量差異檢測，然后關(guān)注與相同的部分，實(shí)現(xiàn)了快速而又精確的差異檢測邏輯；

缺陷：如果兩個(gè)子樹具有相似的結(jié)構(gòu)，即頂節(jié)點(diǎn)不同，子節(jié)點(diǎn)結(jié)構(gòu)相同，這時(shí)本來只需要對(duì)不同的頂節(jié)點(diǎn)進(jìn)行刪除插入操作，但是React會(huì)將整個(gè)子樹都刪除然后從新構(gòu)建插入

（1）、裝載過程

當(dāng)組件第一次被渲染時(shí)，依次調(diào)用的函數(shù)：

construction

getInitalState

getDefaultProps

componentWillMount

render

componentDidMount

（2）、更新過程

更新過程會(huì)依次調(diào)用以下生命周期函數(shù)，其中render函數(shù)和“裝載”過程一樣：
?- componentWillReceiveProps
?- shouldComponentUpdate

componentWillUpdate

render

componentDidUpdate

并不是所有的更新過程都會(huì)執(zhí)行全部函數(shù)。

（3）、React組件的卸載過程只涉及一個(gè)函數(shù)componentWillUnmount

具體詳情介紹可以看React生命周期詳解

在生命周期中render函數(shù)決定了該渲染什么，而shouldComponentUpdate決定了一個(gè)組件什么時(shí)候不需要渲染；

shouldComponentUpdate(nextProps,nextState)接收兩個(gè)參數(shù)，即此次渲染的props和state對(duì)象，返回一個(gè)布爾，默認(rèn)返回true，表示進(jìn)行更新；返回false表示此次更新不需要到此終止；

通過比較此次props、state和上次是否相同決定是否需要進(jìn)行更新可以很好的避免不必要的更新操作，提升性能；

因?yàn)閜rops和state的是對(duì)象，平時(shí)使用的一般都淺層比較，如果需要對(duì)兩個(gè)對(duì)象進(jìn)行深度全面比較，我考慮的是使用JSON.stringify()

要獲取DOM節(jié)點(diǎn)的話，需要在componentDidMount或者componentDidUpdata中獲取，因?yàn)橹挥性谶@個(gè)階段真實(shí)DOM節(jié)點(diǎn)才構(gòu)建完成了

獲取DOM節(jié)點(diǎn)可以使用ref屬性

可能只是作為一個(gè)過渡，比較簡單、直接回答了使用DOM節(jié)點(diǎn)的parentNode屬性獲?。徊贿^這里還是補(bǔ)充一點(diǎn)。

nextSibling 屬性 ：

返回目標(biāo)節(jié)點(diǎn)的下一個(gè)兄弟節(jié)點(diǎn)。

如果目標(biāo)節(jié)點(diǎn)后面沒有同屬于一個(gè)父節(jié)點(diǎn)的節(jié)點(diǎn)，nextSibling 將返回null ；

nextSibling 屬性是一個(gè)只讀屬性。

previousSibling屬性 ：

返回目標(biāo)節(jié)點(diǎn)的前一個(gè)兄弟節(jié)點(diǎn)。

如果目標(biāo)節(jié)點(diǎn)前面沒有同屬于一個(gè)父節(jié)點(diǎn)的節(jié)點(diǎn)，previousSibling 將返回null ；

previousSibling 屬性是一個(gè)只讀屬性。

parentNode 屬性 ：

注：parentNode屬性返回的節(jié)點(diǎn)永遠(yuǎn)是一個(gè)元素節(jié)點(diǎn)，因?yàn)橹挥性毓?jié)點(diǎn)才有可能有子節(jié)點(diǎn)。

當(dāng)然有個(gè)例外：

document節(jié)點(diǎn)，他沒有父節(jié)點(diǎn)。所以document節(jié)點(diǎn)的parentNode屬性將返回null；

parentNode 屬性是一個(gè)只讀屬性。

當(dāng)時(shí)直接說的是：可以使用document.getElementsByClassName()、document.querySelector()、document.querySelectorAll()；

然后又引出了區(qū)別問題~

回答：

getElementsByClassName()、和querySelectorAll()返回的是一個(gè)DOM列表，雖然可以用循環(huán)遍歷，但是它們只是偽數(shù)組，不能使用數(shù)組的方法；

getElementsByClassName()只能通過類名獲取，而和querySelectorAll、querySelector是使用CSS選擇器獲取的，

當(dāng)時(shí)只說了querySelector是返回一個(gè)DOM節(jié)點(diǎn)，有點(diǎn)錯(cuò)誤吧；querySelector是返回文檔中匹配指定的CSS選擇器的第一元素

回答：

obj instanceof Array如果返回true或者false；

Object.prototype.toString.call(obj) === "[object Array]"；

還有一個(gè)當(dāng)時(shí)沒有說道：

obj.constructor == Array為true或false

當(dāng)時(shí)還補(bǔ)充了Array.isArray(obj),用于確定傳遞的值是否是一個(gè) Array,如果對(duì)象是 Array，則為true; 否則為false。

回答：

ES6主要增加了一些新的特效，如:

const定義常量，但是const定義的常量只是值不可變，即基本數(shù)據(jù)類型不可變，對(duì)于引用類型，因?yàn)樗⒌氖且?，所以即使使用const定義的對(duì)象，其屬性還是可變的；

let定義變量，相對(duì)于var，它修復(fù)了一些問題，比如變量提升、重復(fù)定義等問題，并且const和let的定義具有塊級(jí)作用域；

對(duì)于字符串?dāng)U展有：字符串模板、還有一些方法（忘了，趕緊跳過）；

還有就是：剩余參數(shù)、函數(shù)默認(rèn)參數(shù)、模塊化、Promise、裝飾器、Symbol、set和map等；

剛學(xué)習(xí)不久，大概就說了這些；最近也在更新ES6的筆記深入理解ES6

對(duì)ES6并沒有深入的問，直接從let和const的塊級(jí)作用域引到了閉包

回答:

閉包使用的作用的話主要是為了獲取函數(shù)內(nèi)部的變量和將變量保存下來，使其不被垃圾回收器回收，供給之后使用；

使用的話一般是為了封裝作用域，即代替全局變量，避免全局變量污染；

因?yàn)槭褂瞄]包，會(huì)將變量保存不被回收器回收，所以應(yīng)該盡量避免使用，防止造成內(nèi)存泄漏

答的不是太全面，這里補(bǔ)充：

閉包的應(yīng)用場景

使用閉包代替全局變量

函數(shù)外或在其他函數(shù)中訪問某一函數(shù)內(nèi)部的參數(shù)

在函數(shù)執(zhí)行之前為要執(zhí)行的函數(shù)提供具體參數(shù)

在函數(shù)執(zhí)行之前為函數(shù)提供只有在函數(shù)執(zhí)行或引用時(shí)才能知道的具體參數(shù)

為節(jié)點(diǎn)循環(huán)綁定click事件，在事件函數(shù)中使用當(dāng)次循環(huán)的值或節(jié)點(diǎn)，而不是最后一次循環(huán)的值或節(jié)點(diǎn)

暫停執(zhí)行

包裝相關(guān)功能

感覺有點(diǎn)給自己挖坑了，（回收機(jī)制、內(nèi)存泄漏不是太懂啊~~）

回答：

一個(gè)變量的可回收性，一般需要根據(jù)瀏覽器js引擎的回收器機(jī)制判斷，大概有兩種方式（當(dāng)時(shí)只說到了一種）；

即引用計(jì)數(shù):引用計(jì)數(shù)的含義是跟蹤記錄每個(gè)變量被引用的次數(shù)，當(dāng)期的引用次數(shù)為0時(shí)表回收

一般手動(dòng)清除是將它賦值為null

科普：

引用計(jì)數(shù)：

當(dāng)聲明一個(gè)變量并將一個(gè)引用類型值賦給該變量時(shí)，則這個(gè)值的引用次數(shù)便是1，如果同一個(gè)值又被賦給另一個(gè)變量，則該值的引用次數(shù)加1，相反，如果包含對(duì)這個(gè)值引用的變量又取得了另一個(gè)值，則這個(gè)值的引用次數(shù)減1。當(dāng)這個(gè)值的引用次數(shù)為0時(shí)，說明沒有辦法訪問到它了，因而可以將其占用的內(nèi)存空間回收

標(biāo)記清除：

當(dāng)變量進(jìn)入環(huán)境時(shí)，例如，在函數(shù)中聲明一個(gè)變量，就將這個(gè)變量標(biāo)記為“進(jìn)入環(huán)境”。從邏輯上講，永遠(yuǎn)不能釋放進(jìn)入環(huán)境的變量所占用的內(nèi)存，因?yàn)橹灰獔?zhí)行流進(jìn)入相應(yīng)的環(huán)境，就可能會(huì)用到它們。而當(dāng)變量離開環(huán)境時(shí)，則將其標(biāo)記為“離開環(huán)境”。

HTML5 主要增加了一些語義化標(biāo)簽和一些API、刪除了一些元素

繪畫 canvas

用于媒介回放的 video 和 audio 元素

本地離線存儲(chǔ) localStorage 長期存儲(chǔ)數(shù)據(jù)，瀏覽器關(guān)閉后數(shù)據(jù)不丟失

sessionStorage 的數(shù)據(jù)在瀏覽器關(guān)閉后自動(dòng)刪除

語意化更好的內(nèi)容元素，比如 article、footer、header、nav、section

表單控件，calendar、date、time、email、url、search

新的技術(shù)webworker, websocket, Geolocation

移除的元素：

純表現(xiàn)的元素：basefont，big，center，font, s，strike，tt，u

對(duì)可用性產(chǎn)生負(fù)面影響的元素：frame，frameset，noframes

沒有到這么詳細(xì)，以上回顧

相同點(diǎn)：都可以作為瀏覽器存儲(chǔ)，且都不能進(jìn)行跨域訪問；

不同點(diǎn)：

cookie始終會(huì)在同源 http 請(qǐng)求頭中攜帶（即使不需要），在瀏覽器和服務(wù)器間來回傳遞

sessionStorage 和 localStorage 不會(huì)自動(dòng)把數(shù)據(jù)發(fā)給服務(wù)器，僅在本地保存；

sessionStorage 和 localStorage 存儲(chǔ)大小比cookie大得多，可以達(dá)到5M或更大；

localStorage 存儲(chǔ)持久數(shù)據(jù)，瀏覽器關(guān)閉后數(shù)據(jù)不丟失除非主動(dòng)刪除數(shù)據(jù)；

sessionStorage 數(shù)據(jù)在當(dāng)前瀏覽器窗口關(guān)閉后自動(dòng)刪除；

cookie 設(shè)置的cookie過期時(shí)間之前一直有效，與瀏覽器是否關(guān)閉無關(guān)。

應(yīng)用層、表示層、會(huì)話層、傳輸層、網(wǎng)絡(luò)層、數(shù)據(jù)鏈路層、物理層

都處于應(yīng)用層（現(xiàn)在回顧好像錯(cuò)了一個(gè)~~~~）

科普：

應(yīng)用層：允許訪問OSI環(huán)境的手段（應(yīng)用協(xié)議數(shù)據(jù)單元APDU）（HTTP、FTP、SMTP、DNS）

表示層：對(duì)數(shù)據(jù)進(jìn)行翻譯、加密和壓縮（表示協(xié)議數(shù)據(jù)單元PPDU）

會(huì)話層：建立、管理和終止會(huì)話（會(huì)話協(xié)議數(shù)據(jù)單元SPDU）；

傳輸層：提供端到端的可靠報(bào)文傳遞和錯(cuò)誤恢復(fù)（段Segment）（TCP和UDP）；

網(wǎng)絡(luò)層：負(fù)責(zé)數(shù)據(jù)包從源到宿的傳遞和網(wǎng)際互連（包PackeT）IP尋址；

數(shù)據(jù)鏈路層：將比特組裝成幀和點(diǎn)到點(diǎn)的傳遞（幀F(xiàn)rame）

物理層：通過媒介傳輸比特,確定機(jī)械及電氣規(guī)范（比特Bit）

HTTP超文本傳輸協(xié)議，基于請(qǐng)求/響應(yīng)模式。

HTTP是無狀態(tài)協(xié)議，F(xiàn)TP是有狀態(tài)

狀態(tài)碼：

100：post請(qǐng)求第一次發(fā)送頭信息后服務(wù)器返回100，表示請(qǐng)求繼續(xù)；

200： 表示請(qǐng)求正常，請(qǐng)求成功；

301：永久重定向；

302： 臨時(shí)重定向；

304： 用于協(xié)商緩存，表示瀏覽器緩存資源未改變，任然可用

400：請(qǐng)求語法或參數(shù)錯(cuò)誤；

401：認(rèn)證未通過，如跨域未通過；

403：請(qǐng)求未授權(quán)；

404：找不到相應(yīng)資源的位置；

500：服務(wù)器內(nèi)部出錯(cuò)；

502： 錯(cuò)誤網(wǎng)關(guān)

緩存類型有兩種，強(qiáng)緩存和協(xié)商緩存

強(qiáng)緩存：不會(huì)向服務(wù)器發(fā)送請(qǐng)求，直接從緩存中讀取資源（Expires、cache-control）；

協(xié)商緩存：向服務(wù)器發(fā)送請(qǐng)求，服務(wù)器會(huì)根據(jù)這個(gè)請(qǐng)求的request header的一些參數(shù)來判斷是否命中協(xié)商緩存，如果命中，則返回304狀態(tài)碼并帶上新的response header通知瀏覽器從緩存中讀取資源；

科普更多瀏覽器緩存細(xì)節(jié)：深入瀏覽器緩存

100px,因?yàn)榇怪狈较虻膍argin會(huì)存在重疊現(xiàn)象

深入了解可閱讀CSS可格式化模型

因?yàn)槭窍齼蓚€(gè)兄弟div間的margin重疊問題：

兩個(gè)兄弟div設(shè)置為float：left（或display：inline-block）；width：100%；

科普更多（父子間的margin重疊消除）

外層元素padding代替

內(nèi)層元素透明邊框 border:1px solid transparent;

內(nèi)層元素絕對(duì)定位 postion:absolute:

外層元素 overflow:hidden;

內(nèi)層元素 加float:left;或display:inline-block;

內(nèi)層元素padding:1px;

使用flex布局：父元素設(shè)置display;flex

使用float布局(或者display：inline-block)

//html

    
float
    
overflow：hidden
        

//CSS
.item1 {
    float: left;
   //display:inline-block
}
.item2 {
    overflow: hidden;
    //display:inline-block
}

左邊定寬width：200px;設(shè)置浮動(dòng)float:left;右邊overflow：hidden（或者margin-left：左邊寬度）；

父元素display：flex；左邊定寬width：200px;；右邊設(shè)置項(xiàng)伸展屬性flex-grow: 1;

父元素position：relative；左邊定寬width：200px;position：absolute；右邊margin-left：左邊寬度；

父元素display：table；左邊定寬width：200px;右邊width：100%；display:tabel-cell;。

父元素display：table；左邊定寬width：200px;display:tabel-cell;右邊width：100%。

父元素display：flex；align-items:stretch;左邊定寬width：200px;；右邊設(shè)置項(xiàng)伸展屬性flex-grow: 1;

使用flex布局：父元素display：flex；左邊定寬width：200px；右邊定寬width：200px；中間flex-grow：1；

使用浮動(dòng)布局：父元素overflow：hidden；左邊定寬width：200px；float：left；右邊定寬width：200px；float：right；中間margin：0 200px；

這里有個(gè)坑，那就是HTML結(jié)構(gòu)必須得變換，即中和右要調(diào)換位置（當(dāng)時(shí)沒想到，一直被問你確定就這樣可以？短路短路~）

細(xì)想因?yàn)閏enter的div在正常文檔流中，且占據(jù)全屏寬度，自然之后的浮動(dòng)元素會(huì)被放置下一行

// Html結(jié)構(gòu)

        
left
        
right
    
center
 
 // CSS樣式布局
         .left {
             width: 200px;
             background: bisque;
             float: left;
         }
         .center{
             background: red;
             margin: 0 200px;
         }
         .right {
             background: rgba(22,220,22,0.5);
             float: right;
             width: 200px;
             
         }

使用絕對(duì)定位布局：

絕對(duì)定位法原理是將左右兩邊使用absolute定位，因?yàn)榻^對(duì)定位使其脫離文檔流，后面的center會(huì)自然流動(dòng)到他們上面，然后使用margin屬性，留出左右元素的寬度，既可以使中間元素自適應(yīng)屏幕寬度。（這種方式）

   // CSS樣式布局
        .left {
            width: 200px;
            background: bisque;
            position: absolute;
        }
        .center{
            background: red;
            margin: 0 200px;
        }
        .right {
            background: rgba(22,220,22,0.5);
            position: absolute;
       right: 0;
            width: 200px;
            
        }

圣杯布局（不是太理解）

圣杯布局的原理是margin負(fù)值法。使用圣杯布局首先需要在center元素外部包含一個(gè)div，包含div需要設(shè)置float屬性使其形成一個(gè)BFC，并設(shè)置寬度，并且這個(gè)寬度要和left塊的margin負(fù)值進(jìn)行配合：

// html結(jié)構(gòu)

    

        
center
    
    
left
    
right

// CSS 樣式
.left {
    width: 200px;
    background: bisque;
    float: left;
    margin-left: -100%;
}
.wrap {
    float: left;
    width: 100%;
}
.center{
    background: red;
    margin: 0 200px;
}
.right {
    background: rgba(22,220,22,0.5);
    float: left;
    margin-left: -200px;
    width: 200px;
}

整個(gè)過程歷時(shí)1個(gè)小時(shí)左右，感覺還好吧，怎么說不管過沒過，起碼知道自己還有哪些方面不足，可以針對(duì)性的深入學(xué)習(xí)。

最后附上此次面試涉及的一些知識(shí)點(diǎn)

React知識(shí)冊；

瀏覽器緩存詳解；

ES6知識(shí)總結(jié)；

最后加上前端面試題JavaScript

持續(xù)跟進(jìn)中，喜歡可以留下個(gè)贊哦~~