現(xiàn)在讓我們來(lái)看看這些原則在實(shí)際中是如何應(yīng)用的。

合并關(guān)聯(lián)的 state

有時(shí)候可能會(huì)不確定是使用單個(gè) state 變量還是多個(gè) state 變量。

你會(huì)像下面這樣做嗎？

const [x, setX] = useState(0);
const [y, setY] = useState(0);

或這樣？

const [position, setPosition] = useState({ x: 0, y: 0 });

從技術(shù)上講，可以使用其中任何一種方法。但是，如果某兩個(gè) state 變量總是一起變化，則將它們統(tǒng)一成一個(gè) state 變量可能更好。這樣就不會(huì)忘記讓它們始終保持同步，就像下面這個(gè)例子中，移動(dòng)光標(biāo)會(huì)同時(shí)更新紅點(diǎn)的兩個(gè)坐標(biāo)：

import { useState } from 'react';export default function MovingDot() {const [position, setPosition] = useState({x: 0,y: 0});return (<divonPointerMove={e => {setPosition({x: e.clientX,y: e.clientY});}}style={{position: 'relative',width: '100vw',height: '100vh',}}><div style={{position: 'absolute',backgroundColor: 'red',borderRadius: '50%',transform: `translate(${position.x}px, ${position.y}px)`,left: -10,top: -10,width: 20,height: 20,}} /></div>)
}

另一種情況是，將數(shù)據(jù)整合到一個(gè)對(duì)象或一個(gè)數(shù)組中時(shí)，不知道需要多少個(gè) state 片段。例如，當(dāng)有一個(gè)用戶可以添加自定義字段的表單時(shí)，這將會(huì)很有幫助。

注意：如果 state 變量是一個(gè)對(duì)象時(shí)，請(qǐng)記住，不能只更新其中的一個(gè)字段 而不顯式復(fù)制其他字段。例如，在上面的例子中，不能寫(xiě)成 setPosition({ x: 100 })，因?yàn)樗揪蜎](méi)有 y 屬性! 相反，如果想要僅設(shè)置 x，則可執(zhí)行 setPosition({ ...position, x: 100 })，或?qū)⑺鼈兎殖蓛蓚€(gè) state 變量，并執(zhí)行 setX(100)。

避免矛盾的 state

下面是帶有 isSending 和 isSent 兩個(gè) state 變量的酒店反饋表單：

import { useState } from 'react';export default function FeedbackForm() {const [text, setText] = useState('');const [isSending, setIsSending] = useState(false);const [isSent, setIsSent] = useState(false);async function handleSubmit(e) {e.preventDefault();setIsSending(true);await sendMessage(text);setIsSending(false);setIsSent(true);}if (isSent) {return <h1>Thanks for feedback!</h1>}return (<form onSubmit={handleSubmit}><p>How was your stay at The Prancing Pony?</p><textareadisabled={isSending}value={text}onChange={e => setText(e.target.value)}/><br /><buttondisabled={isSending}type="submit">Send</button>{isSending && <p>Sending...</p>}</form>);
}// 假裝發(fā)送一條消息。
function sendMessage(text) {return new Promise(resolve => {setTimeout(resolve, 2000);});
}

盡管這段代碼是有效的，但也會(huì)讓一些 state “極難處理”。例如，如果忘記同時(shí)調(diào)用 setIsSent 和 setIsSending，則可能會(huì)出現(xiàn) isSending 和 isSent 同時(shí)為 true 的情況。組件越復(fù)雜，就越難理解發(fā)生了什么。

因?yàn)?isSending 和 isSent 不應(yīng)同時(shí)為 true，所以最好用一個(gè) status 變量來(lái)代替它們，這個(gè) state 變量可以采取三種有效狀態(tài)其中之一：'typing' (初始), 'sending', 和 'sent':

