1. why hooks?

React沒有提供將可重用行為“附加”到組件的方法（例如，將其連接到store）。如果你已經(jīng)使用React一段時間，你可能熟悉渲染道具和高階組件等模式，試圖解決這個問題。但是這些模式要求你在使用它們時重構(gòu)組件，這可能很麻煩并且使代碼更難以遵循。如果你看一下React DevTools中一個典型的React應(yīng)用程序，你可能會發(fā)現(xiàn)一個由包含提供者，消費(fèi)者，高階組件，渲染道具和其他抽象層的組件組成的“包裝器地獄”。雖然我們可以在DevTools中過濾它們，但這指出了一個更深層次的基本問題：React需要一個更好的原語來共享有狀態(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)一為單個API。(我們將在使用Effect Hook時顯示將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時，你就在告訴react運(yùn)行你的‘效果’函數(shù)當(dāng)刷新對DOM的更改后(你可以認(rèn)為是render之后)。

效果在組件內(nèi)聲明，因此可以訪問其props和state。默認(rèn)情況下，React在每次渲染后運(yùn)行效果 - 包括第一次渲染。?

Effects還可以通過指定返回函數(shù)來清理他們。