面試官：說說你在使用React 過程中遇到的常見問題？解決方案?
本文轉(zhuǎn)載自微信公眾號「JS每日一題」，作者灰灰。轉(zhuǎn)載本文請聯(lián)系JS每日一題公眾號。
一、前言
在使用react開發(fā)項目過程中，每個人或多或少都會遇到一些"奇怪"的問題，本質(zhì)上都是我們對其理解的不夠透徹
react 系列，33個工作日，33次凌晨還在亮起的臺燈，到今天就圓滿畫上句號了，比心
在系列中我們列出了很多比較經(jīng)典的考題，工作中遇到的問題也往往就藏中其中，只是以不同的表現(xiàn)形式存在罷了
今天的題解不算題解，準(zhǔn)確來說是對整個系列的一次貫穿，總結(jié)
目錄:
- react 有什么特性
- 生命周期有哪些不同階段?每個階段對應(yīng)的方法是?
- state 和 props有什么區(qū)別?
- super()和super(props)有什么區(qū)別?
- setState執(zhí)行機制?
- React的事件機制?
- 事件綁定的方式有哪些?
- 構(gòu)建組件的方式有哪些?區(qū)別?
- 組件之間如何通信?
- key有什么作用?
- refs 的理解?應(yīng)用場景?
- Hooks的理解?解決了什么問題?
- 如何引入css?
- redux工作原理?
- redux中間件有哪些?
- react-router組件有哪些?
- render觸發(fā)時機?
- 如何減少render?
- JSX轉(zhuǎn)化DOM過程?
- 性能優(yōu)化手段有哪些
- 如何做服務(wù)端渲染?
react 有什么特性
主要的特性分為：
- JSX語法
- 單向數(shù)據(jù)綁定
- 虛擬DOM
- 聲明式編程
- Component
借助這些特性，react整體使用起來更加簡單高效，組件式開發(fā)提高了代碼的復(fù)用率
- 生命周期有哪些不同階段?每個階段對應(yīng)的方法是?
主要分成了新的生命周期和舊的生命周期：
新版生命周期整體流程如下圖所示：
舊的生命周期流程圖如下：
state 和 props有什么區(qū)別?
兩者相同點：
- 兩者都是 JavaScript 對象
- 兩者都是用于保存信息
- props 和 state 都能觸發(fā)渲染更新
區(qū)別：
- props 是外部傳遞給組件的，而 state 是在組件內(nèi)被組件自己管理的，一般在 constructor 中初始化
- props 在組件內(nèi)部是不可修改的，但 state 在組件內(nèi)部可以進行修改
- state 是多變的、可以修改
super()和super(props)有什么區(qū)別?
在React中，類組件基于ES6，所以在constructor中必須使用super
在調(diào)用super過程，無論是否傳入props，React內(nèi)部都會將porps賦值給組件實例porps屬性中
如果只調(diào)用了super()，那么this.props在super()和構(gòu)造函數(shù)結(jié)束之間仍是undefined
setState執(zhí)行機制?
在react類組件的狀態(tài)需要通過setState進行更改，在不同場景下對應(yīng)不同的執(zhí)行順序：
在組件生命周期或React合成事件中，setState是異步
在setTimeout或者原生dom事件中，setState是同步
當(dāng)我們批量更改state的值的時候，react內(nèi)部會將其進行覆蓋，只取最后一次的執(zhí)行結(jié)果
當(dāng)需要下一個state依賴當(dāng)前state的時候，則可以在setState中傳遞一個回調(diào)函數(shù)進行下次更新
React的事件機制?
React基于瀏覽器的事件機制自身實現(xiàn)了一套事件機制，包括事件注冊、事件的合成、事件冒泡、事件派發(fā)等
組件注冊的事件最終會綁定在document這個 DOM上，而不是 React組件對應(yīng)的 DOM，從而節(jié)省內(nèi)存開銷
自身實現(xiàn)了一套事件冒泡機制，阻止不同時間段的冒泡行為，需要對應(yīng)使用不同的方法
事件綁定的方式有哪些?
react常見的綁定方式有如下：
- render方法中使用bind
- render方法中使用箭頭函數(shù)
- constructor中bind
- 定義階段使用箭頭函數(shù)綁定
前兩種方式在每次組件render的時候都會生成新的方法實例，性能問題欠缺
構(gòu)建組件的方式有哪些?區(qū)別?
組件的創(chuàng)建主要分成了三種方式：
- 函數(shù)式創(chuàng)建
- 繼承 React.Component 創(chuàng)建
- 通過 React.createClass 方法創(chuàng)建
如今一般都是前兩種方式，對于一些無狀態(tài)的組件創(chuàng)建，建議使用函數(shù)式創(chuàng)建的方式，再比如hooks的機制下，函數(shù)式組件能做類組件對應(yīng)的事情，所以建議都使用函數(shù)式的方式來創(chuàng)建組件
組件之間如何通信?
組件間通信可以通過props、傳遞回調(diào)函數(shù)、context、redux等形式進行組件之間通訊
key有什么作用?
使用key是react性能優(yōu)化的手段，在一系列數(shù)據(jù)最前面插入元素，如果沒有key的值，則所有的元素都需要進行更換，而有key的情況只需要將最新元素插入到前面，不涉及刪除操作
在使用key的時候應(yīng)保證：
- key 應(yīng)該是唯一的
- key不要使用隨機值(隨機數(shù)在下一次 render 時，會重新生成一個數(shù)字)
- 避免使用 index 作為 key
refs 的理解?應(yīng)用場景?
Refs允許我們訪問 DOM節(jié)點或在 render方法中創(chuàng)建的 React元素
下面的場景使用refs非常有用：
- 對Dom元素的焦點控制、內(nèi)容選擇、控制
- 對Dom元素的內(nèi)容設(shè)置及媒體播放
- 對Dom元素的操作和對組件實例的操作
- 集成第三方 DOM 庫
Hooks的理解?解決了什么問題?
Hook 是 React 16.8 的新增特性。它可以讓你在不編寫 class 的情況下使用 state 以及其他的 React 特性
解決問題如下：
- 難以重用和共享組件中的與狀態(tài)相關(guān)的邏輯
- 邏輯復(fù)雜的組件難以開發(fā)與維護，當(dāng)我們的組件需要處理多個互不相關(guān)的 local state 時，每個生命周期函數(shù)中可能會包含著各種互不相關(guān)的邏輯在里面
- 類組件中的this增加學(xué)習(xí)成本，類組件在基于現(xiàn)有工具的優(yōu)化上存在些許問題
- 由于業(yè)務(wù)變動，函數(shù)組件不得不改為類組件等等
如何引入css?
常見的CSS引入方式有以下：
- 在組件內(nèi)直接使用
- 組件中引入 .css 文件
- 組件中引入 .module.css 文件
- CSS in JS
組件內(nèi)直接使用css會導(dǎo)致大量的代碼，而文件中直接引入css文件是全局作用域，發(fā)生層疊
引入.module.css文件能夠解決局部作用域問題，但是不方便動態(tài)修改樣式，需要使用內(nèi)聯(lián)的方式進行樣式的編寫
css in js這種方法，可以滿足大部分場景的應(yīng)用，可以類似于預(yù)處理器一樣樣式嵌套、定義、修改狀態(tài)等
redux工作原理?
redux要求我們把數(shù)據(jù)都放在 store公共存儲空間
一個組件改變了 store 里的數(shù)據(jù)內(nèi)容，其他組件就能感知到 store的變化，再來取數(shù)據(jù)，從而間接的實現(xiàn)了這些數(shù)據(jù)傳遞的功能
工作流程圖如下所示：
redux中間件有哪些?
市面上有很多優(yōu)秀的redux中間件，如：
- redux-thunk：用于異步操作
- redux-logger：用于日志記錄
react-router組件有哪些?
常見的組件有：
- BrowserRouter、HashRouter
- Route
- Link、NavLink
- switch
- redirect
render觸發(fā)時機?
在React 中，類組件只要執(zhí)行了 setState 方法，就一定會觸發(fā) render 函數(shù)執(zhí)行
函數(shù)組件useState 會判斷當(dāng)前值有無發(fā)生改變確定是否執(zhí)行render方法，一旦父組件發(fā)生渲染，子組件也會渲染
如何減少render?
父組件渲染導(dǎo)致子組件渲染，子組件并沒有發(fā)生任何改變，這時候就可以從避免無謂的渲染，具體實現(xiàn)的方式有如下：
- shouldComponentUpdate
- PureComponent
- React.memo
JSX轉(zhuǎn)化DOM過程?
jsx首先會轉(zhuǎn)化成React.createElement這種形式，React.createElement作用是生成一個虛擬Dom對象，然后會通過ReactDOM.render進行渲染成真實DOM
性能優(yōu)化手段有哪些
除了減少render的渲染之外，還可以通過以下手段進行優(yōu)化：
除此之外， 常見性能優(yōu)化常見的手段有如下：
- 避免使用內(nèi)聯(lián)函數(shù)
- 使用 React Fragments 避免額外標(biāo)記
- 使用 Immutable
- 懶加載組件
- 事件綁定方式
- 服務(wù)端渲染
如何做服務(wù)端渲染?
node server 接收客戶端請求，得到當(dāng)前的請求url 路徑，然后在已有的路由表內(nèi)查找到對應(yīng)的組件，拿到需要請求的數(shù)據(jù)，將數(shù)據(jù)作為 props、context或者store 形式傳入組件
然后基于 react 內(nèi)置的服務(wù)端渲染方法 renderToString()把組件渲染為 html字符串在把最終的 html進行輸出前需要將數(shù)據(jù)注入到瀏覽器端
瀏覽器開始進行渲染和節(jié)點對比，然后執(zhí)行完成組件內(nèi)事件綁定和一些交互，瀏覽器重用了服務(wù)端輸出的 html 節(jié)點，整個流程結(jié)束
到這里，整個React系列也就結(jié)束了，如果這個系列有給你帶來一些啟發(fā)或者幫助，可以點點下方的贊告訴我們，我們下個系列再見
