Hooks解決了什么問題？

編寫React代碼的時(shí)候通常會遇到以下問題：

1、在組件之間復(fù)用狀態(tài)邏輯很難

2、復(fù)雜組件變得難以理解

3、難以理解的 class

在組件之間復(fù)用狀態(tài)邏輯很難。如果你使用過 React 一段時(shí)間，你也許會熟悉一些解決此類問題的方案，比如 render props 和 高階組件。

但是這類方案需要重新組織你的組件結(jié)構(gòu)，這可能會很麻煩，使你的代碼難以理解。

如果你在 React DevTools 中觀察過 React 應(yīng)用，你會發(fā)現(xiàn)由 providers，consumers，高階組件，render props 等其他抽象層組成的組件會形成“嵌套地獄”。

你可以使用 Hook 從組件中提取狀態(tài)邏輯，使得這些邏輯可以單獨(dú)測試并復(fù)用。Hook 使你在無需修改組件結(jié)構(gòu)的情況下復(fù)用狀態(tài)邏輯。這使得在組件間或社區(qū)內(nèi)共享 Hook 變得更便捷。

復(fù)雜組件變得難以理解。我們經(jīng)常維護(hù)一些組件，組件起初很簡單，但是逐漸會被狀態(tài)邏輯和副作用充斥。每個(gè)生命周期常常包含一些不相關(guān)的邏輯。

例如，組件常常在 componentDidMount 和 componentDidUpdate 中獲取數(shù)據(jù)。但是，同一個(gè) componentDidMount 中可能也包含很多其它的邏輯，如設(shè)置事件監(jiān)聽，而之后需在 componentWillUnmount 中清除。相互關(guān)聯(lián)且需要對照修改的代碼被進(jìn)行了拆分，而完全不相關(guān)的代碼卻在同一個(gè)方法中組合在一起。如此很容易產(chǎn)生 bug，并且導(dǎo)致邏輯不一致。

在多數(shù)情況下，不可能將組件拆分為更小的粒度，因?yàn)闋顟B(tài)邏輯無處不在。為了解決這個(gè)問題，Hook 將組件中相互關(guān)聯(lián)的部分拆分成更小的函數(shù)。

難以理解的 class。除了代碼復(fù)用和代碼管理會遇到困難外，我們還發(fā)現(xiàn) class 是學(xué)習(xí) React 的一大屏障。你必須去理解 JavaScript 中 this 的工作方式，這與其他語言存在巨大差異。還不能忘記綁定事件處理器。