1. why hooks?
React沒有提供將可重用行為“附加”到組件的方法（例如，將其連接到store）专甩。如果你已經(jīng)使用React一段時(shí)間，你可能熟悉渲染道具和高階組件等模式晚伙，試圖解決這個(gè)問題响蓉。但是這些模式要求你在使用它們時(shí)重構(gòu)組件，這可能很麻煩并且使代碼更難以遵循鄙早。如果你看一下React DevTools中一個(gè)典型的React應(yīng)用程序汪茧，你可能會發(fā)現(xiàn)一個(gè)由包含提供者，消費(fèi)者限番，高階組件舱污，渲染道具和其他抽象層的組件組成的“包裝器地獄”。雖然我們可以在DevTools中過濾它們弥虐，但這指出了一個(gè)更深層次的基本問題：React需要一個(gè)更好的原語來共享有狀態(tài)邏輯扩灯。
使用Hook，你可以從組件中提取有狀態(tài)邏輯霜瘪，以便可以獨(dú)立測試并重用珠插。Hook允許您在不更改組件層次結(jié)構(gòu)的情況下重用有狀態(tài)邏輯。?這樣可以輕松地在許多組件之間或與社區(qū)共享Hook颖对。
2.what is react hooks捻撑？
hook是允許從功能組件(function component)“掛鉤”React狀態(tài)和生命周期功能的功能。鉤子在類內(nèi)部不起作用 - 它們允許你在沒有類（class）的情況下使用React。
React提供了一些像useState這樣的內(nèi)置Hook顾患。你還可以創(chuàng)建自定義Hook以在不同組件之間重用有狀態(tài)行為番捂。我們先來看看內(nèi)置的Hooks。
Effect Hook
你之前可能已經(jīng)從React組件執(zhí)行數(shù)據(jù)提取江解，訂閱或手動更改DOM设预。我們將這些操作稱為“副作用”（或簡稱為“效果”），因?yàn)樗鼈儠绊懫渌M件犁河，并且在渲染過程中無法完成鳖枕。
Effect Hook中的useEffect增加了在功能組件執(zhí)行副作用的功能。它與React類中的componentDidMount桨螺，componentDidUpdate和componentWillUnmount具有相同的用途宾符，但統(tǒng)一為單個(gè)API。(我們將在使用Effect Hook時(shí)顯示將useEffect與這些方法進(jìn)行比較的示例彭谁。）
import { useState, useEffect } from 'react';
?function Example() {
?????const [count, setCount] = useState(0);
?????// 類似componentDidMount 和 componentDidUpdate:
?????useEffect(() => {
?????????// Update the document title using the browser API
?????????document.title = `You clicked ${count} times`;
?????});
?????return ( <div>
?????????????????????<p>You clicked {count} times</p>
?????????????????????<button onClick={() => setCount(count + 1)}> Click me </button>
?????????????????</div> );
?}?
當(dāng)你調(diào)用useEffect時(shí)吸奴，你就在告訴react運(yùn)行你的‘效果’函數(shù)當(dāng)刷新對DOM的更改后(你可以認(rèn)為是render之后)。
效果在組件內(nèi)聲明缠局，因此可以訪問其props和state则奥。默認(rèn)情況下，React在每次渲染后運(yùn)行效果 - 包括第一次渲染狭园。?
Effects還可以通過指定返回函數(shù)來清理他們读处。
