簡介
Hook 是 React 16.8 的新增特性盗尸。它可以讓你在不編寫 class 的情況下使用 state 以及其他的 React 特性帽撑。
定義：
Hook 是一些可以讓你在函數(shù)組件里“鉤入” React state 及生命周期等特性的函數(shù)。
請記住Hook是：
- 完全可選的
- 100% 向后兼容的
Hook 不會影響你對 React 概念的理解
為什么要在React中引入Hook?
原因一：在組件之間復(fù)用狀態(tài)邏輯很難
原有解決方案：render props油狂、高階組件寸癌、providers专筷、consumers
缺點：
- 嵌套地獄
- 需要改變組件結(jié)構(gòu)
這說明了一個更深層次的問題：React 需要為共享狀態(tài)邏輯提供更好的原生途徑蒸苇。
原因二：復(fù)雜組件變得難以理解
- 我們經(jīng)常維護(hù)一些組件，組件起初很簡單溪烤，但是逐漸會被狀態(tài)邏輯和副作用充斥。
- 每個生命周期常常包含一些不相關(guān)的邏輯槽驶。
組件常常在 componentDidMount 和 componentDidUpdate 中獲取數(shù)據(jù)。但是掂铐，同一個 componentDidMount 中可能也包含很多其它的邏輯，如設(shè)置事件監(jiān)聽全陨，而之后需在 componentWillUnmount 中清除。相互關(guān)聯(lián)且需要對照修改的代碼被進(jìn)行了拆分辱姨，而完全不相關(guān)的代碼卻在同一個方法中組合在一起。如此很容易產(chǎn)生 bug枢舶，并且導(dǎo)致邏輯不一致替久。
原因三：難以理解的class組件
- 理解 JavaScript 中 this 的工作方式
- 還不能忘記綁定事件處理器
- 需區(qū)分class組件與函數(shù)組件的使用場景
- class 不能很好的壓縮，并且會使熱重載出現(xiàn)不穩(wěn)定的情況
Class 在作為 React 組件的載體時侣肄，是否真的合適呢？
- React 組件之間是不會互相繼承的稼锅。
- 因為所有 UI 都是由狀態(tài)驅(qū)動的，因此很少會在外部去調(diào)用一個類實例（即組件）的方法拗盒。要知道，組件的所有方法都是在內(nèi)部調(diào)用陡蝇，或者作為生命周期方法被自動調(diào)用的哮肚。
原因四：Hook出現(xiàn)前，函數(shù)式組件的局限：
函數(shù)組件無法存在內(nèi)部狀態(tài)允趟，必須是純函數(shù)，而且也無法提供完整的生命周期機(jī)制涣楷。這就極大限制了函數(shù)組件的大規(guī)模使用抗碰。
使用Hook的好處
好處一：簡化邏輯復(fù)用
- 從組件中提取狀態(tài)邏輯狮斗，使得這些邏輯可以單獨測試并復(fù)用弧蝇。
- 在無需修改組件結(jié)構(gòu)的情況下復(fù)用狀態(tài)邏輯迄汛。
好處二：有助于關(guān)注分離
- Class組件：代碼從技術(shù)角度組織在一起
在
componentDidMount中完成訂閱骤视，在componentWillUnmount中完成取消訂閱 - 函數(shù)組件 + Hook：代碼從業(yè)務(wù)角度組織在一起
在一個
useEffect中可以完成訂閱與取消訂閱的編碼