import { useState } from 'react';export default function FeedbackForm() {const [text, setText] = useState('');const [status, setStatus] = useState('typing');async function handleSubmit(e) {e.preventDefault();setStatus('sending');await sendMessage(text);setStatus('sent');}const isSending = status === 'sending';const isSent = status === 'sent';if (isSent) {return <h1>Thanks for feedback!</h1>}return (<form onSubmit={handleSubmit}><p>How was your stay at The Prancing Pony?</p><textareadisabled={isSending}value={text}onChange={e => setText(e.target.value)}/><br /><buttondisabled={isSending}type="submit">Send</button>{isSending && <p>Sending...</p>}</form>);
}// 假裝發(fā)送一條消息。
function sendMessage(text) {return new Promise(resolve => {setTimeout(resolve, 2000);});
}

仍然可以聲明一些常量，以提高可讀性：

const isSending = status === 'sending';
const isSent = status === 'sent';

但它們不是 state 變量，所以不必?fù)?dān)心它們彼此失去同步。

避免冗余的 state

如果能在渲染期間從組件的 props 或其現(xiàn)有的 state 變量中計(jì)算出一些信息，則不應(yīng)該把這些信息放到該組件的 state 中。

例如，以這個(gè)表單為例。它可以運(yùn)行，但你能找到其中任何冗余的 state 嗎？

import { useState } from 'react';export default function Form() {const [firstName, setFirstName] = useState('');const [lastName, setLastName] = useState('');const [fullName, setFullName] = useState('');function handleFirstNameChange(e) {setFirstName(e.target.value);setFullName(e.target.value + ' ' + lastName);}function handleLastNameChange(e) {setLastName(e.target.value);setFullName(firstName + ' ' + e.target.value);}return (<><h2>Let’s check you in</h2><label>First name:{' '}<inputvalue={firstName}onChange={handleFirstNameChange}/></label><label>Last name:{' '}<inputvalue={lastName}onChange={handleLastNameChange}/></label><p>Your ticket will be issued to: <b>{fullName}</b></p></>);
}

這個(gè)表單有三個(gè) state 變量：firstName、lastName 和 fullName。然而，fullName 是多余的。在渲染期間，始終可以從 firstName 和 lastName 中計(jì)算出 fullName，因此需要把它從 state 中刪除。

可以這樣做：

import { useState } from 'react';export default function Form() {const [firstName, setFirstName] = useState('');const [lastName, setLastName] = useState('');const fullName = firstName + ' ' + lastName;function handleFirstNameChange(e) {setFirstName(e.target.value);}function handleLastNameChange(e) {setLastName(e.target.value);}return (<><h2>Let’s check you in</h2><label>First name:{' '}<inputvalue={firstName}onChange={handleFirstNameChange}/></label><label>Last name:{' '}<inputvalue={lastName}onChange={handleLastNameChange}/></label><p>Your ticket will be issued to: <b>{fullName}</b></p></>);
}

這里的 fullName 不是 一個(gè) state 變量。相反，它是在渲染期間中計(jì)算出的：

const fullName = firstName + ' ' + lastName;

因此，更改處理程序不需要做任何特殊操作來(lái)更新它。當(dāng)調(diào)用 setFirstName 或 setLastName 時(shí)，會(huì)觸發(fā)一次重新渲染，然后下一個(gè) fullName 將從新數(shù)據(jù)中計(jì)算出來(lái)。

避免重復(fù)的 state

下面這個(gè)菜單列表組件可以讓你在多種旅行小吃中選擇一個(gè)：

