react中hooks解決的問題有哪些

這篇文章主要介紹“react中hooks解決的問題有哪些”，在日常操作中，相信很多人在react中hooks解決的問題有哪些問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”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中hooks解決的問題有哪些”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！