hooks函數(shù)是什么？怎么用？

更新時間:2020-07-27 來源:黑馬程序員瀏覽量:

"Hooks到底是個啥玩意兒???"

你是不是有這樣的疑惑?在你自認(rèn)為已經(jīng)了解了差不多 React 所有的內(nèi)容的時候，Hooks 就這么出現(xiàn)了。

這就是前端開發(fā)人員的日常，技術(shù)從未停止更新。

學(xué)習(xí)新東西是一件很棒的事情嗎?當(dāng)然是!但有的時候我們又不得不思考：”為什么要學(xué)它?這個新東西有啥意義?我是必須得學(xué)他嗎?“。

針對Hooks而言，上面的這個問題答案是否定的，你不需要立馬就學(xué)它。如果您一直在使用 React，并且迄今為止一直在使用基于類的組件，那么就不必急于轉(zhuǎn)向 Hooks。Hooks 是可選的，可以與現(xiàn)有組件配合使用。我相信當(dāng)你因?yàn)橐褂眯聳|西而不得不重寫整個代碼庫，你整個人都是崩潰的。

在函數(shù)組件中使用狀態(tài)

在使用 Hooks 之前，我們不能在函數(shù)組件中使用狀態(tài)。這就意味著，如果您有一個經(jīng)過精心設(shè)計(jì)和測試的函數(shù)組件，突然需要存儲狀態(tài)，那么你就不得不把他重構(gòu)為一個類組件。