import { useState } from 'react';const initialItems = [{ title: 'pretzels', id: 0 },{ title: 'crispy seaweed', id: 1 },{ title: 'granola bar', id: 2 },
];export default function Menu() {const [items, setItems] = useState(initialItems);const [selectedItem, setSelectedItem] = useState(items[0]);return (<><h2>What's your travel snack?</h2><ul>{items.map(item => (<li key={item.id}>{item.title}{' '}<button onClick={() => {setSelectedItem(item);}}>Choose</button></li>))}</ul><p>You picked {selectedItem.title}.</p></>);
}

當(dāng)前，它將所選元素作為對(duì)象存儲(chǔ)在 selectedItem state 變量中。然而，這并不好：selectedItem 的內(nèi)容與 items 列表中的某個(gè)項(xiàng)是同一個(gè)對(duì)象。 這意味著關(guān)于該項(xiàng)本身的信息在兩個(gè)地方產(chǎn)生了重復(fù)。

為什么這是個(gè)問(wèn)題？讓我們使每個(gè)項(xiàng)目都可以編輯：

import { useState } from 'react';const initialItems = [{ title: 'pretzels', id: 0 },{ title: 'crispy seaweed', id: 1 },{ title: 'granola bar', id: 2 },
];export default function Menu() {const [items, setItems] = useState(initialItems);const [selectedItem, setSelectedItem] = useState(items[0]);function handleItemChange(id, e) {setItems(items.map(item => {if (item.id === id) {return {...item,title: e.target.value,};} else {return item;}}));}return (<><h2>What's your travel snack?</h2> <ul>{items.map((item, index) => (<li key={item.id}><inputvalue={item.title}onChange={e => {handleItemChange(item.id, e)}}/>{' '}<button onClick={() => {setSelectedItem(item);}}>Choose</button></li>))}</ul><p>You picked {selectedItem.title}.</p></>);
}

請(qǐng)注意，如果首先單擊菜單上的“Choose” 然后 編輯它，輸入會(huì)更新，但底部的標(biāo)簽不會(huì)反映編輯內(nèi)容。 這是因?yàn)橛兄貜?fù)的 state，并且忘記更新了 selectedItem。

盡管也可以更新 selectedItem，但更簡(jiǎn)單的解決方法是消除重復(fù)項(xiàng)。在下面這個(gè)例子中，將 selectedId 保存在 state 中，而不是在 selectedItem 對(duì)象中（它創(chuàng)建了一個(gè)與 items 內(nèi)重復(fù)的對(duì)象），然后 通過(guò)搜索 items 數(shù)組中具有該 ID 的項(xiàng)，以此獲取 selectedItem：

import { useState } from 'react';const initialItems = [{ title: 'pretzels', id: 0 },{ title: 'crispy seaweed', id: 1 },{ title: 'granola bar', id: 2 },
];export default function Menu() {const [items, setItems] = useState(initialItems);const [selectedId, setSelectedId] = useState(0);const selectedItem = items.find(item =>item.id === selectedId);function handleItemChange(id, e) {setItems(items.map(item => {if (item.id === id) {return {...item,title: e.target.value,};} else {return item;}}));}return (<><h2>What's your travel snack?</h2><ul>{items.map((item, index) => (<li key={item.id}><inputvalue={item.title}onChange={e => {handleItemChange(item.id, e)}}/>{' '}<button onClick={() => {setSelectedId(item.id);}}>Choose</button></li>))}</ul><p>You picked {selectedItem.title}.</p></>);
}

(或者，可以將所選索引保持在 state 中。)

state 過(guò)去常常是這樣復(fù)制的：

• items = [{ id: 0, title: 'pretzels'}, ...]
• selectedItem = {id: 0, title: 'pretzels'}

改了之后是這樣的：

• items = [{ id: 0, title: 'pretzels'}, ...]
• selectedId = 0

重復(fù)的 state 沒(méi)有了，只保留了必要的 state！

現(xiàn)在，如果編輯 selected 元素，下面的消息將立即更新。這是因?yàn)?setItems 會(huì)觸發(fā)重新渲染，而 items.find(...) 會(huì)找到帶有更新文本的元素。不需要在 state 中保存 選定的元素，因?yàn)橹挥?選定的 ID 是必要的。其余的可以在渲染期間計(jì)算。

避免深度嵌套的 state

想象一下，一個(gè)由行星、大陸和國(guó)家組成的旅行計(jì)劃?？赡軙?huì)嘗試使用嵌套對(duì)象和數(shù)組來(lái)構(gòu)建它的 state，就像下面這個(gè)例子：

