react 核心技術點

 

一、react生命週期

react生命週期分爲初始化階段、運行階段、銷燬階段。

(1) 初始化階段：

componentWillMount：實例掛載以前

Render：渲染組件

componentDidMount：實例掛載完成。通常在這個函數中與後臺進行初始化數據交互。

 

(2)運行階段：

componentWillReceiveProps：父組件改變時調用。注意只要父組件此方法觸發，那麼子組件也會觸發，也就是說父組件更新，子組件也會跟着更新。

 

state 發生改變時更新

sholudComponentUpdate：

主要是用來手動阻止組件渲染，通常在這個函數中作組件的性能優化。

方法在接收了新的props或state後觸發，你能夠經過返回true或false來控制後面的生命週期流程是否觸發。

方法在setState後state發生改變後觸發，你能夠經過返回true或false來控制後面的生命週期流程是否觸發。

 

 

componentWillUpdate：組件數據更新前調用 在state改變或shouldComponentUpdate返回true後觸發。不可在其中使用setState。

 

render

componentDidUpdate：組件數據更新完成時調用

 

(3)銷燬階段：

componentUnmount：銷燬階段。通常用來銷燬不用的變量或者是解除無用定時器以及解綁無用事件。防止內存泄漏問題。

 

 

二、運行階段生命週期調用順序

componentWillReceiveProps–>shouldComponentUpdate --> componentWillupdate --> componentDidUpdate

 

使用redux時候狀況

在使用redux作狀態管理時候，基本不須要透過生命週期去作setState這樣的狀態管理了，基本都是用props來傳遞來從新渲染，須要注意的僅僅是在哪一個生命週期時候觸發action，好比須要進行ajax請求時候通常都是在componentDidMount和componentWillReceiveProps時候進行，在reducer中處理完，而後在經過props傳入組件執行組件的更新週期。

 

 

 

三、react中key的做用

key是React中用於追蹤哪些列表中元素被修改、刪除或者被添加的輔助標識。在diff算法中，key用來判斷該元素節點是被移動過來的仍是新建立的元素，減小沒必要要的元素重複渲染。

 

四、setState第二個參數的做用

由於setState是一個異步的過程，因此說執行完setState以後不能馬上更改state裏面的值。若是須要對state數據更改監聽，setState提供第二個參數，就是用來監聽state裏面數據的更改，當數據更改完成，調用回調函數。

 

五、sass和less的區別

定義變量的符號不一樣，less是用@，sass使用$

變量的做用域不一樣，less在全局定義，就做用在全局，在代碼塊中定義，就做用於整哥代碼塊。而sass只做用域全局。

編譯環境不一樣，less在開發者環境編譯，sass在服務器環境下編譯。

 

六、vue和react的區別

一、react嚴格上針對的是mvc模式的view層，vue則是mvvm模式。

二、操做dom的方式不一樣，vue使用的是指令操做dom，react是經過js進行操做。

三、數據綁定不一樣，vue實現的是雙向綁定，react的數據流動是單向的。

四、react中state是不能直接改變的，須要使用setState改變。vue中的state不是必須的，數據主要是由data屬性在vue對象中管理的。

 

七、react中的高階函數

高階函數就是一個純js且沒有反作用的函數。

高階組件就是一個函數，且該函數接受一個組件做爲參數，並返回一個新的組件。

相關資料： https://blog.csdn.net/baidu_38151187/article/details/79884613

 

八、react生命週期中，最適合與服務端進行數據交互的是哪一個函數

componentDidMount：在這個階段，實例和dom已經掛載完成，能夠進行相關的dom操做。

 

九、react中組件傳值

父傳子（組件嵌套淺）：父組件定義一個屬性，子組件經過this.props接收。

子傳父：父組件定義一個屬性，並將一個回調函數賦值給定義的屬性，而後子組件進行調用傳過來的函數，並將參數傳進去，在父組件的回調函數中便可得到子組件傳過來的值。

 

十、react性能優化階段函數是哪個？

shouldComponentUpdate

 

十一、react性能優化的方案

（1）重寫shouldComponentUpdate來避免沒必要要的dom操做。

（2）使用 production 版本的react.js。

（3）使用key來幫助React識別列表中全部子組件的最小變化。

 

 

十二、介紹一下webpack

webpack是一個前端模塊化打包工具，主要由入口，出口，loader，plugins四個部分。前端的打包工具還有一個gulp，不過gulp側重於前端開發的過程，而webpack側重於模塊，例如他會將css文件看做一個模塊，經過css-loader將css打包成符合css的靜態資源。

 

 

1三、Es6中箭頭函數與普通函數的區別？

1.普通function的聲明在變量提高中是最高的，箭頭函數沒有函數提高

2.箭頭函數沒有this，arguments

3.箭頭函數不能做爲構造函數，不能被new，沒有property,

4.call和apply方法只有參數，沒有做用域

 

1四、什麼是閉包？閉包有什麼危害？如何解決閉包帶來的危害？

簡單來講，閉包就是一個定義在函數內部的函數。由於js中存在做用域的問題，因此在函數內部定義的變量在函數外部是沒有辦法直接獲取到。而閉包就是溝通函數內部和外部的橋樑，這樣在函數外部接能夠獲得函數內部的值。而且閉包能夠實現函數屬性和方法的私有化。

閉包的危害：

由於閉包會將內部變量儲存在內存中，若是長時間不清除的話會形成內存泄漏的問題，影響程序的性能。

解決方法：對於不使用的變量及時的清除。