[react] 高階組件(HOC)有哪些優(yōu)點(diǎn)和缺點(diǎn)？

HOC
優(yōu)點(diǎn)
通過傳遞props去影響內(nèi)層組件的狀態(tài)，不直接改變內(nèi)層組件的狀態(tài)，降低了耦合度
缺點(diǎn)
組件多層嵌套， 增加復(fù)雜度與理解成本
ref隔斷， React.forwardRef 來解決
高階組件多層嵌套，相同命名的props會(huì)覆蓋老屬性
不清楚props來源與哪個(gè)高階組件
render props
優(yōu)點(diǎn)
props命名可修改，不存在相互覆蓋
清楚props來源
不會(huì)出現(xiàn)組件多層嵌套
缺點(diǎn)
函數(shù)回調(diào)形式的嵌套
寫法繁瑣，沒有hoc裝飾器寫法簡(jiǎn)單
無法在return以外的地方訪問數(shù)據(jù)
hook
優(yōu)點(diǎn)
解決了hoc，render props的嵌套問題
可以在 return 之外使用數(shù)據(jù)
可以重命名，不存在覆蓋，且清楚數(shù)據(jù)來源
缺點(diǎn)
在閉包場(chǎng)景可能會(huì)引用到舊的state、props值

個(gè)人簡(jiǎn)介

我是歌謠，歡迎和大家一起交流前后端知識(shí)。放棄很容易，
但堅(jiān)持一定很酷。歡迎大家一起討論

主目錄

與歌謠一起通關(guān)前端面試題

總結(jié)

以上是生活随笔為你收集整理的[react] 高阶组件(HOC)有哪些优点和缺点？的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

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