React Hooks的優(yōu)缺點

為什么要有 Hooks(Hooks 的優(yōu)點)

  • class 組件狀態(tài)邏輯復(fù)用困難。只能通過 HOC 或者 render props。需要我們改造我們的組件來使用這些模式,而且也會增加組件層級可能會導(dǎo)致嵌套地獄。但是 hooks 可以讓我們在不修改自己組件的邏輯的情況下復(fù)用狀態(tài)

  • class 的復(fù)雜組件難以理解。同一個生命周期中的邏輯互不相關(guān),而相互關(guān)聯(lián)的邏輯卻被放在不同的生命周期中。useEffect Hook 可以讓我們將相互管理的邏輯寫在一起

  • 類組件需要理解 class 和 this

  • class 組件繼承 React.Compoment 默認(rèn)就會添加很多的生命周期方法

缺點

  • useEffect 的閉包問題

函數(shù)的運行是獨立的,每個函數(shù)都有一份獨立的作用域。函數(shù)的變量是保存在運行時的作用域里面。函數(shù)組件每次渲染都有特定的 effect 函數(shù)、state、props、事件處理函數(shù)等。而 useEffect 如果我們沒有設(shè)置正確的依賴,很有可能拿不到我們想要的 state 和 props

解決方法:

  1. 設(shè)置正確的依賴項

  2. useRef - 相當(dāng)于 class 組件中的 this,可以在組件的更新期間保證拿到的引用都是同一個

  3. eslint-plugin-react-hooks 插件

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容