React面試真題演練

• 組件之間如何通訊
• JSX本質是什么
• Context是什么？如何應用
• shouldComponentUpdate用途
• redux單項數據流
• setState場景題
• 什么是純函數
• React組件生命周期
• React發起ajax應該在哪個生命周期
• 渲染列表，為何使用key
• 函數組件和class組件區別
• 什么是受控組件
• 何時使用異步組件
• redux如何進行異步請求
• react-router如何配置懶加載
• PureComponent有何區別
• React事件和DOM事件的區別
• React性能優化
• React和Vue的區別

組件之間如何通訊

父子組件props
自定義事件
Redux和Context

JSX本質是什么

createElement
執行返回vnode

Context是什么？如何應用

父組件，向其下所有子孫組件傳遞信息
對一些簡單的公共信息：主題色、語言等
復雜的公共信息，請用redux

shouldComponentUpdate用途

性能優化
配合“不可變值”一起使用，否則會出錯

redux單項數據流

setState場景題

什么是純函數

返回一個新值，沒有副作用（不會“偷偷”修改其他值）
重點：不可變值
如arr1 = arr.slice()

React組件生命周期

單組件生命周期
父子組件生命周期
注意SCU

React發起ajax應該在哪個生命周期

同Vue
componentDidMount

渲染列表，為何使用key

同Vue，必須用key，且不能是index和random
diff算法中通過tag和key來判斷，是否是sameNode
減少渲染次數，提升渲染性能

函數組件和class組件區別

純函數，輸入props，輸出JSX
沒有實例，沒有生命周期，沒有state
不能擴展其他方法

什么是受控組件

表單的值，受state控制
需要自行監聽oChange，更新state
對比非受控組件

何時使用異步組件

同Vue
加載大組件
路由懶加載

redux如何進行異步請求

使用異步action
如redux-thunk

react-router如何配置懶加載

PureComponent有何區別

實現了淺比較的shouldComponentUpdate
優化性能
但要結合不可變值使用

React事件和DOM事件的區別

所有事件都掛載到document上
event不是原生的，是SyntheticEvent合成事件對象
dispatchEvent

React性能優化

渲染列表加key
自定義事件、DOM事件及時銷毀
合理使用異步組件
減少函數bind this的次數
合理使用SCU PureComponent和memo
合理使用Immutable.js
webpack層面的優化（后面會講）
前端通用的性能優化，如圖片懶加載
使用SSR

React和Vue的區別

都支持組件化
都是數據驅動視圖
都使用vdom操作DOM
React使用JSX擁抱JS,Vue使用模板擁抱html
React函數式編程，Vue聲明式編程
React更多需要自力更生，Vue把想要的都給你

總結

以上是生活随笔為你收集整理的（九）React面试真题演练的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。