為什么要有 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
解決方法:
設(shè)置正確的依賴項
useRef - 相當(dāng)于 class 組件中的 this,可以在組件的更新期間保證拿到的引用都是同一個
eslint-plugin-react-hooks 插件