一、矛與盾的問題？（Class組件與函數(shù)式組件）
??在 React 中 Class 組件好用還是函數(shù)式組件好用呢，各有各的說法，如果你一味的去說這個(gè)好還是另一個(gè)好，那么終歸還是太年輕啊。
??對此，我的建議是：把兩個(gè)都好好看看，各有千秋，如果你是領(lǐng)導(dǎo)你想用那個(gè)就用哪個(gè)，如果你是螺絲，領(lǐng)導(dǎo)讓你用哪個(gè)你就用哪個(gè)就行了。
Class組件優(yōu)缺點(diǎn)
- ??Class組件可以定義自己的state，用于保存內(nèi)部狀態(tài)
- ??Class組件有自己的生命周期，用于相關(guān)邏輯
- ??Class組件在改變狀態(tài)時(shí)，只會重新執(zhí)行render、componentDidUpdate更新函數(shù)
- ??隨著業(yè)務(wù)增多，Class組件越累越臃腫復(fù)雜
- ??難以理解的Class、this綁定等
- ??組件的狀態(tài)復(fù)用比較困難
函數(shù)式組件優(yōu)缺點(diǎn)
- ??語法上更加簡潔，易于理解
- ??不再需要考慮this的問題
- ??性能消耗小，不需要創(chuàng)建實(shí)例
- ??不能保存狀態(tài)，每次調(diào)用函數(shù)都會產(chǎn)生新的臨時(shí)變量
- ??沒有生命周期，重新渲染時(shí)，整個(gè)函數(shù)都會被執(zhí)行（函數(shù)中發(fā)送網(wǎng)絡(luò)請求，意味著每次重新渲染都會發(fā)送一次新的網(wǎng)絡(luò)請求）
對于上面 函數(shù)式組件 這些情況， 我們通常都會編寫 Class組件，直到 Hooks 的出現(xiàn)
- ??Hooks的出現(xiàn)基本可以代替我們之前所有使用Class組件的地方
- ??它可以讓你在不編寫 Class 的情況下使用 state 以及其他的 React 特性??????????
- ??Hook只能在函數(shù)組件中使用，不能在類組件，或者函數(shù)組件之外的地方使用
二、Hooks使用規(guī)則
Hook使用規(guī)則
- 1、只在最頂層使用 Hook。（不要在循環(huán)，條件或嵌套函數(shù)中調(diào)用 Hook）
- 2、只在 React 函數(shù)中調(diào)用 Hook。（不要在普通的 JavaScript 函數(shù)中調(diào)用 Hook）
- 具體原因以后文檔會具體分析一下，或者直接去官網(wǎng)鏈接查看（面試常考）????????
三、基礎(chǔ)Hooks的使用
3.1、State Hook
- 認(rèn)識useState
- 調(diào)用：useState會幫助我們定義一個(gè)state變量，它與class里面的this.state提供的功能完全相同
- 傳參：useState接收唯一的參數(shù)就是初始 state，在第一次組件被調(diào)用時(shí)使用來作為初始化值（如果沒有則為undefine）
- 返回值：useState返回值是一個(gè)數(shù)組，可以通過數(shù)組的解構(gòu)來拿到值
使用場景：
如果你在編寫函數(shù)組件并意識到需要向其添加一些 state，以前的做法是必須將其轉(zhuǎn)化為 class?，F(xiàn)在你可以在現(xiàn)有的函數(shù)組件中使用 Hook
- useState的初使用
import React, {useState} from 'react';
export default function CounterHook() {
/**
* Hook：useState
*
* 本身是一個(gè)函數(shù)，來自react包
*
* 1、參數(shù)：作用是給創(chuàng)建出來的狀態(tài)一個(gè)默認(rèn)值
* 2、返回值：元素1（當(dāng)前count的值）、元素2（設(shè)置新的值時(shí)，使用的一個(gè)函數(shù)）
*/
const [count, setCount] = useState(0);
return (
<div>
<h2>當(dāng)前計(jì)數(shù)：{count}</h2>
<button onClick={e => setCount(count + 1)}>+1</button>
<button onClick={e => setCount(count - 1)}>-1</button>
</div>
);
}
useState的初使用
- useState中使用多個(gè)復(fù)雜變量
import React, {useState} from 'react';
export default function MultipleState() {
const [friends, setFriends] = useState(['li', 'zhi']);
const [students, setStudents] = useState([
{id: 110, name: 'li', age: 18},
{id: 111, name: 'zhi', age: 19},
{id: 112, name: 'qiang', age: 20},
]);
function incrementAgeWithIndex(index) {
const newStudents = [...students];
newStudents[index].age += 1;
setStudents(newStudents);
}
return (
<div>
<h2>好友列表：</h2>
<ul>
{
friends.map((item, index) => {
return <li key={index}>{item}</li>
})
}
</ul>
<button onClick={e => setFriends([...friends, 'qiang'])}>添加朋友</button>
<h2>學(xué)生列表</h2>
<ul>
{
students.map((item, index) => {
return (
<li key={item.id}>
<span>名字：{item.name}, 年齡：{item.age}</span>
<button onClick={e => incrementAgeWithIndex(index)}>age+1</button>
</li>
);
})
}
</ul>
</div>
);
}
useState中使用多個(gè)復(fù)雜變量
-
3.2、Effect Hook
- 認(rèn)識 useEffect
- useEffect 可以完成一些類似于Class生命周期的功能
- 把 useEffect 看做Class組件中 componentDidMount，componentDidUpdate 和 componentWillUnmount 這三個(gè)函數(shù)的組合
使用場景
- 一般用于網(wǎng)絡(luò)請求、DOM手動更新、事件監(jiān)聽等
- useEffect的初使用
import React, {useState, useEffect} from 'react';
export default function ChangeTitleHook() {
const [counter, setCounter] = useState(0);
useEffect(() => {
document.title = counter;
})
return (
<div>
<h2>當(dāng)前計(jì)數(shù)：{counter}</h2>
<button onClick={e => setCounter(counter + 1)}>+1</button>
</div>
);
}
useEffect的初使用
- 函數(shù)清除
Class 組件中，通常會在 componentDidMount 中設(shè)置訂閱，并在 componentWillUnmount 中清除它，下面介紹一下在 useEffect 中如何清除
import React, {useEffect, useState} from 'react';
function DispatchEffectHook() {
const [counter, setCounter] = useState(0);
useEffect(() => {
console.log('訂閱');
// 如果外部將此組件清除，會調(diào)用內(nèi)部函數(shù)，取消訂閱
return () => {
console.log('取消訂閱');
}
}, []);
return (
<div>
<h2>DispatchEffectHook</h2>
<h2>{counter}</h2>
<button onClick={e => setCounter(counter + 1)}>+1</button>
</div>
);
}
export default DispatchEffectHook;
- 性能優(yōu)化：通過跳過 Effect 進(jìn)行性能優(yōu)化
import React, {useEffect, useState} from 'react';
function MultiEffectHook() {
const [counter, setCounter] = useState(0);
/**
* 參數(shù)二：[counter]
*
* 表示僅在 counter 更改時(shí)更新
*/
useEffect(() => {
console.log('修改dom', counter);
}, [counter]);
/**
* 如果想執(zhí)行只運(yùn)行一次的 effect（僅在組件掛載和卸載時(shí)執(zhí)行），可以傳遞一個(gè)空數(shù)組（[]）作為第二個(gè)參數(shù)。
*
* 這就告訴 React 你的 effect 不依賴于 props 或 state 中的任何值，所以它永遠(yuǎn)都不需要重復(fù)執(zhí)行。
*/
useEffect(() => {
console.log('網(wǎng)絡(luò)請求');
}, []);
return (
<div>
<h2>DispatchEffectHook</h2>
<h2>{counter}</h2>
<button onClick={e => setCounter(counter + 1)}>+1</button>
</div>
);
}
export default MultiEffectHook;
四、自定義HOOK
- 本質(zhì)將函數(shù)之間一些共同的代碼提取到單獨(dú)的函數(shù)中，而不是React新特性
- 自定義 Hook 是一個(gè)函數(shù)，其名稱必須以 “use” 開頭，函數(shù)內(nèi)部可以調(diào)用其他的 Hook
import React, {useEffect} from 'react';
const Home = (props) => {
useLoggingLife('Home');
return <h2>Home</h2>
}
const Profile = (props) => {
useLoggingLife('Profile');
return <h2>Profile</h2>
}
function CustomerLifeHookDemo01() {
useLoggingLife('CustomerLifeHookDemo01');
return (
<div>
<Home/>
<Profile/>
</div>
);
}
/**
* 自定義hook必須以use開頭
* @param name
*/
function useLoggingLife(name) {
useEffect(() => {
console.log(`${name}組件被創(chuàng)建`);
return () => {
console.log(`${name}組件被銷毀`);
}
}, []);
}
export default CustomerLifeHookDemo01;
五、useReducer
- 放到后期的Redux中講解
六、深入拓展（待更新）
參考文章
- React官網(wǎng)-Hook
- 《小碼哥-React視頻》
- 30分鐘精通React Hooks
