詳解React如何優(yōu)雅地根據(jù)prop更新state值
快速總結(jié)：
- 在渲染函數(shù)中直接根據(jù) prop 計(jì)算狀態(tài)或者通過 key 值重新渲染整個(gè)組件 。
- 記錄之前狀態(tài)的 prop 值，直接在組件渲染函數(shù)中與當(dāng)前 prop 值對(duì)比，有變化就更新 state 值。
- 使用 useEffect 或者 useLayoutEffect。
場(chǎng)景
開發(fā) React 組件中，有時(shí)會(huì)碰到同步狀態(tài)的問題，就是當(dāng) prop 變化時(shí)調(diào)整組件的 state 值。
比如以下這個(gè)場(chǎng)景：一個(gè)下拉組件 Select 內(nèi)置了兩組選項(xiàng)內(nèi)容，支持通過 type 來選擇，同時(shí)也支持傳入 options 參數(shù)自定義選項(xiàng)內(nèi)容。
代碼實(shí)現(xiàn)方面，內(nèi)部維護(hù)一個(gè) innerOptions，外部參數(shù) type 或 options 通過 useEffect 來同步，相關(guān)代碼如下：
import React, { useState, useEffect } from "react";
import { Flex, Space, Select } from "antd";
function MySelect({ value, onChange, type, options }) {
const optionsList = [[
{ value: "dog", label: "小狗" },
{ value: "cat", label: "小貓" },
], [
{ value: "banana", label: "香蕉" },
{ value: "apple", label: "蘋果" },
]]
const [innerOptions, setInnerOptions] = useState(options || optionsList[type] || [])
useEffect(() => {
if (type !== undefined) {
setInnerOptions(optionsList[type])
}
}, [type]);
useEffect(() => {
if (options !== undefined) {
setInnerOptions(options)
}
}, [options])
return (
<Space direction="vertical">
{`你選擇了：${innerOptions.find((item) => item.value === value)?.label}`}
<Select
style={{ width: 120 }}
value={value}
onChange={onChange}
options={innerOptions}
/>
</Space>
);
}
正常使用這個(gè)組件時(shí)一切都是正常的。
問題出現(xiàn)
不過當(dāng)你需要在一個(gè) Select 組件中切換 type 時(shí)，就會(huì)出現(xiàn)一個(gè)問題，切換過程中間會(huì)閃現(xiàn)過一個(gè) undefined 。
import React, { useState } from "react;
import { Flex, Space } from "antd";
import MySelect from "./MySelect";
function App() {
const [value, setValue] = useState("dog");
const [type, setType] = useState(0);
const handleChange = (newVal) => {
setValue(newVal);
};
const handleChangeType = (e) => {
setType(e.target.value);
setValue(e.target.value === 0 ? 'dog' : 'banana')
}
return (
<div className="App">
<Flex gap="middle" vertical>
<Radio.Group onChange={handleChangeType} value={type}>
<Radio value={0}>動(dòng)物</Radio>
<Radio value={1}>水果</Radio>
</Radio.Group>
<MySelect type={type} value={value} onChange={handleChange} />
</Flex>
</div>
);
}
問題的原因是切換選項(xiàng)時(shí)，value 值是直接更新的，而 innerOptions 是 useEffect 中更新的，也就是中間會(huì)出現(xiàn)一次 value 為新值，而 innerOptions 為舊值的渲染。
尋找解決方案
既然找到了原因，就開始想辦法處理這個(gè)問題。
useLayoutEffect
第一時(shí)間想到了用 useLayoutEffect 能否解決， useLayoutEffect 在 react 文檔中說明是在將內(nèi)容真正渲染到屏幕前調(diào)用，并且會(huì)阻塞瀏覽器重繪。
將 useEffect 全部改成 useLayoutEffect。
useLayoutEffect(() => {
if (type !== undefined) {
setInnerOptions(optionsList[type])
}
}, [type]);
useLayoutEffect(() => {
if (options !== undefined) {
setInnerOptions(options)
}
}, [options])
可以看到不會(huì)出現(xiàn) undefined 的情況了。
useLayoutEffect 會(huì)降低性能。在可能的情況下，最好使用 useEffect。
不過官方文檔有提到 useLayoutEffect 會(huì)降低性能，再看看是否有更好的方案。
react 最佳實(shí)踐
prop 改變后 state 同步這個(gè)在 react 文檔中有編碼建議。
官方推薦不要使用 useEffect，在函數(shù)中直接調(diào)整 state 值。
const [innerOptions, setInnerOptions] = useState(options || optionsList[type] || [])
const [prevType, setPrevType] = useState(type);
const [prevOptions, setPrevOptions] = useState(options);
if (prevType !== type) {
setPrevType(type);
setInnerOptions(optionsList[type])
}
if (prevOptions !== options) {
setPrevOptions(type);
setInnerOptions(options)
}
上面的代碼比起使用 useEffect 的代碼可能并不常見。
當(dāng)你在組件渲染函數(shù)中直接更新組件時(shí)，React 會(huì)丟棄返回的 JSX 并立即重新渲染。不過為了避免非常緩慢的級(jí)聯(lián)重試，React 只允許你在組件函數(shù)中更新同一組件的狀態(tài)。
也就是說 value 為新值，而 innerOptions 為舊值的渲染被丟棄了，所以不會(huì)出現(xiàn) undefined 的情況，問題也得到了解決。
總結(jié)
正常情況下，我們使用 useEffect 來將 prop 更新到 state 是沒問題的。不過在有界面渲染的情況下，可能會(huì)有 bug 出現(xiàn)，這時(shí)需要使用 useLayoutEffect 或者直接在組件渲染函數(shù)中更新 state 值。
其實(shí)根據(jù) prop 更新 state 在非必要的情況下盡量不要出現(xiàn)，優(yōu)先考慮在渲染函數(shù)中直接根據(jù) prop 計(jì)算狀態(tài)或者通過 key 值重新渲染整個(gè)組件
例如以下方式處理 innerOptions：
// 直接根據(jù) prop 計(jì)算狀態(tài) const innerOptions = optionsList[type] || options || []
以上就是詳解React如何優(yōu)雅地根據(jù)prop更新state值的詳細(xì)內(nèi)容，更多關(guān)于React更新state值的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
這篇文章主要介紹了React 全面解析excel文件，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
TypeScript在React項(xiàng)目中的使用實(shí)踐總結(jié)
這篇文章主要介紹了TypeScript在React項(xiàng)目中的使用總結(jié),本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2021-04-04
react的嚴(yán)格模式和解決react useEffect執(zhí)行兩次問題
文章總結(jié)：本文詳細(xì)探討了React中useEffect執(zhí)行兩次的問題,主要?dú)w因于React的嚴(yán)格模式,嚴(yán)格模式在開發(fā)模式下會(huì)故意重復(fù)調(diào)用一些生命周期方法,以幫助開發(fā)者發(fā)現(xiàn)潛在的問題,包括不安全的生命周期、過時(shí)的ref API、廢棄的findDOMNode方法、意外的副作用等2025-01-01
用react實(shí)現(xiàn)一個(gè)簡單的scrollView組件
這篇文章主要給大家介紹一下如何用 react 實(shí)現(xiàn)一個(gè)簡單的 scrollView組件，文中有詳細(xì)的代碼示例，具有一定的參考價(jià)值,需要的朋友可以參考下2023-07-07
React教程之Props驗(yàn)證的具體用法（Props Validation）
這篇文章主要介紹了React教程之Props驗(yàn)證的具體用法（Props Validation），非常具有實(shí)用價(jià)值，需要的朋友可以參考下2017-09-09
React 中淺比較的概念無處不在，它在不同的流程中起著關(guān)鍵的作用，本文主要介紹了React 中的淺比較是如何工作的，具有一定的參考價(jià)值，感興趣的可以了解一下2022-04-04
這篇文章主要為大家詳細(xì)介紹了React實(shí)現(xiàn)輪播圖效果，使用react-slick組件，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-07-07
React倒計(jì)時(shí)功能實(shí)現(xiàn)代碼——解耦通用
這篇文章主要介紹了React倒計(jì)時(shí)功能實(shí)現(xiàn)——解耦通用,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-09-09
React實(shí)現(xiàn)阿里云OSS上傳文件的示例
這篇文章主要介紹了React實(shí)現(xiàn)阿里云OSS上傳文件的示例，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-08-08
React+Vite中利用Fetch將CSV數(shù)據(jù)轉(zhuǎn)成JSON字符串
在一些小型項(xiàng)目中,前端可能需要直接處理 CSV 文件數(shù)據(jù),將其轉(zhuǎn)換為 JSON 字符串后再進(jìn)行邏輯操作和展示,本文將會(huì)介紹兩種方法,需要的朋友可以參考下2025-12-12