[[415497]]

本文轉載自微信公眾號「JS每日一題」，作者灰灰。轉載本文請聯系JS每日一題公眾號。

一、前言

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

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

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

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

目錄:

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

react 有什么特性

主要的特性分為：

• JSX語法
• 單向數據綁定
• 虛擬DOM
• 聲明式編程
• Component

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

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

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

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

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

state 和 props有什么區別?

兩者相同點：

• 兩者都是 JavaScript 對象
• 兩者都是用于保存信息
• props 和 state 都能觸發渲染更新

區別：

• props 是外部傳遞給組件的，而 state 是在組件內被組件自己管理的，一般在 constructor 中初始化
• props 在組件內部是不可修改的，但 state 在組件內部可以進行修改
• state 是多變的、可以修改

super()和super(props)有什么區別?

在React中，類組件基于ES6，所以在constructor中必須使用super

在調用super過程，無論是否傳入props，React內部都會將porps賦值給組件實例porps屬性中

如果只調用了super()，那么this.props在super()和構造函數結束之間仍是undefined

setState執行機制?

在react類組件的狀態需要通過setState進行更改，在不同場景下對應不同的執行順序：

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

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

當我們批量更改state的值的時候，react內部會將其進行覆蓋，只取最后一次的執行結果

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

React的事件機制?

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

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

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

事件綁定的方式有哪些?

react常見的綁定方式有如下：

• render方法中使用bind
• render方法中使用箭頭函數
• constructor中bind
• 定義階段使用箭頭函數綁定

前兩種方式在每次組件render的時候都會生成新的方法實例，性能問題欠缺

構建組件的方式有哪些?區別?

組件的創建主要分成了三種方式：

• 函數式創建
• 繼承 React.Component 創建
• 通過 React.createClass 方法創建

如今一般都是前兩種方式，對于一些無狀態的組件創建，建議使用函數式創建的方式，再比如hooks的機制下，函數式組件能做類組件對應的事情，所以建議都使用函數式的方式來創建組件

組件之間如何通信?

組件間通信可以通過props、傳遞回調函數、context、redux等形式進行組件之間通訊

key有什么作用?

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

在使用key的時候應保證：

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

refs 的理解?應用場景?

Refs允許我們訪問 DOM節點或在 render方法中創建的 React元素

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

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

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

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

解決問題如下：

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

如何引入css?

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

• 在組件內直接使用
• 組件中引入 .css 文件
• 組件中引入 .module.css 文件
• CSS in JS

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

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

css in js這種方法，可以滿足大部分場景的應用，可以類似于預處理器一樣樣式嵌套、定義、修改狀態等

redux工作原理?

redux要求我們把數據都放在 store公共存儲空間

一個組件改變了 store 里的數據內容，其他組件就能感知到 store的變化，再來取數據，從而間接的實現了這些數據傳遞的功能

工作流程圖如下所示：

redux中間件有哪些?

市面上有很多優秀的redux中間件，如：

• redux-thunk：用于異步操作
• redux-logger：用于日志記錄

react-router組件有哪些?

常見的組件有：

• BrowserRouter、HashRouter
• Route
• Link、NavLink
• switch
• redirect

render觸發時機?

在React 中，類組件只要執行了 setState 方法，就一定會觸發 render 函數執行

函數組件useState 會判斷當前值有無發生改變確定是否執行render方法，一旦父組件發生渲染，子組件也會渲染

如何減少render?

父組件渲染導致子組件渲染，子組件并沒有發生任何改變，這時候就可以從避免無謂的渲染，具體實現的方式有如下：

• shouldComponentUpdate
• PureComponent
• React.memo

JSX轉化DOM過程?

jsx首先會轉化成React.createElement這種形式，React.createElement作用是生成一個虛擬Dom對象，然后會通過ReactDOM.render進行渲染成真實DOM

性能優化手段有哪些

除了減少render的渲染之外，還可以通過以下手段進行優化：

除此之外， 常見性能優化常見的手段有如下：

• 避免使用內聯函數
• 使用 React Fragments 避免額外標記
• 使用 Immutable
• 懶加載組件
• 事件綁定方式
• 服務端渲染

如何做服務端渲染?

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

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

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

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