React面試真題演練

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

組件之間如何通訊

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

JSX本質(zhì)是什么

createElement
執(zhí)行返回vnode

Context是什么？如何應(yīng)用

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

shouldComponentUpdate用途

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

redux單項數(shù)據(jù)流

setState場景題

什么是純函數(shù)

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

React組件生命周期

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

React發(fā)起ajax應(yīng)該在哪個生命周期

同Vue
componentDidMount

渲染列表，為何使用key

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

函數(shù)組件和class組件區(qū)別

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

什么是受控組件

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

何時使用異步組件

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

redux如何進行異步請求

使用異步action
如redux-thunk

react-router如何配置懶加載

PureComponent有何區(qū)別

實現(xiàn)了淺比較的shouldComponentUpdate
優(yōu)化性能
但要結(jié)合不可變值使用

React事件和DOM事件的區(qū)別

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

React性能優(yōu)化

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

React和Vue的區(qū)別

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

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。