React useState的錯(cuò)誤用法避坑詳解
引言
本文源于翻譯 Avoid These Common Pitfalls Of React useState 由公眾號(hào)KooFE前端團(tuán)隊(duì)完成翻譯
useState 是我們使用最頻繁的 React hook，在代碼中隨處可見，但是也經(jīng)常會(huì)出現(xiàn)一些錯(cuò)誤的用法。
或許你已經(jīng)經(jīng)歷過(guò)這些錯(cuò)誤的用法，但是可能還沒有意識(shí)到這是錯(cuò)誤，比如寫出了一些冗余的、重復(fù)的、矛盾的 state，讓你不得不額外使用 useEffect 來(lái)處理它們。由于這些錯(cuò)誤用法的存在，會(huì)讓代碼的可讀性變差，提高了代碼的維護(hù)成本。
了解這些易犯的錯(cuò)誤，可以讓我們獲得如下收益：
- 代碼更容易閱讀和維護(hù)
- 減少代碼出 Bug 的可能性
- 降低代碼的復(fù)雜程度
在本文中，將介紹一些關(guān)于 useState 的常見錯(cuò)誤，以便在今后的工作中避免這些錯(cuò)誤。
冗余的 state
對(duì)于初級(jí)開發(fā)者來(lái)說(shuō)，定義和使用冗余的 state 是一個(gè)比較常見的錯(cuò)誤。如果一個(gè) state 依賴了另外一個(gè) state，就是這種典型的錯(cuò)誤用法。
簡(jiǎn)單示例
下面是一個(gè)簡(jiǎn)單的組件，允許用戶編輯自己的姓名，其中第一個(gè)輸入框是用戶的姓氏，后一個(gè)輸入框是用戶的名字，然后將姓名組合在一起渲染在輸入框的下面。
代碼實(shí)現(xiàn)如下：
import { useState } from "react";
function RedundantState() {
const [firstName, setFirstName] = useState(""); // 姓氏
const [lastName, setLastName] = useState(""); // 名字
const [fullName, setFullName] = useState(""); // 姓名
const onChangeFirstName = (event) => {
setFirstName(event.target.value);
setFullName(`${event.target.value} ${lastName}`);
};
const onChangeLastName = (event) => {
setLastName(event.target.value);
setFullName(`${firstName} ${event.target.value}`);
};
return (
<>
<form>
<input
value={firstName}
onChange={onChangeFirstName}
placeholder="First Name"
/>
<input
value={lastName}
onChange={onChangeLastName}
placeholder="Last Name"
/>
</form>
<div>Full name: {fullName}</div>
</>
);
}
很明顯，這段代碼中的 fullName 是冗余的 state
問題分析
可能你會(huì)說(shuō)，先后依次更新 firstName 和 fullName 會(huì)導(dǎo)致額外的渲染周期。
const onChangeFirstName = (event) => {
setFirstName(event.target.value);
setFullName(`${event.target.value} ${lastName}`);
};
但是，React state 的更新是批量更新，所以不會(huì)為每個(gè) state 更新做單獨(dú)的渲染。
因此，在大多數(shù)情況下，性能方面的差異不大。問題在于可維護(hù)性和引入錯(cuò)誤的風(fēng)險(xiǎn)。讓我們?cè)俅慰匆幌率纠a：
const onChangeFirstName = (event) => {
setFirstName(event.target.value);
setFullName(`${event.target.value} ${lastName}`);
};
const onChangeLastName = (event) => {
setLastName(event.target.value);
setFullName(`${firstName} ${event.target.value}`);
};
每次更新firstName 或 lastName 時(shí)，我們都必須要更新 fullName。在更復(fù)雜的場(chǎng)景中，這很容易被遺漏。因此，這會(huì)導(dǎo)致代碼更難重構(gòu)，引入 bug 的可能性也會(huì)增加。
如前所述，在大多數(shù)情況下，我們不必?fù)?dān)心性能。但是，如果被依賴的 state 是大型的數(shù)組或需要大量的計(jì)算，則可以使用 useMemo 來(lái)做優(yōu)化處理。
解決方案
fullName 可以由 firstName 和 lastName 直接拼接而成。
export function RedundantState() {
const [firstName, setFirstName] = useState("");
const [lastName, setLastName] = useState("");
const fullName = `${firstName} ${lastName}`;
...
return (
<>
<form>
...
</form>
<div>Full name: {fullName}</div>
</>
);
}
重復(fù)的 state
在多個(gè) state 中存在重復(fù)的數(shù)據(jù)，也是一個(gè)比較常見的錯(cuò)誤。通常在做數(shù)據(jù)的轉(zhuǎn)換、排序或過(guò)濾時(shí)會(huì)遇到這種情況。另一種常見情況是選擇展示不同的數(shù)據(jù)，比如接下來(lái)介紹的例子。
簡(jiǎn)單示例
這個(gè)組件用于顯示項(xiàng)目列表，用戶可以單擊相應(yīng)的按鈕來(lái)打開 modal 彈窗。
在下面的代碼中就存在這種錯(cuò)誤用法。
import { useState } from "react";
// const items = [
// {
// id: "item-1",
// text: "Item 1",
// },
// ...
// ]
function DuplicateState({ items }) {
const [selectedItem, setSelectedItem] = useState();
const onClickItem = (item) => {
setSelectedItem(item);
};
return (
<>
{selectedItem && <Modal item={selectedItem} />}
<ul>
{items.map((row) => (
<li key={row.id}>
{row.text}
<button onClick={() => onClickItem(row)}>Open</button>
</li>
))}
</ul>
</>
);
}
這段代碼中的問題是，將 item 原封不動(dòng)地拷貝到了 state 中。
問題分析
在上面的代碼中，這種重復(fù)的數(shù)據(jù)違反了單一數(shù)據(jù)源原則。事實(shí)上，一旦用戶選擇了任何一項(xiàng)，我們就會(huì)出現(xiàn)兩個(gè)數(shù)據(jù)源：selectedItem 狀態(tài)和 items 數(shù)組中的數(shù)據(jù)。
假如，用戶能夠在 modal 彈窗中編輯這些數(shù)據(jù)?？赡軙?huì)是這樣的：
- 用戶在 modal 彈窗中更改數(shù)據(jù)并提交
- 將向服務(wù)器發(fā)送請(qǐng)求并更新數(shù)據(jù)庫(kù)中的 item
- 前端更新 item 數(shù)據(jù)（通過(guò)服務(wù)器的響應(yīng)或重新請(qǐng)求 items 列表）。
- 前端使用新的 items 數(shù)組重新渲染。
- 現(xiàn)在的問題是：DuplicateState 組件內(nèi)部發(fā)生了什么？
這就是問題所在。selectedItem 狀態(tài)仍將包含舊數(shù)據(jù)。它將不同步。你可以想象，在更復(fù)雜的情況下，這可能會(huì)成為一個(gè)令人討厭的 bug。
當(dāng)然，我們可以寫代碼來(lái)實(shí)現(xiàn) selectedItem 狀態(tài)同步。但我們不得不使用 useEffect 來(lái)監(jiān)聽 items 數(shù)組中的變化。
解決方案
一個(gè)更簡(jiǎn)單的解決方案是只跟蹤選定的 id。正如你所看到的，該解決方案 “冗余的 state” 部分中的解決方案非常相似：我們只需從 id 中計(jì)算出 selectedItem 變量。
// const items = [
// {
// id: "item-1",
// text: "Item 1",
// },
// ...
// ]
function DuplicateState({ items }) {
const [selectedItemId, setSelectedItemId] = useState();
const selectedItem = items.find(({ id }) => id === selectedItemId);
const onClickItem = (itemId) => {
setSelectedItemId(itemId);
};
return (
<>
{selectedItem && <Modal item={selectedItem} />}
<ul>
{items.map((row) => (
<li key={row.id}>
{row.text}
<button onClick={() => onClickItem(row.id)}>Open</button>
</li>
))}
</ul>
</>
);
}
使用 useEffect 更新 state
另一個(gè)常見問題是使用 useEffect 來(lái)監(jiān)聽變量的變化。
簡(jiǎn)單示例
我們繼續(xù)使用上一節(jié)的示例：
在組件中，當(dāng) items 發(fā)生變化后，使用 useEffect 同步給 selectedItem。
import { useEffect, useState } from "react";
// const items = [
// {
// id: "item-1",
// text: "Item 1",
// },
// ...
// ]
function DuplicateState({ items }) {
const [selectedItem, setSelectedItem] = useState();
useEffect(() => {
if (selectedItem) {
setSelectedItem(items.find(({ id }) => id === selectedItem.id));
}
}, [items]);
const onClickItem = (item) => {
setSelectedItem(item);
};
return (
<>
{selectedItem && <Modal item={selectedItem} />}
<ul>
{items.map((row) => (
<li key={row.id}>
{row.text}
<button onClick={() => onClickItem(row)}>Open</button>
</li>
))}
</ul>
</>
);
}
這段代碼能夠正常工作，并同步保持 selectedItem 狀態(tài)。是不是覺得它的實(shí)現(xiàn)方式有點(diǎn) hack？
問題分析
這種方法存在多個(gè)問題：
- useEffect 不容易閱讀和理解。因此，使用 useEffect 的次數(shù)越少越好。
- 在 useEffect 中更新 state 會(huì)導(dǎo)致額外的渲染。雖然不會(huì)引起性能方面的大問題，但也需要考慮。
- 在代碼中，我們?cè)?selectedItem 狀態(tài)和 items 屬性之間引入了某種隱藏的關(guān)系。在閱讀或更改代碼時(shí)，這很容易錯(cuò)過(guò)。
- 在正確的時(shí)間觸發(fā) useEffect 中的代碼可能很困難。在這種模式中，我們經(jīng)常要額外引入其他解決方法，例如避免在第一次渲染時(shí)運(yùn)行代碼。下面是一個(gè)示例：
function DuplicateState({ items }) {
const [selectedItem, setSelectedItem] = useState();
const firstRender = useRef(true);
useEffect(() => {
if (firstRender.current) {
firstRender.current = false;
return;
}
setSelectedItem(items.find(({ id }) => id === selectedItem.id));
}, [items]);
...
如果你想使用 useEffect 或在另一個(gè)開發(fā)人員的代碼中看到它，問問自己是否真的需要它。也許可以通過(guò)前面介紹的方法來(lái)避免這種情況。
解決方案
您可能已經(jīng)猜到了：上一節(jié)的解決方案也幫助我們刪除 useEffect。如果我們只存儲(chǔ)所選項(xiàng)目的 ID 而不是整個(gè)對(duì)象，那么就沒有什么可同步的。
import { useState } from "react";
// const items = [
// {
// id: "item-1",
// text: "Item 1",
// },
// ...
// ]
function DuplicateState({ items }) {
const [selectedItemId, setSelectedItemId] = useState();
const selectedItem = items.find(({ id }) => id === selectedItemId);
const onClickItem = (id) => {
setSelectedItem(id);
};
return (
<>
{selectedItem && <Modal item={selectedItem} />}
<ul>
{items.map((row) => (
<li key={row.id}>
{row.text}
<button onClick={() => onClickItem(row.id)}>Open</button>
</li>
))}
</ul>
</>
);
}
使用 useEffect 監(jiān)聽 state 變化
與上一節(jié)相關(guān)的另外一個(gè)常見問題是使用 useEffect 對(duì)狀態(tài)的變化做出反應(yīng)。但解決方案略有不同。
簡(jiǎn)單示例
這是一個(gè)顯示產(chǎn)品的組件。用戶可以通過(guò)單擊按鈕顯示或隱藏產(chǎn)品詳細(xì)信息。無(wú)論何時(shí)顯示或隱藏產(chǎn)品信息，我們都會(huì)觸發(fā)一個(gè)動(dòng)作（在本例中，會(huì)觸發(fā)一個(gè)埋點(diǎn)數(shù)據(jù)上報(bào)）。
import { useEffect, useState } from "react";
function ProductView({ name, details }) {
const [isDetailsVisible, setIsDetailsVisible] = useState(false);
useEffect(() => {
trackEvent({ event: "Toggle Product Details", value: isDetailsVisible });
}, [isDetailsVisible]);
const toggleDetails = () => {
setIsDetailsVisible(!isDetailsVisible);
};
return (
<div>
{name}
<button onClick={toggleDetails}>Show details</button>
{isDetailsVisible && <ProductDetails {...details} />}
</div>
);
}
代碼中的 useEffect 會(huì)偵聽 isDetailsVisible 是否變化，并相應(yīng)地觸發(fā)埋點(diǎn)事件。
問題分析
代碼中的問題如下：
- useEffect通常不容易理解。
- 它可能會(huì)導(dǎo)致不必要的渲染周期（如果在效果內(nèi)部更新了狀態(tài)）。
- 很容易引入與渲染生命周期相關(guān)的錯(cuò)誤。事實(shí)上，這段代碼在初始渲染期間運(yùn)行trackEvent，這會(huì)導(dǎo)致一個(gè) bug。
- 它將影響與實(shí)際原因分開。在這段代碼中，我們看到 trackEvent 正在運(yùn)行，是因?yàn)?isDetailsVisible 發(fā)生了更改。但真正的原因是用戶按下了 “顯示詳細(xì)信息” 按鈕。
解決方案
在許多情況下，可以刪除用于監(jiān)聽 state 變化的 useEffect。通常，我們可以將這些功能放在更新 state 的代碼旁邊。在這里，我們可以將 trackEvent(...) 移動(dòng)到 toggleDetails 函數(shù)中。
function ProductView({ name, details }) {
const [isDetailsVisible, setIsDetailsVisible] = useState(false);
const toggleDetails = () => {
setIsDetailsVisible(!isDetailsVisible);
trackEvent({ event: "Toggle Product Details", value: !isDetailsVisible });
};
return (
<div>
{name}
<button onClick={toggleDetails}>Show details</button>
{isDetailsVisible && <ProductDetails {...details} />}
</div>
);
}
矛盾的 state
當(dāng)您使用相互依賴的多個(gè) state 時(shí)，這些狀態(tài)可能存在多種組合，稍有不慎就會(huì)設(shè)置出錯(cuò)誤的 state，讓這些 state 呈現(xiàn)出相互矛盾的渲染結(jié)果。因此，我們需要更直觀的方式來(lái)組織和管理這些狀態(tài)組合。
簡(jiǎn)單示例
下面是一個(gè)很基本的數(shù)據(jù)請(qǐng)求的示例，組件可以處于不同的狀態(tài)：要么正在加載數(shù)據(jù)，要么發(fā)生錯(cuò)誤，要么已成功獲取數(shù)據(jù)。
export function ContradictingState() {
const [data, setData] = useState(null);
const [isLoading, setIsLoading] = useState(true);
const [error, setError] = useState(null);
useEffect(() => {
setIsLoading(true);
setError(null);
fetchData()
.then((data) => {
setData(data);
setIsLoading(false);
})
.catch((error) => {
setIsLoading(false);
setData(null);
setError(error);
});
}, []);
...
問題分析
這種方法的問題是，如果我們不小心，我們可能會(huì)產(chǎn)生有矛盾的 state。例如，在上面的示例中，當(dāng)發(fā)生錯(cuò)誤時(shí)，我們可能忘記將 isLoading 設(shè)置為 false。
對(duì)于哪些 state 是允許組合的，也是很難理解的。在上面的例子中，理論上我們可以有 8 種不同的 state 組合。但你不能很直觀的看到哪些狀態(tài)組合是真正存在的。
解決方案
多個(gè)狀態(tài)之間相互依賴，更推薦用 useReducer 來(lái)替代 useState。
const initialState = {
data: [],
error: null,
isLoading: false
};
function reducer(state, action) {
switch (action.type) {
case "FETCH":
return {
...state,
error: null,
isLoading: true
};
case "SUCCESS":
return {
...state,
error: null,
isLoading: false,
data: action.data
};
case "ERROR":
return {
...state,
isLoading: false,
error: action.error
};
default:
throw new Error(`action "${action.type}" not implemented`);
}
}
export function NonContradictingState() {
const [state, dispatch] = useReducer(reducer, initialState);
useEffect(() => {
dispatch({ type: "FETCH" });
fetchData()
.then((data) => {
dispatch({ type: "SUCCESS", data });
})
.catch((error) => {
dispatch({ type: "ERROR", error });
});
}, []);
...
這樣一來(lái)，就可以大大減少了我們的理解成本。我們可以很直觀地看到我們有 3 個(gè)動(dòng)作和 4 個(gè)可能的組件狀態(tài)（“FETCH”、“SUCCESS”、“ERROR”和初始狀態(tài)）。
深度嵌套的 state
我們這里提到的最后一個(gè)常見問題是（深度）嵌套對(duì)象的 state。如果我們只是渲染數(shù)據(jù)，這可能不存在什么問題。但是，一旦開始更新嵌套數(shù)據(jù)項(xiàng)，就會(huì)遇到一些麻煩。
簡(jiǎn)單示例
這里我們有一個(gè)組件，用于渲染深度嵌套的注釋。JSX 在這里并不重要，所以省略了，我們假設(shè) updateComment 是綁定到按鈕上的回調(diào)函數(shù)。
function NestedComments() {
const [comments, setComments] = useState([
{
id: "1",
text: "Comment 1",
children: [
{
id: "11",
text: "Comment 1 1"
},
{
id: "12",
text: "Comment 1 2"
}
]
},
{
id: "2",
text: "Comment 2"
},
{
id: "3",
text: "Comment 3",
children: [
{
id: "31",
text: "Comment 3 1",
children: [
{
id: "311",
text: "Comment 3 1 1"
}
]
}
]
}
]);
const updateComment = (id, text) => {
// this gets complicated
};
...
問題分析
這種嵌套 state 的問題是，我們必須以不可變的方式更新它，否則組件不會(huì)重新渲染。上面示例中的深度嵌套注釋，我們以硬編碼的方式來(lái)實(shí)現(xiàn)：
const updateComment = (id, text) => {
setComments([
...comments.slice(0, 2),
{
...comments[2],
children: [
{
...comments[2].children[0],
children: [
{
...comments[2].children[0].children[0],
text: "New comment 311"
}
]
}
]
}
]);
};
這種實(shí)現(xiàn)方式非常復(fù)雜。
解決方案
與深度嵌套的 state 不同，使用扁平的數(shù)據(jù)結(jié)構(gòu)要容易得多。我們可以為每一個(gè)數(shù)據(jù)項(xiàng)增加 ID 字段，通過(guò) ID 之間相互引用來(lái)描述嵌套關(guān)系。代碼看起來(lái)像這樣：
function FlatCommentsRoot() {
const [comments, setComments] = useState([
{
id: "1",
text: "Comment 1",
children: ["11", "12"],
},
{
id: "11",
text: "Comment 1 1"
},
{
id: "12",
text: "Comment 1 2"
},
{
id: "2",
text: "Comment 2",
},
{
id: "3",
text: "Comment 3",
children: ["31"],
},
{
id: "31",
text: "Comment 3 1",
children: ["311"]
},
{
id: "311",
text: "Comment 3 1 1"
}
]);
const updateComment = (id, text) => {
const updatedComments = comments.map((comment) => {
if (comment.id !== id) {
return comment;
}
return {
...comment,
text
};
});
setComments(updatedComments);
};
...
現(xiàn)在，通過(guò)它的 ID 找到正確的數(shù)據(jù)項(xiàng)，并在數(shù)組中替換它就容易多了。
以上就是React useState的錯(cuò)誤用法避坑詳解的詳細(xì)內(nèi)容，更多關(guān)于React useState錯(cuò)誤避坑的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
React修改數(shù)組對(duì)象的注意事項(xiàng)及說(shuō)明
這篇文章主要介紹了React修改數(shù)組對(duì)象的注意事項(xiàng)及說(shuō)明，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-12-12
React實(shí)現(xiàn)二級(jí)聯(lián)動(dòng)(左右聯(lián)動(dòng))
這篇文章主要為大家詳細(xì)介紹了React實(shí)現(xiàn)二級(jí)聯(lián)動(dòng)效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-09-09
虛擬列表，其實(shí)就是將一個(gè)原本需要全部列表項(xiàng)的渲染的長(zhǎng)列表，改為只渲染可視區(qū)域內(nèi)的列表項(xiàng)，但滾動(dòng)效果還是要和渲染所有列表項(xiàng)的長(zhǎng)列表一樣。本文就將利用React實(shí)現(xiàn)虛擬列表，需要的可以參考一下2022-08-08
詳解使用React全家桶搭建一個(gè)后臺(tái)管理系統(tǒng)
本篇文章主要介紹了使用React全家桶搭建一個(gè)后臺(tái)管理系統(tǒng)，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-11-11
Fiber可以理解為一個(gè)執(zhí)行單元，每次執(zhí)行完一個(gè)執(zhí)行單元，React?Fiber就會(huì)檢查還剩多少時(shí)間，如果沒有時(shí)間則將控制權(quán)讓出去，然后由瀏覽器執(zhí)行渲染操作，這篇文章主要介紹了React?Fiber架構(gòu)原理剖析,需要的朋友可以參考下<BR>2023-01-01
關(guān)于?React?中?useEffect?使用問題淺談
本文主要介紹了關(guān)于React中useEffect使用問題淺談，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-06-06
本篇文章主要介紹了react-native-fs插件的使用以及遇到的坑，詳細(xì)的介紹了react-native-fs安裝使用，具有一定的參考價(jià)值，有興趣的可以了解一下2017-09-09
這篇文章主要介紹了React router基礎(chǔ)使用方法，React Router是React生態(tài)系統(tǒng)中最受歡迎的第三方庫(kù)之一，近一半的React項(xiàng)目中使用了React Router，下面就來(lái)看看如何在React項(xiàng)目中使用2023-04-04
React-router 4 按需加載的實(shí)現(xiàn)方式及原理詳解
本篇文章主要介紹了React-router 4 按需加載的實(shí)現(xiàn)方式及原理詳解，非常具有實(shí)用價(jià)值，需要的朋友可以參考下2017-05-05
Node-sass是一個(gè)庫(kù),它將Node.js綁定到LibSass（流行樣式表預(yù)處理器Sass的C版本）,它允許用戶以令人難以置信的速度將.scss文件本地編譯為css,并通過(guò)連接中間件自動(dòng)編譯,下面這篇文章主要給大家介紹了關(guān)于React安裝node-sass失敗解決的相關(guān)資料,需要的朋友可以參考下2022-11-11