良好的状态结构可以决定一个组件是易于修改和调试,还是成为错误的根源。以下是在构建状态时应考虑的一些技巧。
你将学习
- 何时使用单个或多个状态变量
- 组织状态时应避免什么
- 如何修复状态结构中的常见问题
状态结构的原则
当你编写一个包含一些状态的组件时,你必须选择使用多少个状态变量以及它们的数据形状。虽然即使状态结构不是最优的,也可以编写出正确的程序,但有一些原则可以指导你做出更好的选择。
- 将相关状态分组。如果你总是同时更新两个或多个状态变量,请考虑将它们合并为一个状态变量。
- 避免状态冲突。如果状态的结构方式是多个状态片段可能相互矛盾和“不一致”,那么你就为错误留下了空间。尽量避免这种情况。
- 避免冗余状态。如果可以在渲染期间从组件的 props 或其现有状态变量计算出某些信息,则不应将该信息放入该组件的状态中。
- 避免状态重复。当相同的数据在多个状态变量之间或嵌套对象中重复时,很难保持它们同步。尽可能减少重复。
- 避免深度嵌套状态。深度层次结构的状态更新起来不是很方便。如果可能,请尽量以扁平的方式构建状态。
这些原则的目标是使状态易于更新,而不会引入错误。从状态中删除冗余和重复的数据有助于确保所有数据片段保持同步。这类似于数据库工程师可能希望“规范化”数据库结构以减少错误的可能性。用阿尔伯特·爱因斯坦的话来说,“让你的状态尽可能简单,但不要过于简单。”
现在让我们看看这些原则如何在实际中应用。
将相关状态分组
你可能有时不确定是使用单个还是多个状态变量。
你应该这样做吗?
const [x, setX] = useState(0);
const [y, setY] = useState(0);
还是这样做?
const [position, setPosition] = useState({ x: 0, y: 0 });
从技术上讲,你可以使用这两种方法中的任何一种。但是如果某些状态变量总是同时发生变化,那么将它们统一为一个状态变量可能是个好主意。这样你就不会忘记总是保持它们同步,就像在这个例子中,移动光标会更新红点的两个坐标
import { useState } from 'react'; export default function MovingDot() { const [position, setPosition] = useState({ x: 0, y: 0 }); return ( <div onPointerMove={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> ) }
将数据分组到对象或数组中的另一种情况是,当你不知道需要多少个状态片段时。例如,当你有一个表单,用户可以在其中添加自定义字段时,这很有用。
避免状态冲突
这是一个酒店反馈表单,它包含 isSending
和 isSent
状态变量。
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> <textarea disabled={isSending} value={text} onChange={e => setText(e.target.value)} /> <br /> <button disabled={isSending} type="submit" > Send </button> {isSending && <p>Sending...</p>} </form> ); } // Pretend to send a message. function sendMessage(text) { return new Promise(resolve => { setTimeout(resolve, 2000); }); }
虽然这段代码可以工作,但它为“不可能”的状态打开了大门。例如,如果您忘记同时调用 setIsSent
和 setIsSending
,您可能会遇到 isSending
和 isSent
同时为 true
的情况。组件越复杂,就越难理解发生了什么。
由于 isSending
和 isSent
永远不应该同时为 true
,因此最好将它们替换为一个 status
状态变量,该变量可以采用以下 *三种* 有效状态之一:'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> <textarea disabled={isSending} value={text} onChange={e => setText(e.target.value)} /> <br /> <button disabled={isSending} type="submit" > Send </button> {isSending && <p>Sending...</p>} </form> ); } // Pretend to send a message. function sendMessage(text) { return new Promise(resolve => { setTimeout(resolve, 2000); }); }
为了提高可读性,您仍然可以声明一些常量。
const isSending = status === 'sending';
const isSent = status === 'sent';
但它们不是状态变量,因此您无需担心它们彼此不同步。
避免冗余状态
如果您可以渲染期间从组件的 props 或其现有状态变量中计算出某些信息,则 不应 将该信息放入该组件的状态中。
例如,以这个表单为例。它可以工作,但是您能找到任何冗余状态吗?
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:{' '} <input value={firstName} onChange={handleFirstNameChange} /> </label> <label> Last name:{' '} <input value={lastName} onChange={handleLastNameChange} /> </label> <p> Your ticket will be issued to: <b>{fullName}</b> </p> </> ); }
此表单包含三个状态变量:firstName
、lastName
和 fullName
。但是,fullName
是冗余的。您始终可以在渲染期间从 firstName
和 lastName
计算出 fullName
,因此请将其从状态中删除。
您可以这样做:
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:{' '} <input value={firstName} onChange={handleFirstNameChange} /> </label> <label> Last name:{' '} <input value={lastName} onChange={handleLastNameChange} /> </label> <p> Your ticket will be issued to: <b>{fullName}</b> </p> </> ); }
在这里,fullName
*不是* 状态变量。相反,它是在渲染过程中计算出来的。
const fullName = firstName + ' ' + lastName;
因此,更改处理程序不需要执行任何特殊操作来更新它。当您调用 setFirstName
或 setLastName
时,您会触发重新渲染,然后下一个 fullName
将根据最新数据进行计算。
深入探讨
冗余状态的一个常见示例如下所示:
function Message({ messageColor }) {
const [color, setColor] = useState(messageColor);
这里,color
状态变量被初始化为 messageColor
prop。问题是,如果父组件稍后传递了不同的 messageColor
值(例如,'red'
而不是 'blue'
),则 color
*状态变量* 将不会更新!状态仅在第一次渲染期间初始化。
这就是为什么在状态变量中“镜像”某些 prop 会导致混淆的原因。相反,请直接在您的代码中使用 messageColor
prop。如果您想给它起一个更短的名称,请使用常量。
function Message({ messageColor }) {
const color = messageColor;
这样,它就不会与从父组件传递的 prop 不同步。
只有当您 *想要* 忽略特定 prop 的所有更新时,“镜像”props 到状态才有意义。按照惯例,prop 名称以 initial
或 default
开头,以表明其新值将被忽略。
function Message({ initialColor }) {
// The `color` state variable holds the *first* value of `initialColor`.
// Further changes to the `initialColor` prop are ignored.
const [color, setColor] = useState(initialColor);
避免状态重复
此菜单列表组件允许您从多个旅游零食中选择一个。
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> </> ); }
目前,它将所选项目作为对象存储在 selectedItem
状态变量中。但是,这并不理想:selectedItem
的内容与 items
列表中某个项目的同一个对象。这意味着有关项目本身的信息在两个地方重复。
为什么这是一个问题?让我们使每个项目都可编辑。
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}> <input value={item.title} onChange={e => { handleItemChange(item.id, e) }} /> {' '} <button onClick={() => { setSelectedItem(item); }}>Choose</button> </li> ))} </ul> <p>You picked {selectedItem.title}.</p> </> ); }
请注意,如果您首先单击某个项目上的“选择”,*然后* 编辑它,输入会更新,但底部的标签不会反映编辑。这是因为您重复了状态,并且忘记更新 selectedItem
。
尽管您也可以更新 selectedItem
,但更简单的修复方法是删除重复项。在此示例中,您不是使用 selectedItem
对象(它会在 items
内部的对象中创建重复项),而是在状态中保存 selectedId
,*然后* 通过在 items
数组中搜索具有该 ID 的项目来获取 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}> <input value={item.title} onChange={e => { handleItemChange(item.id, e) }} /> {' '} <button onClick={() => { setSelectedId(item.id); }}>Choose</button> </li> ))} </ul> <p>You picked {selectedItem.title}.</p> </> ); }
过去,状态的重复方式如下:
items = [{ id: 0, title: 'pretzels'}, ...]
selectedItem = {id: 0, title: 'pretzels'}
但更改后,它如下所示:
items = [{ id: 0, title: 'pretzels'}, ...]
selectedId = 0
重复项消失了,您只保留了必要的状态!
现在,如果您编辑 *选定* 的项目,则下面的消息将立即更新。这是因为 setItems
触发了重新渲染,并且 items.find(...)
会找到标题已更新的项目。您不需要在状态中保存 *选定的项目*,因为只有 *选定的 ID* 是必需的。其余的可以在渲染期间计算。
避免深度嵌套的状态
想象一下一个包含行星、大陆和国家的旅行计划。你可能很想使用嵌套对象和数组来构建它的状态,就像这个例子一样:
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: 5, title: 'Kenya', childPlaces: [] }, { id: 6, title: 'Madagascar', childPlaces: [] }, { id: 7, title: 'Morocco', childPlaces: [] }, { id: 8, title: 'Nigeria', childPlaces: [] }, { id: 9, title: 'South Africa', childPlaces: [] }] }, { id: 10, title: 'Americas', childPlaces: [{ id: 11, title: 'Argentina', childPlaces: [] }, { id: 12, title: 'Brazil', childPlaces: [] }, { id: 13, title: 'Barbados', childPlaces: [] }, { id: 14, title: 'Canada', childPlaces: [] }, { id: 15, title: 'Jamaica', childPlaces: [] }, { id: 16, title: 'Mexico', childPlaces: [] }, { id: 17, title: 'Trinidad and Tobago', childPlaces: [] }, { id: 18, title: 'Venezuela', childPlaces: [] }] }, { id: 19, title: 'Asia', childPlaces: [{ id: 20, title: 'China', childPlaces: [] }, { id: 21, title: 'India', childPlaces: [] }, { id: 22, title: 'Singapore', childPlaces: [] }, { id: 23, title: 'South Korea', childPlaces: [] }, { id: 24, title: 'Thailand', childPlaces: [] }, { id: 25, title: 'Vietnam', childPlaces: [] }] }, { id: 26, title: 'Europe', childPlaces: [{ id: 27, title: 'Croatia', childPlaces: [], }, { id: 28, title: 'France', childPlaces: [], }, { id: 29, title: 'Germany', childPlaces: [], }, { id: 30, title: 'Italy', childPlaces: [], }, { id: 31, title: 'Portugal', childPlaces: [], }, { id: 32, title: 'Spain', childPlaces: [], }, { id: 33, title: 'Turkey', childPlaces: [], }] }, { id: 34, title: 'Oceania', childPlaces: [{ id: 35, title: 'Australia', childPlaces: [], }, { id: 36, title: 'Bora Bora (French Polynesia)', childPlaces: [], }, { id: 37, title: 'Easter Island (Chile)', childPlaces: [], }, { id: 38, title: 'Fiji', childPlaces: [], }, { id: 39, title: 'Hawaii (the USA)', childPlaces: [], }, { id: 40, title: 'New Zealand', childPlaces: [], }, { id: 41, title: 'Vanuatu', childPlaces: [], }] }] }, { id: 42, title: 'Moon', childPlaces: [{ id: 43, title: 'Rheita', childPlaces: [] }, { id: 44, title: 'Piccolomini', childPlaces: [] }, { id: 45, title: 'Tycho', childPlaces: [] }] }, { id: 46, title: 'Mars', childPlaces: [{ id: 47, title: 'Corn Town', childPlaces: [] }, { id: 48, title: 'Green Hill', childPlaces: [] }] }] };
现在假设你想添加一个按钮来删除你已经访问过的地点。你会怎么做?更新嵌套状态 涉及从更改的部分开始一直向上复制对象。删除一个深度嵌套的地方将涉及复制其整个父地点链。这样的代码可能非常冗长。
如果状态嵌套太多而难以更新,请考虑使其“扁平化”。 这里有一种方法可以重构此数据。不是每个 place
都有一个_其子地点_数组的树状结构,而是让每个地点都包含一个_其子地点 ID_ 的数组。然后存储从每个地点 ID 到对应地点的映射。
这种数据重构可能会让你想起看到数据库表
export const initialTravelPlan = { 0: { id: 0, title: '(Root)', childIds: [1, 42, 46], }, 1: { id: 1, title: 'Earth', childIds: [2, 10, 19, 26, 34] }, 2: { id: 2, title: 'Africa', childIds: [3, 4, 5, 6 , 7, 8, 9] }, 3: { id: 3, title: 'Botswana', childIds: [] }, 4: { id: 4, title: 'Egypt', childIds: [] }, 5: { id: 5, title: 'Kenya', childIds: [] }, 6: { id: 6, title: 'Madagascar', childIds: [] }, 7: { id: 7, title: 'Morocco', childIds: [] }, 8: { id: 8, title: 'Nigeria', childIds: [] }, 9: { id: 9, title: 'South Africa', childIds: [] }, 10: { id: 10, title: 'Americas', childIds: [11, 12, 13, 14, 15, 16, 17, 18], }, 11: { id: 11, title: 'Argentina', childIds: [] }, 12: { id: 12, title: 'Brazil', childIds: [] }, 13: { id: 13, title: 'Barbados', childIds: [] }, 14: { id: 14, title: 'Canada', childIds: [] }, 15: { id: 15, title: 'Jamaica', childIds: [] }, 16: { id: 16, title: 'Mexico', childIds: [] }, 17: { id: 17, title: 'Trinidad and Tobago', childIds: [] }, 18: { id: 18, title: 'Venezuela', childIds: [] }, 19: { id: 19, title: 'Asia', childIds: [20, 21, 22, 23, 24, 25], }, 20: { id: 20, title: 'China', childIds: [] }, 21: { id: 21, title: 'India', childIds: [] }, 22: { id: 22, title: 'Singapore', childIds: [] }, 23: { id: 23, title: 'South Korea', childIds: [] }, 24: { id: 24, title: 'Thailand', childIds: [] }, 25: { id: 25, title: 'Vietnam', childIds: [] }, 26: { id: 26, title: 'Europe', childIds: [27, 28, 29, 30, 31, 32, 33], }, 27: { id: 27, title: 'Croatia', childIds: [] }, 28: { id: 28, title: 'France', childIds: [] }, 29: { id: 29, title: 'Germany', childIds: [] }, 30: { id: 30, title: 'Italy', childIds: [] }, 31: { id: 31, title: 'Portugal', childIds: [] }, 32: { id: 32, title: 'Spain', childIds: [] }, 33: { id: 33, title: 'Turkey', childIds: [] }, 34: { id: 34, title: 'Oceania', childIds: [35, 36, 37, 38, 39, 40, 41], }, 35: { id: 35, title: 'Australia', childIds: [] }, 36: { id: 36, title: 'Bora Bora (French Polynesia)', childIds: [] }, 37: { id: 37, title: 'Easter Island (Chile)', childIds: [] }, 38: { id: 38, title: 'Fiji', childIds: [] }, 39: { id: 40, title: 'Hawaii (the USA)', childIds: [] }, 40: { id: 40, title: 'New Zealand', childIds: [] }, 41: { id: 41, title: 'Vanuatu', childIds: [] }, 42: { id: 42, title: 'Moon', childIds: [43, 44, 45] }, 43: { id: 43, title: 'Rheita', childIds: [] }, 44: { id: 44, title: 'Piccolomini', childIds: [] }, 45: { id: 45, title: 'Tycho', childIds: [] }, 46: { id: 46, title: 'Mars', childIds: [47, 48] }, 47: { id: 47, title: 'Corn Town', childIds: [] }, 48: { id: 48, title: 'Green Hill', childIds: [] } };
现在状态是“扁平的”(也称为“规范化的”),更新嵌套项目变得更容易。
为了删除一个地点,现在你只需要更新两个级别的状态
- 其_父_地点的更新版本应从其
childIds
数组中排除已删除的 ID。 - 根“表”对象的更新版本应包含父地点的更新版本。
这是一个如何进行的示例
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]; // Create a new version of the parent place // that doesn't include this child ID. const nextParent = { ...parent, childIds: parent.childIds .filter(id => id !== childId) }; // Update the root state object... setPlan({ ...plan, // ...so that it has the updated parent. [parentId]: nextParent }); } const root = plan[0]; const planetIds = root.childIds; return ( <> <h2>Places to visit</h2> <ol> {planetIds.map(id => ( <PlaceTree key={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 => ( <PlaceTree key={childId} id={childId} parentId={id} placesById={placesById} onComplete={onComplete} /> ))} </ol> } </li> ); }
你可以根据需要嵌套状态,但将其“扁平化”可以解决许多问题。它使状态更易于更新,并有助于确保嵌套对象的不用部分中没有重复。
深入探讨
理想情况下,你还应该从“表”对象中删除已删除的项目(及其子项!)以提高内存使用率。这个版本做到了。它也 使用 Immer 使更新逻辑更简洁。
{ "dependencies": { "immer": "1.7.3", "react": "latest", "react-dom": "latest", "react-scripts": "latest", "use-immer": "0.5.1" }, "scripts": { "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test --env=jsdom", "eject": "react-scripts eject" }, "devDependencies": {} }
有时,你还可以通过将一些嵌套状态移动到子组件中来减少状态嵌套。这适用于不需要存储的临时 UI 状态,例如项目是否悬停。
回顾
- 如果两个状态变量始终一起更新,请考虑将它们合并为一个。
- 请谨慎选择状态变量,以避免创建“不可能”的状态。
- 以减少更新状态时出错的可能性来构建状态。
- 避免冗余和重复状态,这样你就不需要保持它们同步。
- 不要将 props 放入状态_中_,除非你特别想阻止更新。
- 对于像选择这样的 UI 模式,请在状态中保留 ID 或索引,而不是对象本身。
- 如果更新深度嵌套的状态很复杂,请尝试将其扁平化。
挑战 1的 4: 修复不更新的组件
此 Clock
组件接收两个属性:color
和 time
。当你在选择框中选择不同的颜色时,Clock
组件会从其父组件接收不同的 color
属性。但是,由于某种原因,显示的颜色不会更新。为什么?解决这个问题。
import { useState } from 'react'; export default function Clock(props) { const [color, setColor] = useState(props.color); return ( <h1 style={{ color: color }}> {props.time} </h1> ); }