React Hooks 學習筆記 | useEffect Hook（二）
大家好，上一篇文章我們學習了 State Hook 的基礎用法，還沒看的同學們，小編建議你先看下《 React Hooks 學習筆記 | State Hook（一）》這篇文章，今天我們一起來了解 useEffect Hook 的基礎用法。
一、開篇
一般大多數(shù)的組件都需要特殊的操作，比如獲取數(shù)據(jù)、監(jiān)聽數(shù)據(jù)變化或更改DOM的相關操作，這些操作被稱作 “side effects（副作用）”。
在類組件中，我們通常會在 componentDidMount 和 componentDidUpdate 這兩個常用的生命鉤子函數(shù)進行操作，這些生命周期的相關方法便于我們在合適的時機更加精確的控制組件的行為。
這有一個簡單的代碼示例，頁面加載完成后，更改頁面的標題
componentDidMount() {
document.title = this.state.name + " from " + this.state.location;
}
當你嘗試更改標題對應的狀態(tài)值時，頁面的標題不會發(fā)生任何變化，你還需要添加另一個生命周期的方法 componentDidUpdate() ，監(jiān)聽狀態(tài)值的變化重新re-render，示例代碼如下：
componentDidUpdate() {
document.title = this.state.name + " from " + this.state.location;
}
從上述代碼我們可以看出，要實現(xiàn)動態(tài)更改頁面標題的方法，我們需要調(diào)用兩個生命鉤子函數(shù)，同樣的方法寫兩遍。但是我們使用 useEffect Hook 函數(shù)，就能解決代碼重復的問題，示例代碼如下：
import React, { useState, useEffect } from "react";
//...
useEffect(() => {
document.title = name + " from " + location;
});
可以看出，使用 useEffect Hook ，我們就實現(xiàn)了兩個生命周期函數(shù)等效的目的，節(jié)省了代碼量。
二、添加清除功能
還有一個類組件的例子，在某些情況下，你需要在組件卸載(unmounted)或銷毀(destroyed)之前，做一些有必要的清除的操作，比如timers、interval，或者取消網(wǎng)絡請求，或者清理任何在componentDidMount()中創(chuàng)建的DOM元素(elements)，你可能會想到類組件中的 componentWillUnmount()這個鉤子函數(shù)，示例代碼如下：
import React from "react";
export default class ClassDemo extends React.Component {
constructor(props) {
super(props);
this.state = {
resolution: {
width: window.innerWidth,
height: window.innerHeight
}
};
this.handleResize = this.handleResize.bind(this);
}
componentDidMount() {
window.addEventListener("resize", this.handleResize);
}
componentDidUpdate() {
window.addEventListener("resize", this.handleResize);
}
componentWillUnmount() {
window.removeEventListener('resize', this.handleResize);
}
handleResize() {
this.setState({
resolution: {
width: window.innerWidth,
height: window.innerHeight
}
});
}
render() {
return (
<section>
<h3>
{this.state.resolution.width} x {this.state.resolution.height}
</h3>
</section>
)
}
}
上面的代碼將顯示瀏覽器窗口的當前分辨率。當你調(diào)整窗口大小，您應該會看到自動更新窗口的寬和高的值，同時我們又添加了組件銷毀時，在 componentWillUnmount() 函數(shù)中定義清除監(jiān)聽窗口大小的邏輯。
如果我們使用 Hook 的方式改寫上述代碼，看起來更加簡潔，示例代碼如下：
import React, { useState, useEffect } from "react";
export default function HookDemo(props) {
...
const [resolution, setResolution] = useState({
width: window.innerWidth,
height: window.innerHeight
});
useEffect(() => {
const handleResize = () => {
setResolution({
width: window.innerWidth,
height: window.innerHeight
});
};
window.addEventListener("resize", handleResize);
// return clean-up function
return () => {
document.title = 'React Hooks Demo';
window.removeEventListener("resize", handleResize);
};
});
...
return (
<section>
...
<h3>
{resolution.width} x {resolution.height}
</h3>
</section>
);
}
運行后的效果如下所示：
三、關于 [ ] 依賴數(shù)組參數(shù)的說明
在開篇的時候，我們使用 useEffect Hook 實現(xiàn)了 componentDidMount ，componentDidUpdate 兩個生命鉤子函數(shù)的一致的效果，這就意味著 DOM 加載完成后，狀態(tài)發(fā)生變化造成的 re-render 都會執(zhí)行 useEffect Hook 中的邏輯，在一些場景下，我們沒必要在狀態(tài)發(fā)生變化時，調(diào)用此函數(shù)的邏輯，比如我們在這里定義數(shù)據(jù)接口更改數(shù)據(jù)狀態(tài)，數(shù)據(jù)狀態(tài)發(fā)生變化，會重新調(diào)用 useEffect Hook 中的請求邏輯，這樣豈不是進入了無限循環(huán)，數(shù)據(jù)量大的話，說不定就把接口請求死了。
但是還好， useEffect Hook 提供了依賴使用參數(shù)，第一個參數(shù)是定義方法，第二個參數(shù)是依賴數(shù)組，用于自定義依賴的參數(shù)，是否觸發(fā)再次執(zhí)行，接下來我們來看幾個示例效果：
3.1、after every render
useEffect(() => {
// run after every rendering
console.log('render')
})
如上圖所示，我們每次更改狀態(tài)值導致組件重新渲染時，我們在 useEffect 中定義的輸出將會反復的被執(zhí)行。
3.2、Once（執(zhí)行一次）
接下來我們可以在第二個參數(shù)上定義一個空數(shù)組，解決上述問題，告訴 Hook 組件只執(zhí)行一次（及時狀態(tài)發(fā)生改變導致的 re-render ），示例代碼如下：
useEffect(() => {
// Just run the first time
console.log('render')
}, [])
如上圖運行效果所示，你會發(fā)現(xiàn) Hook 函數(shù)中定義的輸出，無論我們怎么更改狀態(tài)值，其只輸出一次。
3.3、依賴 state/props 的改變再執(zhí)行
如果你想依賴特定的狀態(tài)值、屬性，如果其發(fā)生變化時導致的 re-render ，再次執(zhí)行 Hook 函數(shù)中定義的邏輯，你可以將其寫在數(shù)組內(nèi)，示例代碼如下：
useEffect(() => {
// When title or name changed will render
console.log('render')
}, [title, name])
四、用一張圖總結下
說了這么多，我們做一下總結，說白了就是整合了 componentDidMount，componentDidUpdate，與 componentWillUnmount 這三個生命鉤子函數(shù)，變成了一個API，其用法可以用如下一張圖進行精簡概括
五、繼續(xù)完善購物清單
在上一篇系列文章里《 React Hooks 學習筆記 | State Hook（一）》，我們通過做一個簡單的購物清單實踐了 State Hook，本篇文章我們通過繼續(xù)完善這個實例，加深我們對 useEffect Hook 的理解，學習之前大家可以先提前下載上一篇文章的源碼。
本節(jié)案例，為了更加接近實際應用場景，這里我使用了 Firebase 快速構建后端的數(shù)據(jù)庫和其自身的接口服務。（谷歌的產(chǎn)品，目前需要科學上網(wǎng)才能使用，F(xiàn)irebase 是 Google Cloud Platform 為應用開發(fā)者們推出的應用后臺服務。借助Firebase，應用開發(fā)者們可以快速搭建應用后臺，集中注意力在開發(fā) client 上，并且可以享受到 Google Cloud 的穩(wěn)定性和 scalability ）。
5.1、創(chuàng)建Firebase
1、在 https://firebase.google.com/（科學上網(wǎng)才能訪問），使用谷歌賬戶登錄 ，進入控制臺創(chuàng)建項目。
5.2、添加狀態(tài)加載、錯誤提示UI組件
接下來我們添加進度加載組件和錯誤提示對話框組件，分別用于狀態(tài)加載中狀態(tài)提示和系統(tǒng)錯誤狀態(tài)提示，代碼比較簡單，這里就是貼下相關代碼。
LoadingIndicator 數(shù)據(jù)加載狀態(tài)提示組件
import React from 'react';
import './LoadingIndicator.css';
const LoadingIndicator = () => (
<div className="lds-ring">
<div />
<div />
<div />
<div />
</div>
);
export default LoadingIndicator;
// components/UI/LoadingIndicator.js
.lds-ring {
display: inline-block;
position: relative;
width: 54px;
height: 54px;
}
.lds-ring div {
box-sizing: border-box;
display: block;
position: absolute;
width: 44px;
height: 44px;
margin: 6px;
border: 6px solid #ff2058;
border-radius: 50%;
animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
border-color: #ff2058 transparent transparent transparent;
}
.lds-ring div:nth-child(1) {
animation-delay: -0.45s;
}
.lds-ring div:nth-child(2) {
animation-delay: -0.3s;
}
.lds-ring div:nth-child(3) {
animation-delay: -0.15s;
}
@keyframes lds-ring {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
/*
components/UI/LoadingIndicator.css
*/
ErrorModal 系統(tǒng)錯誤組件
import React from "react";
import './ErrorModal.css'
const ErrorModal = React.memo(props => {
return (
<React.Fragment>
<div className="backdrop" onClick={props.onClose} />
<div className="error-modal">
<h2>An Error Occurred!</h2>
<p>{props.children}</p>
<div className="error-modal__actions">
<button type="button" onClick={props.onClose}>
Okay
</button>
</div>
</div>
</React.Fragment>
);
});
export default ErrorModal;
// components/UI/ErrorModal.js
.error-modal {
position: fixed;
top: 30vh;
left: calc(50% - 15rem);
width: 30rem;
background: white;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.26);
z-index: 100;
border-radius: 7px;
}
.error-modal h2 {
margin: 0;
padding: 1rem;
background: #ff2058;
color: white;
border-radius: 7px 7px 0 0;
}
.error-modal p {
padding: 1rem;
}
.error-modal__actions {
display: flex;
justify-content: flex-end;
padding: 0 0.5rem;
}
.backdrop {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100vh;
background: rgba(0, 0, 0, 0.75);
z-index: 50;
}
/*
components/UI/ErrorModal.css
*/
5.3、增加接口顯示購物清單列表
接下來，我們在購物清單頁 Ingredients 組件里，我們使用今天所學的知識，在 useEffect() 里添加歷史購物清單的列表接口，用于顯示過往的清單信息，這里我們使用 firebase 的提供的API, 請求 https://react-hook-update-350d4-default-rtdb.firebaseio.com/ingredients.json 這個地址，就會默認給你創(chuàng)建 ingredients 的集合，并返回一個 JSON 形式的數(shù)據(jù)集合，示例代碼如下：
useEffect(() => {
fetch('https://react-hook-update-350d4-default-rtdb.firebaseio.com/ingredients.json')
.then(response => response.json())
.then(responseData => {
const loadedIngredients = [];
for (const key in responseData) {
loadedIngredients.push({
id: key,
title: responseData[key].title,
amount: responseData[key].amount
});
}
setUserIngredients(loadedIngredients);
})
}, []);
// components/Ingredients/Ingredients.js
上述代碼我們可以看出，我們使用 fetch 函數(shù)請求接口，請求完成后我們更新 UserIngredients 數(shù)據(jù)狀態(tài)，最后別忘記了，同時在 useEffect 函數(shù)中，依賴參數(shù)為空數(shù)組[ ]，表示只加載一次，數(shù)據(jù)狀態(tài)更新時導致的 re-render，就不會發(fā)生無限循環(huán)的請求接口了，這個很重要、很重要、很重要！
5.4 、更新刪除清單的方法
這里我們要改寫刪除清單的方法，將刪除的數(shù)據(jù)更新到云端數(shù)據(jù)庫 Firebase ，為了顯示更新狀態(tài)和系統(tǒng)的錯誤信息，這里我們引入 ErrorModal ，添加數(shù)據(jù)加載狀態(tài)和錯誤狀態(tài)，示例如下：
import ErrorModal from '../UI/ErrorModal';
const Ingredients = () => {
...
const [isLoading, setIsLoading] = useState(false);
const [error, setError] = useState();
...
}
// components/Ingredients/Ingredients.js
接下來我們來改寫刪除方法 removeIngredientHandler
const removeIngredientHandler = ingredientId => {
setIsLoading(true);
fetch(`https://react-hook-update-350d4-default-rtdb.firebaseio.com/ingredients/${ingredientId}.json`,
{
method: 'DELETE'
}
).then(response => {
setIsLoading(false);
setUserIngredients(prevIngredients =>
prevIngredients.filter(ingredient => ingredient.id !== ingredientId)
);
}).catch(error => {
setError('系統(tǒng)開了個小差，請稍后再試！');
setIsLoading(false);
})
};
// components/Ingredients/Ingredients.js
從上述代碼我們可以看出，首先我們先將加載狀態(tài)默認為true，接下來請求刪除接口，這里請注意接口地址 ${ingredientId} 這個變量的使用（當前數(shù)據(jù)的 ID 主鍵），刪除成功后，更新加載狀態(tài)為 false 。如果刪除過程中發(fā)生錯誤，我們在catch 代碼塊里捕捉錯誤并調(diào)用錯誤提示對話框（更新錯誤狀態(tài)和加載狀態(tài)）。
5.5、更新添加清單的方法
接著我們改寫添加清單的方式，通過接口請求的方式，將添加的數(shù)據(jù)添加至 Firebase 數(shù)據(jù)庫，代碼比較簡單，就不多解釋了，示例代碼如下：
const addIngredientHandler = ingredient => {
setIsLoading(true);
fetch('https://react-hook-update-350d4-default-rtdb.firebaseio.com/ingredients.json',
{
method: 'post',
body: JSON.stringify(ingredient),
headers: {'Content-Type': 'application/json'}
})
.then(response => {
setIsLoading(false);
return response.json();
})
.then(responseData => {
setUserIngredients(prevIngredients => [
...prevIngredients,
{id: responseData.name, ...ingredient}
]);
});
};
// components/Ingredients/Ingredients.js
5.5、添加搜索組件功能
我們繼續(xù)完善購物清單的功能，為購物清單添加新功能-搜索功能（通過請求接口），方便我們搜索清單的內(nèi)容，界面效果如下圖所示，在中間添加一個搜索框。
import React,{useState,useEffect,useRef} from "react";
import Card from "../UI/Card";
import './Search.css';
const Search = React.memo(props=>{
const { onLoadIngredients } = props;
const [enteredFilter,setEnterFilter]=useState('');
const inputRef = useRef();
useEffect(() => {
const timer = setTimeout(() => {
if (enteredFilter === inputRef.current.value) {
const query =
enteredFilter.length === 0
? ''
: `?orderBy="title"&equalTo="${enteredFilter}"`;
fetch(
'https://react-hook-update-350d4-default-rtdb.firebaseio.com/ingredients.json' + query
)
.then(response => response.json())
.then(responseData => {
const loadedIngredients = [];
for (const key in responseData) {
loadedIngredients.push({
id: key,
title: responseData[key].title,
amount: responseData[key].amount
});
}
onLoadIngredients(loadedIngredients);
});
}
}, 500);
return () => {
clearTimeout(timer);
};
}, [enteredFilter, onLoadIngredients, inputRef]);
return(
<section className="search">
<Card>
<div className="search-input">
<label>搜索商品名稱</label>
<input
ref={inputRef}
type="text"
value={enteredFilter}
onChange={event=>setEnterFilter(event.target.value)}
/>
</div>
</Card>
</section>
)
});
export default Search;
// components/Ingredients/Search.js
上述代碼，我們定義為了避免頻繁觸發(fā)接口，定義了一個定時器，在用戶輸入500毫秒后在請求接口。你可以看到 useEffect() 里，我們使用了 return 方法，用于清理定時器，要不會有很多的定時器。同時依賴參數(shù)有三個 [enteredFilter, onLoadIngredients,inputRef]，只有用戶的輸入內(nèi)容和事件屬性發(fā)生變化時，才會再次觸發(fā) useEffect() 中的邏輯。這里我們用到了useRef 方法獲取輸入框的值，關于其詳細的介紹，會在稍后的文章介紹。
接下來貼上 Search.css 的相關代碼，由于內(nèi)容比較簡單，這里就不過多解釋了。
.search {
width: 30rem;
margin: 2rem auto;
max-width: 80%;
}
.search-input {
display: flex;
justify-content: space-between;
align-items: center;
flex-direction: column;
}
.search-input input {
font: inherit;
border: 1px solid #ccc;
border-radius: 5px;
padding: 0.15rem 0.25rem;
}
.search-input input:focus {
outline: none;
border-color: #ff2058;
}
@media (min-width: 768px) {
.search-input {
flex-direction: row;
}
}
/*
components/Ingredients/Search.css
*/
最后我們將 Search 組件添加至清單頁面，在這個頁面里定義了一個 useCallback 的方法，類似 Vue 的 computed 緩存的特性，避免重復計算，這個方法主要用來接收 Search 子組件傳輸數(shù)據(jù)，用于更新 UserIngredients 數(shù)據(jù)中的狀態(tài)，在稍后的文章里我會詳細介紹，這里只是簡單的貼下代碼，示例代碼如下：
const filteredIngredientsHandler = useCallback(filteredIngredients => {
setUserIngredients(filteredIngredients)
}, []);// components/Ingredients/Ingredients.js
接下來在 return 里添加 Search 組件和 ErrorModal 組件，在 Search 組件的 ingredients 屬性里添加上述定義的 filteredIngredientsHandler 方法，用于接收組件搜索接口請求返回的數(shù)據(jù)內(nèi)容，用于更新 UserIngredients 的數(shù)據(jù)狀態(tài)，示例代碼如下：
<div className="App">
{error && <ErrorModal onClose={clearError}>{error}</ErrorModal>}
<IngredientForm onAddIngredient={addIngredientHandler} loading={isLoading}/>
<section>
<Search onLoadIngredients={filteredIngredientsHandler}/>
<IngredientList ingredients={userIngredients} onRemoveItem={removeIngredientHandler}/>
</section>
</div>// components/Ingredients/Ingredients.js
到這里，本節(jié)的實踐練習就完了，基本上是一個基于后端接口的，基礎的增刪改查案例，稍微完善下就可以運用到你的實際案例中。你可以點擊閱讀原文進行體驗（主要本案例采用了Firebase ，科學上網(wǎng)才能在線體驗）。
六、結束語
好了，本篇關于 useEffect() 的介紹就結束了，希望你已經(jīng)理解了 useEffect 的基本用法，感謝你的閱讀，你可以點擊閱讀原文體驗本文的案例部分，如果你想獲取源碼請回復"r2"，小編建議親自動手做一下，這樣才能加深對 useEffect Hook 的認知，下一篇本系列文章將會繼續(xù)介紹 useRef，敬請期待。