react中hooks解決了什麼問題

解決的問題：1、從元件中提取狀態邏輯，解決了在元件之間復用狀態邏輯很難的問題；2、將元件中相互關聯的部分拆分成更小的函數，解決了複雜組件的問題；3.在非class的情況下使用更多的React特性，解決了class組件與函數組件有差異的問題。

本教學操作環境：Windows10系統、react17.0.1版、Dell G3電腦。

react中hooks解決了什麼問題

1、在元件之間復用狀態邏輯很難

React 沒有提供將可重複使用性行為「附加」到組件的途徑（例如，把組件連接到store）解決此類問題可以使用render props 和高階組件。但是這類方案需要重新組織組件結構，這可能會很麻煩，並且會使程式碼難以理解。由 providers，consumers，高階組件，render props 等其他抽象層組成的組件會形成「嵌套地獄」。儘管可以在 DevTools 過濾掉它們，但這說明了一個更深層的問題：React 需要為共享狀態邏輯提供更好的原生途徑。

可以使用 Hook 從元件中提取狀態邏輯，使得這些邏輯可以單獨測試並重複使用。 Hook 讓我們在無需修改元件結構的情況下重複使用狀態邏輯。這使得在組件間或社區內共用 Hook 變得更便捷。

2、複雜元件變得難以理解

在元件中，每個生命週期常常包含一些不相關的邏輯。例如，元件常常在 componentDidMount 和 componentDidUpdate 中取得資料。但是，同一個 componentDidMount 中可能也包含許多其它的邏輯，如設定事件監聽，而之後需在 componentWillUnmount 中清除。相互關聯且需要對照修改的程式碼被進行了拆分，而完全不相關的程式碼卻在同一個方法中組合在一起。如此容易產生 bug，並且導致邏輯不一致。

在多數情況下，不可能將元件拆分為更小的粒度，因為狀態邏輯無所不在。這也為測試帶來了一定挑戰。同時，這也是許多人將 React 與狀態管理函式庫結合使用的原因之一。但是，這往往會引入了許多抽象概念，需要你在不同的檔案之間來回切換，使得復用變得更加困難。

為了解決這個問題，Hook 將元件中相互關聯的部分拆分成更小的函數（例如設定訂閱或請求資料），而並非強制依照生命週期劃分。你也可以使用 reducer 來管理元件的內部狀態，使其更可預測。

3、難以理解的 class

除了程式碼重複使用和程式碼管理會遇到困難外，class 是學習 React 的一大屏障。我們必須去理解 JavaScript 中 this 的工作方式，這與其他語言有巨大差異。還不能忘記綁定事件處理器。沒有穩定的語​​法提案，這些程式碼非常冗餘。大家可以很理解 props，state 和自頂向下的資料流，但對 class 卻一籌莫展。即便在有經驗的 React 開發者之間，對於函數元件與 class 元件的差異也存在分歧，甚至區分兩種元件的使用場景。

為了解決這些問題，Hook 讓你在非 class 的情況下可以使用更多的 React 特性。從概念上講，React 元件一直更像是函數。而 Hook 則擁抱了函數，同時也沒有犧牲 React 的精神原則。 Hook 提供了問題的解決方案，無需學習複雜的函數式或響應式程式設計技術

推薦學習：《react影片教學》

以上是react中hooks解決了什麼問題的詳細內容。更多資訊請關注PHP中文網其他相關文章！