[[415497]]

本文轉(zhuǎn)載自微信公眾號「JS每日一題」，作者灰灰。轉(zhuǎn)載本文請聯(lián)系JS每日一題公眾號。

一、前言

在使用react開發(fā)項目過程中，每個人或多或少都會遇到一些"奇怪"的問題，本質(zhì)上都是我們對其理解的不夠透徹

react 系列，33個工作日，33次凌晨還在亮起的臺燈，到今天就圓滿畫上句號了，比心

在系列中我們列出了很多比較經(jīng)典的考題，工作中遇到的問題也往往就藏中其中，只是以不同的表現(xiàn)形式存在罷了

今天的題解不算題解，準確來說是對整個系列的一次貫穿，總結(jié)

目錄:

• react 有什么特性
• 生命周期有哪些不同階段?每個階段對應的方法是?
• state 和 props有什么區(qū)別?
• super()和super(props)有什么區(qū)別?
• setState執(zhí)行機制?
• React的事件機制?
• 事件綁定的方式有哪些?
• 構(gòu)建組件的方式有哪些?區(qū)別?
• 組件之間如何通信?
• key有什么作用?
• refs 的理解?應用場景?
• Hooks的理解?解決了什么問題?
• 如何引入css?
• redux工作原理?
• redux中間件有哪些?
• react-router組件有哪些?
• render觸發(fā)時機?
• 如何減少render?
• JSX轉(zhuǎn)化DOM過程?
• 性能優(yōu)化手段有哪些
• 如何做服務端渲染?

react 有什么特性

主要的特性分為：

• JSX語法
• 單向數(shù)據(jù)綁定
• 虛擬DOM
• 聲明式編程
• Component

借助這些特性，react整體使用起來更加簡單高效，組件式開發(fā)提高了代碼的復用率

• 生命周期有哪些不同階段?每個階段對應的方法是?

主要分成了新的生命周期和舊的生命周期：

新版生命周期整體流程如下圖所示：

舊的生命周期流程圖如下：

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進行更改，在不同場景下對應不同的執(zhí)行順序：

在組件生命周期或React合成事件中，setState是異步

在setTimeout或者原生dom事件中，setState是同步

當我們批量更改state的值的時候，react內(nèi)部會將其進行覆蓋，只取最后一次的執(zhí)行結(jié)果

當需要下一個state依賴當前state的時候，則可以在setState中傳遞一個回調(diào)函數(shù)進行下次更新

React的事件機制?

React基于瀏覽器的事件機制自身實現(xiàn)了一套事件機制，包括事件注冊、事件的合成、事件冒泡、事件派發(fā)等

組件注冊的事件最終會綁定在document這個 DOM上，而不是 React組件對應的 DOM，從而節(jié)省內(nèi)存開銷

自身實現(xiàn)了一套事件冒泡機制，阻止不同時間段的冒泡行為，需要對應使用不同的方法

事件綁定的方式有哪些?

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ù)式組件能做類組件對應的事情，所以建議都使用函數(shù)式的方式來創(chuàng)建組件

組件之間如何通信?

組件間通信可以通過props、傳遞回調(diào)函數(shù)、context、redux等形式進行組件之間通訊

key有什么作用?

使用key是react性能優(yōu)化的手段，在一系列數(shù)據(jù)最前面插入元素，如果沒有key的值，則所有的元素都需要進行更換，而有key的情況只需要將最新元素插入到前面，不涉及刪除操作

在使用key的時候應保證：

• key 應該是唯一的
• key不要使用隨機值(隨機數(shù)在下一次 render 時，會重新生成一個數(shù)字)
• 避免使用 index 作為 key

refs 的理解?應用場景?

Refs允許我們訪問 DOM節(jié)點或在 render方法中創(chuàng)建的 React元素

下面的場景使用refs非常有用：

• 對Dom元素的焦點控制、內(nèi)容選擇、控制
• 對Dom元素的內(nèi)容設置及媒體播放
• 對Dom元素的操作和對組件實例的操作
• 集成第三方 DOM 庫

Hooks的理解?解決了什么問題?

Hook 是 React 16.8 的新增特性。它可以讓你在不編寫 class 的情況下使用 state 以及其他的 React 特性

解決問題如下：

• 難以重用和共享組件中的與狀態(tài)相關的邏輯
• 邏輯復雜的組件難以開發(fā)與維護，當我們的組件需要處理多個互不相關的 local state 時，每個生命周期函數(shù)中可能會包含著各種互不相關的邏輯在里面
• 類組件中的this增加學習成本，類組件在基于現(xiàn)有工具的優(yōu)化上存在些許問題
• 由于業(yè)務變動，函數(shù)組件不得不改為類組件等等

如何引入css?

常見的CSS引入方式有以下：

• 在組件內(nèi)直接使用
• 組件中引入 .css 文件
• 組件中引入 .module.css 文件
• CSS in JS

組件內(nèi)直接使用css會導致大量的代碼，而文件中直接引入css文件是全局作用域，發(fā)生層疊

引入.module.css文件能夠解決局部作用域問題，但是不方便動態(tài)修改樣式，需要使用內(nèi)聯(lián)的方式進行樣式的編寫

css in js這種方法，可以滿足大部分場景的應用，可以類似于預處理器一樣樣式嵌套、定義、修改狀態(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 會判斷當前值有無發(fā)生改變確定是否執(zhí)行render方法，一旦父組件發(fā)生渲染，子組件也會渲染

如何減少render?

父組件渲染導致子組件渲染，子組件并沒有發(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 避免額外標記
• 使用 Immutable
• 懶加載組件
• 事件綁定方式
• 服務端渲染

如何做服務端渲染?

node server 接收客戶端請求，得到當前的請求url 路徑，然后在已有的路由表內(nèi)查找到對應的組件，拿到需要請求的數(shù)據(jù)，將數(shù)據(jù)作為 props、context或者store 形式傳入組件

然后基于 react 內(nèi)置的服務端渲染方法 renderToString()把組件渲染為 html字符串在把最終的 html進行輸出前需要將數(shù)據(jù)注入到瀏覽器端

瀏覽器開始進行渲染和節(jié)點對比，然后執(zhí)行完成組件內(nèi)事件綁定和一些交互，瀏覽器重用了服務端輸出的 html 節(jié)點，整個流程結(jié)束

到這里，整個React系列也就結(jié)束了，如果這個系列有給你帶來一些啟發(fā)或者幫助，可以點點下方的贊告訴我們，我們下個系列再見