import { useState } from 'react';
import { initialTravelPlan } from './places.js';function PlaceTree({ place }) {const childPlaces = place.childPlaces;return (<li>{place.title}{childPlaces.length > 0 && (<ol>{childPlaces.map(place => (<PlaceTree key={place.id} place={place} />))}</ol>)}</li>);
}export default function TravelPlan() {const [plan, setPlan] = useState(initialTravelPlan);const planets = plan.childPlaces;return (<><h2>Places to visit</h2><ol>{planets.map(place => (<PlaceTree key={place.id} place={place} />))}</ol></>);
}

// places.js
export const initialTravelPlan = {id: 0,title: '(Root)',childPlaces: [{id: 1,title: 'Earth',childPlaces: [{id: 2,title: 'Africa',childPlaces: [{id: 3,title: 'Botswana',childPlaces: []}, {id: 4,title: 'Egypt',childPlaces: []}]}, {id: 10,title: 'Americas',childPlaces: [{id: 18,title: 'Venezuela',childPlaces: []}]}, {id: 19,title: 'Asia',childPlaces: [{id: 20,title: 'China',childPlaces: []}]}, {id: 26,title: 'Europe',childPlaces: [{id: 27,title: 'Croatia',childPlaces: [],}, {id: 33,title: 'Turkey',childPlaces: [],}]}, {id: 34,title: 'Oceania',childPlaces: [{id: 35,title: 'Australia',childPlaces: [],}]}]}, {id: 42,title: 'Moon',childPlaces: [{id: 43,title: 'Rheita',childPlaces: []}]}]
};

現(xiàn)在，假設(shè)想添加一個(gè)按鈕來(lái)刪除一個(gè)已經(jīng)去過(guò)的地方。會(huì)怎么做呢？更新嵌套的 state 需要從更改部分一直向上復(fù)制對(duì)象。刪除一個(gè)深度嵌套的地點(diǎn)將涉及復(fù)制其整個(gè)父級(jí)地點(diǎn)鏈。這樣的代碼可能非常冗長(zhǎng)。

如果 state 嵌套太深，難以輕松更新，可以考慮將其“扁平化”。 這里有一個(gè)方法可以重構(gòu)上面這個(gè)數(shù)據(jù)。不同于樹(shù)狀結(jié)構(gòu)，每個(gè)節(jié)點(diǎn)的 place 都是一個(gè)包含 其子節(jié)點(diǎn) 的數(shù)組，可以讓每個(gè)節(jié)點(diǎn)的 place 作為數(shù)組保存 其子節(jié)點(diǎn)的 ID。然后存儲(chǔ)一個(gè)節(jié)點(diǎn) ID 與相應(yīng)節(jié)點(diǎn)的映射關(guān)系。

這個(gè)數(shù)據(jù)重組可能會(huì)讓你想起看到一個(gè)數(shù)據(jù)庫(kù)表：

import { useState } from 'react';
import { initialTravelPlan } from './places.js';function PlaceTree({ id, placesById }) {const place = placesById[id];const childIds = place.childIds;return (<li>{place.title}{childIds.length > 0 && (<ol>{childIds.map(childId => (<PlaceTreekey={childId}id={childId}placesById={placesById}/>))}</ol>)}</li>);
}export default function TravelPlan() {const [plan, setPlan] = useState(initialTravelPlan);const root = plan[0];const planetIds = root.childIds;return (<><h2>Places to visit</h2><ol>{planetIds.map(id => (<PlaceTreekey={id}id={id}placesById={plan}/>))}</ol></>);
}

