Hooks在React 16.8版本中正式被引入，它可以讓你在不用寫class的條件下使用state以及其他的React特性，
const fn = () => {
const [count, setCount] = useState(0)
return (
<div>
<p>{count}</p>
<button onClick={() => setCount(count++)}>
點擊我
</button>
</div>
)
}這個useState的新方法是我們第一個要學的Hook，但這個例子僅僅是開胃菜，如果覺得這個例子沒有意義暫時先不要擔心，
React 16.8.0是支持Hooks的第一個發行版本，當升級的時候不要忘了把包含React DOM的整個包都升級，React Native將在下一個穩定發行版本中支持Hooks，
https://react.docschina.org/docs/hooks-intro.html
Hooks不包含突破性變化
在繼續之前，我們應該知道Hooks是
-
完全可選的，你可以在完全不重寫既有代碼的情況下嘗試使用Hooks，如果你暫時不考慮Hooks，也不需要學習和使用它，
-
100%向后兼容，Hooks不包含任何突破性變化，
-
目前已經可用了，在React 16.8.0中已經被引入，
沒有計劃把class從React中移除，
Hooks不會影響到你對React概念的任何理解，相反，Hooks對你已知的React概念比如props，state，context，refs以及生命周期回呼提供了更直接的API，稍后我們會演示，同時Hooks提供了結合這些概念的強大方法，
創建Hooks的動力
Hooks解決了過去五年中我們在撰寫和維護數以萬計的組件時所遇到的問題，無論你目前是正在學習React，還是已經日常使用它，或者更喜愛其他相似的組件框架，你都會遇到這些問題：
在組件之間復用有狀態的邏輯很困難，
React沒有提供一種可復用的把行為附在組件上(比如連接到一個store上)的方法，如果你對React略有經驗，你可能對render props和高階組件模式有所感知，但是這些模式需要你在使用的時候重新組織組件，這可能使得代碼笨重并難以維護，如果你在React DevTools里查看React應用，你會發現一種"wrapper地獄"的現象——組件被provider，consumer，高階組件等重重包裹，這些都指向了一個更深層次的問題——React需要一個共享有狀態邏輯的原生能力，
通過Hooks，你可以把有狀態邏輯從一個組件里抽取出來，從而它可以被復用以及單獨測驗，Hooks使得你可以在不更改組件層級的條件下復用原有狀態邏輯，這樣在多個組件之間以及社區之間共享Hooks就很容易了，
復雜組件變得難以理解
我們經常發現一開始組件總是簡單并容易理解，但隨之衍生出各種無法掌控的有狀態邏輯以及副作用，難以維護，每一個生命周期回呼方法都包含了一堆無關聯的邏輯，比如，組件可能在componentDidMount和componentDidUpdate里去獲取資料，但componentDidMound里還可能包含了一些建立監聽的不相關的邏輯，同樣在componentWillUnMount里也執行了清理動作，相互關聯的代碼被拆分到不同的地方，而不關聯的代碼又被結合到同一個方法里，最終很容易引入bug和不一致性，
很多場景下不太可能把這些組件拆分得更細，因為有狀態邏輯遍布各處，同時要進行測驗也很麻煩，這是許多人喜歡使用獨立狀態管理庫的原因之一，但往往會引入太多的抽象，需要你在不同的檔案之間跳來跳去，復用組件就更困難了，
Hooks允許你在關聯的內容的基礎上(比如建立監聽或者獲取資料)把一個組件拆成多個更小的方法，而不是在生命周期方法里糅合不同的邏輯代碼，你也可以通過一個reducer來管理組件的內部state，使得它具備更高的可預見性，
Class會引起困惑
我們發現class語法不僅使得代碼復用和組織困難，還是學習React的一個巨大障礙，你必須理解this關鍵詞在JavaScript里如何作業，你還必須在事件處理方法中系結this，沒有可靠的語法提示，代碼十分冗長，開發者盡管能很好理解prosp，state，以及自頂向下的資料流動，但還是對class難以駕馭，在React里何時使用function組件還是class組件在有經驗的React開發者中也引起巨大的爭議，
漸進策略
沒有從React中移除class的計劃
我們知道React開發者聚焦于交付產品，沒空去看每一個新發布的API，Hooks很新，在決定學習引入之前最好等待更多的案例和教程，
我們也理解在React增加原生的特性門檻很高，對于有好奇心的讀者，我們準備了這篇來深入更多的細節以及提供額外的設計決策上的洞察，
關鍵是，Hooks能和現有代碼無縫連接作業，使得你能逐步引入使用，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/401664.html
標籤：其他
上一篇：【JavaScript】＜檔案物件模型DOM＞DOM概述&事件
下一篇：走進前端——HTML(1)