牛逼的來了，Hooks 讓函數(shù)組件也能使用狀態(tài)，就意味著我們不需要重構(gòu)之前自己的寫的代碼，[可以點(diǎn)擊這篇文章查看更多]( https://scotch.io/courses/5-essential-react-concepts-to-know-before-learning-redux/presentational-and-container-component-pattern-in-react)。

類組件很笨重

我們不的不承認(rèn)的是，類組件附帶了太多的東西。constructor，binding，“this”無處不在。使用函數(shù)組件可以消除許多這種情況，能讓我們的代碼更容易維護(hù)。

可以在[React文檔中了解更多相關(guān)內(nèi)容](https://reactjs.org/docs/hooks-intro.html#classes-confuse-both-people-and-machines)

更高的可讀性

由于 Hooks 允許我們在函數(shù)組件中使用狀態(tài)，因此和類組件相比，這意味同樣的功能，我們寫出來的代碼會更好。這也會讓我們的代碼更具可讀性。我們再也不用擔(dān)心方法是不是綁定了 `this`，也不必記住 `this` 之間的關(guān)系等等。我們可以專心寫代碼了。

React State Hook

狀態(tài)，是React生態(tài)系統(tǒng)的基礎(chǔ)。接下來我將通過介紹最常見的 Hook —— `useState()` 來讓大家初步了解 Hooks。

我們先來看一下具有狀態(tài)的類組件。

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 之后，我們可以重寫這個類組件并刪除很多內(nèi)容，使其更易理解

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

在上面的代碼里，我們已經(jīng)用到了人生中第一個 React Hook

const [count, setCount] = useState();

簡單來講，這里使用了數(shù)組的結(jié)構(gòu)賦值。

useState()函數(shù)為我們提供了兩個東西：

* 一個保存狀態(tài)值的變量，在本例中稱為count;

* 一個更改值的函數(shù)，在本例中稱為setCount。

當(dāng)然，你可以為這兩個東西起任何你想要的名字。

const [myCount, setCount] = useState(0);

而且，你也可以在你的代碼中像使用正常變量/函數(shù)一樣去用他們。

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。我們聲明、結(jié)構(gòu)了2個東西：

* counter：是用來保存狀態(tài)的

* setCounter：是用來更改計(jì)數(shù)器變量的函數(shù)

往下看代碼，您會看到這一行：

<h1>{count}</h1>

這是一個使用 Hooks 變量的例子。在JSX中，我們將 `count` 變量放在 `{}` 中，然后作為JavaScript執(zhí)行它，最后將 `count` 的值將展示在頁面上。

我們來對照一下我們之前在類組件中使用狀態(tài)的方式：

<h1>{this.state.count}</h1>

你會發(fā)現(xiàn)，我么再也不需要關(guān)注 `this` 的使用了，這使我們的編碼工作變得更加輕松了。

比如，當(dāng)你沒定義 {count}的時候，VS Code編輯器直接就給你報警告了，你就更早的發(fā)現(xiàn)錯誤。但是在運(yùn)行代碼之前，VS Code 可不會知道 {this.state.count} 是不是定義了。

我們繼續(xù)往下看

<button onClick={() => setCount(count + 1)}>Click to Increment</button>

在這行代碼中，我們使用 setCount函數(shù)來更改 count變量。

單擊按鈕的時侯，我們把 count變量更新為1。由于狀態(tài)變化，因此會觸發(fā)視圖重新渲染，React 會用新的 count值為我們更新視圖。真香！

那我怎么給數(shù)據(jù)一個初始值呢？

您可以通過給`useState()`傳遞參數(shù)來設(shè)置初始狀態(tài)。可以是一個硬編碼的值：

const [count, setCount] = useState(0);

或者你也可以用 `props` 傳進(jìn)來的值作為初始值：

const [count, setCount] = useState(props.initialValue);

不論你的props.initialValue是啥，都會賦值給count作為初始值。

總結(jié)一下：useState最爽的地方在于，你可以像使用正常變量、函數(shù)一樣處理你的狀態(tài)。

那如果我有多個狀態(tài)數(shù)據(jù)咋辦?

這是就是Hooks另外一個牛逼的地方了，在組件里，`useState`你想用多少次，就用多少次：

const [count, setCount] = useState(props.initialValue);

const [title, setTitle] = useState("This is my title");

const [age, setAge] = useState(25);

如你所見，我們現(xiàn)在有3個獨(dú)立的狀態(tài)對象。例如，如果我們想更新年齡，只需調(diào)用`setAge()`函數(shù)。`count`和`title`也是一樣。我們不再受制于舊的笨重的類組件方式——用`setState()`來管理一個超大的狀態(tài)對象。

this.setState({ count: props.initialValue, title: "This is my title", age: 25 })

那數(shù)據(jù)更新的時候，我要做一些事情怎么做？

在使用函數(shù)組件 + React Hooks 這種模式下，我們再也不用去管什么生命周期了，什么 `componentDidMount`、`componentDidUpdate`都可以統(tǒng)統(tǒng)見鬼去了。

你可能會問，那我用啥？？？別慌，兄弟！ React 給我們提供了另外一個鉤子來干這事兒。

useEffect

效果鉤子useEffect是我們處理“副作用”的地方。

呃，副作用？那是啥？

副作用

那我們就先偏離一下正題，討論一下副作用到底是什么。這有助于我們理解 `useEffect()` 的作用以及為什么他很有用。

一個你看不懂的無聊的正規(guī)解釋應(yīng)該是：

“在編程中，副作用是指在程序處理過程改變了程序范圍之外的變量”。

用 React 術(shù)語來說，副作用其實(shí)意味著“當(dāng)組件的變量或狀態(tài)因某些外部事物而改變”。例如：

·組件接受了一個改變組件本身狀態(tài)的props

·當(dāng)組件進(jìn)行接口調(diào)用并在接口返回結(jié)果是執(zhí)行了某些操作（例如，更改了組件的狀態(tài)）

那么為什么稱之為副作用呢？

我們不能確定這些代碼的執(zhí)行結(jié)果是什么。我們永遠(yuǎn)無法百分百確定我們的組件會接收到什么樣的 `props `，也無法確定接口調(diào)用返回的結(jié)果數(shù)據(jù)是什么。而且，我們無法確定這將如何影響我們的組件。

當(dāng)然，我們也可以編寫代碼校驗(yàn)、處理錯誤等，但是我們最終還是不能確定這樣的事情帶來的副作用是什么。

所以可以這么說，當(dāng)組件的狀態(tài)因?yàn)橐恍┩饨缫蛩馗淖兊臅r候，這就可以稱作副作用。

好了，我們可以回正題了。繼續(xù)來看`useEffect`這個Hook。

在使用函數(shù)組件時，我們不再使用生命周期鉤子函數(shù)，例如 `componentDidMount`，`componentDidUpdate`等。因此，可以這么說，`useEffect` Hook 代替了之前我們用到的React鉤子函數(shù)。

讓我們比較一下基于類的組件和`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>;
}

在繼續(xù)往下之前，我們必須要知道一件事兒，在默認(rèn)情況下，`useEffect` Hook 在每次渲染和重新渲染時都會執(zhí)行。

因此，只要組件中的狀態(tài)發(fā)生變化或組件收到新的`props`時，組件都會重新渲染并導(dǎo)致`useEffect Hook 再次運(yùn)行。

能不能只執(zhí)行一次useEffect (就像 componentDidMount 一樣)

如果 `useEffect` Hook 在組件每次渲染時都運(yùn)行，那么我們怎么才能做到 Hook 在掛載組件時僅運(yùn)行一次？

例如，如果組件從接口獲取數(shù)據(jù)，我們肯定不希望每次重新渲染組件時都去重新請求下數(shù)據(jù)吧？

`useEffect()` 鉤子接受第二個參數(shù)，是一個數(shù)組，其中包含導(dǎo)致 `useEffect` 鉤子運(yùn)行的依賴項(xiàng)的列表。當(dāng)這些依賴項(xiàng)更改時，它將觸發(fā) Effect Hook。如果想要只運(yùn)行一次 Effect Hook，那直接給他傳遞一個空數(shù)組，就OK啦?。?br/>

useEffect(() => {
console.log('This only runs once');
}, []);

這就意味著 useEffect Hook 將在第一次渲染時正常運(yùn)行。然而，當(dāng)你的組件重新渲染時，useEffect 會想 “好吧，我已經(jīng)運(yùn)行了，數(shù)組中啥也沒有，我沒啥依賴項(xiàng)，誰變都跟我沒關(guān)系了，所以我不必再運(yùn)行了。” 然后就什么也不做了。

總結(jié)：空數(shù)組就意味著useEffect Hook只在掛載時運(yùn)行一次。