作為一個(gè)用慣了Class俭厚、用慣了生命周期開發(fā)的前端老鳥，接觸到React Hook的心情是這樣的
真的有趣又神奇驶臊！
而且挪挤，它還很簡(jiǎn)單。有了它关翎，我們可以省略很多的代碼扛门，簡(jiǎn)化很多的邏輯，給我的感覺纵寝，它就是一個(gè)帶有狀態(tài)和生命周期的加強(qiáng)版的公共方法论寨。當(dāng)然這是個(gè)人感覺，我們還需要知道官方給它的定義爽茴，即
Hook 是 React 16.8 的新增特性葬凳。它可以讓你在不編寫 class 的情況下使用 state 以及其他的 React 特性。
一室奏、組件類的缺陷
關(guān)于組件類的缺陷火焰，官網(wǎng)已明確給出3個(gè)，即
- 組件之間復(fù)用狀態(tài)邏輯很難
- 復(fù)雜組件變得難以理解
- 難以理解的class
當(dāng)然胧沫，這樣太抽象昌简，我們看一個(gè)具體的例子，來直觀地感受一下它的好琳袄。
如果我們需要寫一個(gè)計(jì)數(shù)器的組件類江场，原先我們會(huì)這樣寫
import React from 'react'
class Example extends React.Component {
constructor(props) {
super(props);
this.state = {
count: 0
};
}
render() {
return (
<div>
<p>You clicked {this.state.count} times</p>
<button onClick={() => this.setState({ count: this.state.count + 1 })}>
Click me
</button>
</div>
);
}
}
export default Example
而現(xiàn)在我們只需要這樣寫
import React, { useState } from 'react';
function Example() {
// 聲明一個(gè)叫 "count" 的 state 變量
const [count, setCount] = useState(0);
return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>
Click me
</button>
</div>
);
}
export default Example
哇哦，如此簡(jiǎn)單窖逗。這還只是一個(gè)極其簡(jiǎn)單的組件址否，如果是一個(gè)比較復(fù)雜的組件，可想而知，我們會(huì)精簡(jiǎn)多少代碼佑附，就好像一個(gè)負(fù)重前行的人樊诺，扔掉了一堆無用的東西，開始輕裝簡(jiǎn)行音同，走得更快词爬，更瀟灑了。
so,這么好的東西权均，就讓我們見識(shí)一下它的具體用法吧顿膨。
二、常用鉤子
- useState()
- useEffect()
以上叽赊，是我們最常用的鉤子恋沃，下面我們來一一介紹
三、 useState() 狀態(tài)鉤子
還是計(jì)數(shù)器的例子
import React, { useState } from 'react';
function Example() {
// 聲明一個(gè)叫 "count" 的 state 變量
const [count, setCount] = useState(0);
return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>
Click me
</button>
</div>
);
}
export default Example
做了什么: 可以看到必指，useState為我們定義了一個(gè)叫做count的'state變量'囊咏。
參數(shù)： useState的唯一參數(shù)，就是初始state塔橡。不同于 class 的是梅割，我們可以按照需要使用數(shù)字或字符串對(duì)其進(jìn)行賦值，而不一定是對(duì)象葛家。
返回值: 當(dāng)前 state 以及更新 state 的函數(shù)户辞。
如果，你想定義多個(gè)state惦银，那就多次使用useState就可以了咆课，就像這樣
const [age, setAge] = useState(42);
const [fruit, setFruit] = useState('banana');
const [todos, setTodos] = useState([{ text: '學(xué)習(xí) Hook' }]);
四、 useEffect() 副作用鉤子
ok扯俱，現(xiàn)在我們可以使用state,然后书蚪，不可避免地，我們還需要做一些其他操作迅栅，比如更改dom,發(fā)送網(wǎng)絡(luò)請(qǐng)求等殊校，這樣我們?cè)撊绾巫瞿兀?/p>
import React, { useState, useEffect } from 'react';
function Example() {
const [count, setCount] = useState(0);
// Similar to componentDidMount and 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>
);
}
export default Example
像這樣，我們將dom操作放進(jìn)useEffect鉤子里读存，就可以了为流。我們?nèi)匀粡娜齻€(gè)方面來剖析一下
做了什么:通過使用這個(gè) Hook，你可以告訴 React 組件需要在渲染后執(zhí)行某些操作让簿。React 會(huì)保存你傳遞的函數(shù)（我們將它稱之為 “effect”）敬察，并且在執(zhí)行 DOM 更新之后調(diào)用它。
為什么在組件內(nèi)部調(diào)用 useEffect尔当？:將 useEffect 放在組件內(nèi)部讓我們可以在 effect 中直接訪問 count state 變量（或其他 props）莲祸。我們不需要特殊的 API 來讀取它 —— 它已經(jīng)保存在函數(shù)作用域中。Hook 使用了 JavaScript 的閉包機(jī)制，而不用在 JavaScript 已經(jīng)提供了解決方案的情況下锐帜，還引入特定的 React API田盈。
useEffect 會(huì)在每次渲染后都執(zhí)行嗎？: 是的缴阎，默認(rèn)情況下允瞧，它在第一次渲染之后和每次更新之后都會(huì)執(zhí)行。
ok,學(xué)習(xí)到這里蛮拔，希望大家應(yīng)該對(duì)React Hook有了初步的印象述暂，你可以把他拆分成兩部分 狀態(tài) + 副作用(代碼邏輯) 去理解。
既然是初識(shí)建炫，就求個(gè)簡(jiǎn)單明了贸典。有機(jī)會(huì)再給大家?guī)鞨ook的更多玩法啦~~~
