react中hooks解決的問題有哪些

這篇文章主要介紹“react中hooks解決的問題有哪些”，在日常操作中，相信很多人在react中hooks解決的問題有哪些問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”react中hooks解決的問題有哪些”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！

解決的問題：1、從組件中提取狀態(tài)邏輯，解決了在組件之間復(fù)用狀態(tài)邏輯很難的問題；2、將組件中相互關(guān)聯(lián)的部分拆分成更小的函數(shù)，解決了復(fù)雜組件的問題；3、在非class的情況下使用更多的React特性，解決了class組件與函數(shù)組件有差異的問題。

本教程操作環(huán)境：Windows10系統(tǒng)、react17.0.1版、Dell G3電腦。

react中hooks解決了什么問題

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

React 沒有提供將可復(fù)用性行為“附加”到組件的途徑（例如，把組件連接到 store）解決此類問題可以使用 render props 和 高階組件。但是這類方案需要重新組織組件結(jié)構(gòu)，這可能會很麻煩，并且會使代碼難以理解。由 providers，consumers，高階組件，render props 等其他抽象層組成的組件會形成“嵌套地獄”。盡管可以在 DevTools 過濾掉它們，但這說明了一個更深層次的問題：React 需要為共享狀態(tài)邏輯提供更好的原生途徑。

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

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

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

在多數(shù)情況下，不可能將組件拆分為更小的粒度，因為狀態(tài)邏輯無處不在。這也給測試帶來了一定挑戰(zhàn)。同時，這也是很多人將 React 與狀態(tài)管理庫結(jié)合使用的原因之一。但是，這往往會引入了很多抽象概念，需要你在不同的文件之間來回切換，使得復(fù)用變得更加困難。

為了解決這個問題，Hook 將組件中相互關(guān)聯(lián)的部分拆分成更小的函數(shù)（比如設(shè)置訂閱或請求數(shù)據(jù)），而并非強制按照生命周期劃分。你還可以使用 reducer 來管理組件的內(nèi)部狀態(tài)，使其更加可預(yù)測。

3、難以理解的 class

除了代碼復(fù)用和代碼管理會遇到困難外，class 是學習 React 的一大屏障。我們必須去理解 JavaScript 中 this 的工作方式，這與其他語言存在巨大差異。還不能忘記綁定事件處理器。沒有穩(wěn)定的語法提案，這些代碼非常冗余。大家可以很好地理解 props，state 和自頂向下的數(shù)據(jù)流，但對 class 卻一籌莫展。即便在有經(jīng)驗的 React 開發(fā)者之間，對于函數(shù)組件與 class 組件的差異也存在分歧，甚至還要區(qū)分兩種組件的使用場景。

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

到此，關(guān)于“react中hooks解決的問題有哪些”的學習就結(jié)束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續(xù)學習更多相關(guān)知識，請繼續(xù)關(guān)注億速云網(wǎng)站，小編會繼續(xù)努力為大家?guī)砀鄬嵱玫奈恼拢?/p>