[react] 高階組件(HOC)有哪些優點和缺點？

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

個人簡介

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

主目錄

與歌謠一起通關前端面試題

總結

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

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