1.為什么用Hook？

① Hooks 提供了 useState Hook，使函數(shù)組件能夠擁有自己的內(nèi)部狀態(tài)。您可以使用 useState 來聲明和更新狀態(tài)變量，而不需要使用類組件中的 this.state 和 this.setState。

②通過 useEffect Hook，您可以在函數(shù)組件中處理副作用，比如訂閱數(shù)據(jù)、請(qǐng)求數(shù)據(jù)、操作 DOM 等。

③自定義 Hooks：Hooks 還支持創(chuàng)建自定義的可重用 Hooks，用于在多個(gè)組件之間共享邏輯。自定義 Hooks 將具體的邏輯抽象出來，使其在不同的組件中都能重復(fù)使用，提高了代碼的可維護(hù)性和重用性

2.使用State Hook

2.1 聲明State變量

在 class 中，我們通過在構(gòu)造函數(shù)中設(shè)置 this.state 為 { count: 0 } 來初始化 count state 為 0：

class Example extends React.Component {
?constructor(props) {
??super(props);
??this.state = {
???count: 0
?};
 }

在函數(shù)組件中，我們沒有 this，所以我們不能分配或讀取 this.state。我們直接在組件中調(diào)用 useState Hook：

import React, { useState } from 'react';

function Example() {
?// 聲明一個(gè)叫 “count” 的 state 變量
?const [count, setCount] = useState(0);
?console.log(count, setCount)
}

2.2使用多個(gè)state變量

將 state 變量聲明為一對(duì) [something, setSomething] 也很方便，因?yàn)槿绻覀兿胧褂枚鄠€(gè) state 變量，它允許我們給不同的 state 變量取不同的名稱：

function ExampleWithManyStates() {
?// 聲明多個(gè) state 變量
?const [age, setAge] = useState(42);
?const [fruit, setFruit] = useState('banana');
?const [todos, setTodos] = useState([{ text: '學(xué)習(xí) Hook' }]);

在以上組件中，我們有局部變量 age，fruit 和 todos，并且我們可以單獨(dú)更新它們：

?function handleOrangeClick() {
??// 和 this.setState({ fruit: 'orange' }) 類似
??setFruit('orange');
 }