// places.js
export const initialTravelPlan = {0: {id: 0,title: '(Root)',childIds: [1, 42],},1: {id: 1,title: 'Earth',childIds: [2, 10, 19, 26, 34]},2: {id: 2,title: 'Africa',childIds: [3, 4]}, 3: {id: 3,title: 'Botswana',childIds: []},4: {id: 4,title: 'Egypt',childIds: []},10: {id: 10,title: 'Americas',childIds: [18],   },18: {id: 18,title: 'Venezuela',childIds: []},19: {id: 19,title: 'Asia',childIds: [20],   },20: {id: 20,title: 'China',childIds: []},26: {id: 26,title: 'Europe',childIds: [27, 33],   },27: {id: 27,title: 'Croatia',childIds: []},33: {id: 33,title: 'Turkey',childIds: []},34: {id: 34,title: 'Oceania',childIds: [35],   },35: {id: 35,title: 'Australia',childIds: []},42: {id: 42,title: 'Moon',childIds: [43]},43: {id: 43,title: 'Rheita',childIds: []},
};

現(xiàn)在 state 已經(jīng)“扁平化”（也稱為“規(guī)范化”），更新嵌套項(xiàng)會(huì)變得更加容易。

現(xiàn)在要?jiǎng)h除一個(gè)地點(diǎn)，只需要更新兩個(gè) state 級(jí)別：

• 其 父級(jí) 地點(diǎn)的更新版本應(yīng)該從其 childIds 數(shù)組中排除已刪除的 ID。
• 其根級(jí)“表”對(duì)象的更新版本應(yīng)包括父級(jí)地點(diǎn)的更新版本。

下面是展示如何處理它的一個(gè)示例：

import { useState } from 'react';
import { initialTravelPlan } from './places.js';export default function TravelPlan() {const [plan, setPlan] = useState(initialTravelPlan);function handleComplete(parentId, childId) {const parent = plan[parentId];// 創(chuàng)建一個(gè)其父級(jí)地點(diǎn)的新版本// 但不包括子級(jí) ID。const nextParent = {...parent,childIds: parent.childIds.filter(id => id !== childId)};// 更新根 state 對(duì)象...setPlan({...plan,// ...以便它擁有更新的父級(jí)。[parentId]: nextParent});}const root = plan[0];const planetIds = root.childIds;return (<><h2>Places to visit</h2><ol>{planetIds.map(id => (<PlaceTreekey={id}id={id}parentId={0}placesById={plan}onComplete={handleComplete}/>))}</ol></>);
}function PlaceTree({ id, parentId, placesById, onComplete }) {const place = placesById[id];const childIds = place.childIds;return (<li>{place.title}<button onClick={() => {onComplete(parentId, id);}}>Complete</button>{childIds.length > 0 &&<ol>{childIds.map(childId => (<PlaceTreekey={childId}id={childId}parentId={id}placesById={placesById}onComplete={onComplete}/>))}</ol>}</li>);
}

確實(shí)可以隨心所欲地嵌套 state，但是將其“扁平化”可以解決許多問(wèn)題。這使得 state 更容易更新，并且有助于確保在嵌套對(duì)象的不同部分中沒(méi)有重復(fù)。

有時(shí)候，也可以通過(guò)將一些嵌套 state 移動(dòng)到子組件中來(lái)減少 state 的嵌套。這對(duì)于不需要保存的短暫 UI 狀態(tài)非常有效，比如一個(gè)選項(xiàng)是否被懸停。

摘要

• 如果兩個(gè) state 變量總是一起更新，請(qǐng)考慮將它們合并為一個(gè)。
• 仔細(xì)選擇 state 變量，以避免創(chuàng)建“極難處理”的 state。
• 用一種減少出錯(cuò)更新的機(jī)會(huì)的方式來(lái)構(gòu)建 state。
• 避免冗余和重復(fù)的 state，這樣就不需要保持同步。
• 除非特別想防止更新，否則不要將 props 放入 state 中。
• 對(duì)于選擇類型的 UI 模式，請(qǐng)?jiān)?state 中保存 ID 或索引而不是對(duì)象本身。
• 如果深度嵌套 state 更新很復(fù)雜，請(qǐng)嘗試將其展開(kāi)扁平化。