"Hooks 到底是個啥玩意兒？？？"
你是不是有這樣的疑惑？在你自認為已經了解了差不多 React 所有的內容的時候，Hooks 就這么出現了。
這就是前端開發人員的日常，技術從未停止更新。
學習新東西是一件很棒的事情嗎？當然是！但有的時候我們又不得不思考：”為什么要學它？這個新東西有啥意義？我是必須得學他嗎？“。
針對 Hooks 而言，上面的這個問題答案是否定的，你不需要立馬就學它。如果您一直在使用 React，并且迄今為止一直在使用基于類的組件，那么就不必急于轉向 Hooks。Hooks 是可選的，可以與現有組件配合使用。我相信當你因為要使用新東西而不得不重寫整個代碼庫，你整個人都是崩潰的。
在函數組件中使用狀態
在使用 Hooks 之前，我們不能在函數組件中使用狀態。這就意味著，如果您有一個經過精心設計和測試的函數組件，突然需要存儲狀態，那么你就不得不把他重構為一個類組件。
牛逼的來了，Hooks 讓函數組件也能使用狀態，就意味著我們不需要重構之前自己的寫的代碼，可以點擊這篇文章查看更多。
類組件很笨重
我們不得不承認的是，類組件附帶了太多的東西。constructor，binding，“this”無處不在。使用函數組件可以消除許多這種情況，能讓我們的代碼更容易維護。
可以在React文檔中了解更多相關內容
更高的可讀性
由于 Hooks 允許我們在函數組件中使用狀態，因此和類組件相比，這意味同樣的功能，我們寫出來的代碼會更好。 這也會讓我們的代碼更具可讀性。 我們再也不用擔心方法是不是綁定了 this，也不必記住 this 之間的關系等等。 我們可以專心寫代碼了。
React State Hook
狀態，是React生態系統的基礎。接下來我將通過介紹最常見的 Hook —— useState() 來讓大家初步了解 Hooks。
我們先來看一下具有狀態的類組件。
import React, { Component } from 'react';
import './styles.css';
class Counter extends Component {
state = {
count: this.props.initialValue,
};
setCount = () => {
this.setState({ count: this.state.count + 1 });
};
render() {
return (
<div>
<h2>This is a counter using a class</h2>
<h1>{this.state.count}</h1>
<button onClick={this.setCount}>Click to Increment</button>
</div>
);
}
}
export default Counter;
有了React Hooks 之后，我們可以重寫這個類組件并刪除很多內容，使其更易理解
import React, { useState } from 'react';
function CounterWithHooks(props) {
const [count, setCount] = useState(props.initialValue);
return (
<div>
<h2>This is a counter using hooks</h2>
<h1>{count}</h1>
<button onClick={() => setCount(count + 1)}>Click to Increment</button>
</div>
);
}
export default CounterWithHooks;
代碼變少了，但這到底是啥情況呢？
React State Syntax
在上面的代碼里，我們已經用到了人生中第一個 React Hook
const [count, setCount] = useState();
簡單來講，這里使用了數組的結構賦值。
useState() 函數為我們提供了兩個東西:
* 一個保存狀態值的變量，在本例中稱為count;
* 一個更改值的函數，在本例中稱為setCount。
當然，你可以為這兩個東西起任何你想要的名字。
const [myCount, setCount] = useState(0);
而且，你也可以在你的代碼中像使用正常變量/函數一樣去用它們。
function CounterWithHooks() {
const [count, setCount] = useState();
return (
<div>
<h2>This is a counter using hooks</h2>
<h1>{count}</h1>
<button onClick={() => setCount(count + 1)}>Click to Increment</button>
</div>
);
}
注意最上面的的useState Hook。 我們聲明、結構了2個東西：
- counter：是用來保存狀態的
- setCounter：是用來更改計數器變量的函數
往下看代碼，您會看到這一行：
<h1>{count}</h1>
這是一個使用 Hooks 變量的例子。在JSX中，我們將 count 變量放在 {} 中，然后作為JAVAScript執行它，最后將 count 的值將展示在頁面上。
我們來對照一下我們之前在類組件中使用狀態的方式：
<h1>{this.state.count}</h1>
你會發現，我們再也不需要關注 this 的使用了，這使我們的編碼工作變得更加輕松了。
比如，當你沒定義 {count} 的時候，VS Code編輯器直接就給你報警告了，你就更早的發現錯誤。 但是在運行代碼之前，VS Code 可不會知道 {this.state.count} 是不是定義了。
我們繼續往下看
<button onClick={() => setCount(count + 1)}>Click to Increment</button>
在這行代碼中，我們使用 setCount 函數來更改 count 變量。
單擊按鈕的時候，我們把 count 變量更新為1。由于狀態變化，因此會觸發視圖重新渲染，React 會用新的 count值為我們更新視圖。 真香！
那我怎么給數據一個初始值呢？
您可以通過給useState()傳遞參數來設置初始狀態。 可以是一個硬編碼的值：
const [count, setCount] = useState(0);
或者你也可以用 props 傳進來的值作為初始值：
const [count, setCount] = useState(props.initialValue);
不論你的props.initialValue是啥，都會賦值給 count 作為初始值。
總結一下：useState 最爽的地方在于，你可以像使用正常變量、函數一樣處理你的狀態。
那如果我有多個狀態數據咋辦?
這是就是Hooks另外一個牛逼的地方了，在組件里，useState你想用多少次，就用多少次：
const [count, setCount] = useState(props.initialValue);
const [title, setTitle] = useState("This is my title");
const [age, setAge] = useState(25);
如你所見，我們現在有3個獨立的狀態對象。例如，如果我們想更新年齡，只需調用setAge()函數。count和title也是一樣。我們不再受制于舊的笨重的類組件方式——用setState()來管理一個超大的狀態對象.
this.setState({ count: props.initialValue, title: "This is my title", age: 25 })
那數據更新的時候，我要做一些事情怎么做？
在使用函數組件 + React Hooks 這種模式下，我們再也不用去管什么生命周期了，什么 componentDidMount、componentDidUpdate都可以統統見鬼去了。
你可能會問，那我用啥？？？別慌，兄弟！ React 給我們提供了另外一個鉤子來干這事兒。
useEffect
效果鉤子 useEffect 是我們處理“副作用”的地方。
呃,副作用？那是啥?
副作用
那我們就先偏離一下正題，討論一下副作用到底是什么。這有助于我們理解 useEffect() 的作用以及為什么他很有用。
一個你看不懂的無聊的正規解釋應該是：
? “在編程中，副作用是指在程序處理過程改變了程序范圍之外的變量”
用 React 術語來說，副作用其實意味著“當組件的變量或狀態因某些外部事物而改變”。 例如：
- 組件接受了一個改變組件本身狀態的props
- 當組件進行接口調用并在接口返回結果是執行了某些操作（例如，更改了組件的狀態）
那么為什么稱之為副作用呢？
我們不能確定這些代碼的執行結果是什么。 我們永遠無法百分百確定我們的組件會接收到什么樣的 props，也無法確定接口調用返回的結果數據是什么。 而且，我們無法確定這將如何影響我們的組件。
當然，我們也可以編寫代碼校驗、處理錯誤等，但是我們最終還是不能確定這樣的事情帶來的副作用是什么。
所以可以這么說，當組件的狀態因為一些外界因素改變的時候，這就可以稱作副作用。
好了，我們可以回正題了。繼續來看useEffect這個Hook。
在使用函數組件時，我們不再使用生命周期鉤子函數，例如 componentDidMount，componentDidUpdate等。因此，可以這么說，useEffect Hook 代替了之前我們用到的React鉤子函數。
讓我們比較一下基于類的組件和useEffect Hooks的使用方式
import React, { Component } from 'react';
class App extends Component {
componentDidMount() {
console.log('I have just mounted!');
}
render() {
return <div>Insert JSX here</div>;
}
}
用了useEffect之后
function App() {
useEffect(() => {
console.log('I have just mounted!');
});
return <div>Insert JSX here</div>;
}
在繼續往下之前，我們必須要知道一件事兒，在默認情況下，useEffect Hook 在每次渲染和重新渲染時都會執行。
因此，只要組件中的狀態發生變化或組件收到新的props時，組件都會重新渲染并導致`useEffect Hook 再次運行。
能不能只執行一次useEffect (就像 componentDidMount 一樣)
如果 useEffect Hook 在組件每次渲染時都運行，那么我們怎么才能做到 Hook 在掛載組件時僅運行一次？
例如，如果組件從接口獲取數據，我們肯定不希望每次重新渲染組件時都去重新請求下數據吧？
useEffect() 鉤子接受第二個參數，是一個數組，其中包含導致 useEffect 鉤子運行的依賴項的列表。當這些依賴項更改時，它將觸發 Effect Hook。如果想要只運行一次 Effect Hook，那直接給他傳遞一個空數組，就OK啦！！
useEffect(() => {
console.log('This only runs once');
}, []);
這就意味著 useEffect Hook 將在第一次渲染時正常運行。然而，當你的組件重新渲染時，useEffect 會想 “好吧，我已經運行了，數組中啥也沒有，我沒啥依賴項，誰變都跟我沒關系了，所以我不必再運行了。” 然后就什么也不做了。
總結： 空數組就意味著useEffect Hook只在掛載時運行一次
當有內容更新時使用effect (就像componentDidUpdate一樣)
我們已經介紹了如何確保 useEffect Hook僅運行一次，但是當我們的組件收到新的 props 時該怎么辦？ 或者我們要在狀態更改時運行一些代碼？ 其實Hooks 也能處理！
useEffect(() => {
console.log("The name props has changed!")
}, [props.name]);
請注意，這次我們如何將東西傳遞給useEffect數組的，props.name。
在這種情況下，useEffect Hook 將像往常一樣在首次加載時運行。 每當您的組件從其父組件收到新的props.name時，都會觸發useEffect Hook，并且運行其中的代碼。
我們也可以使用狀態變量來做同樣的事情：
const [name, setName] = useState("Chris");
useEffect(() => {
console.log("The name state variable has changed!");
}, [name]);
每當name發生變化時，組件就會重新渲染 ，useEffect Hook 就會運行并輸出消息。而且因為這是一個數組，我們其實可以向它添加多個東西：
const [name, setName] = useState("Chris");
useEffect(() => {
console.log("Something has changed!");
}, [name, props.name]);
這樣，當 name 狀態變量更改或 props.name 更改時，useEffect Hook 都將運行并顯示控制臺消息。
那我們能用componentWillUnmount嗎？
想要在組件即將卸載時運行一個Hook，我們只需從useEffect Hook 返回一個函數
useEffect(() => {
console.log('running effect');
return () => {
console.log('unmounting');
};
});
那我們可以多個不同的 Hooks 一起使用嗎？
當然! 你可以在組件中使用任意數量的Hooks，并根據需要混合使用
function App = () => {
const [name, setName] = useState();
const [age, setAge] = useState();
useEffect(()=>{
console.log("component has changed");
}, [name, age])
return(
<div>Some jsx here...<div>
)
}
小結- 接下來干啥呢？
你這不已經學會React Hooks了么，Hooks允許我們使用老式的JavaScript函數來創建更簡單的React組件，并減少大量代碼。
接下來，手不癢癢么？當然是自己趕緊動手拿Hooks做項目體驗去啊！
