在React中,选择合适的state结构是构建高效、可维护应用程序的关键。本文将深入探讨如何根据React官方文档的建议来选择state结构,并提供实用的技巧、示例代码以及注意事项。
合并关联的State
当你发现自己在多个state变量上执行相同的操作时,最好将它们合并为一个单独的state变量。
技巧:
- 使用对象或数组来组合相关的state。
- 当更新state时,确保更新所有相关字段。
示例:
const [position, setPosition] = useState({ x: 0, y: 0 });
function handlePointerMove(e) {
setPosition({ x: e.clientX, y: e.clientY });
}
注意事项:
- 当使用对象作为state时,更新单个字段时不要忘记保留其他字段。
- 或者使用immer
正确代码:
setPosition(prevPosition => ({ ...prevPosition, x: 100 }));
错误代码:
setPosition({ x: 100 }); // 错误:丢失了y属性
避免矛盾的State
确保state之间不会出现逻辑上的矛盾,例如,一个变量表示正在发送中,另一个变量表示已发送,这两个状态不应该同时出现。
技巧:
- 使用枚举或状态机来管理相关的状态。
- 用一个state变量替代多个可能导致矛盾的state变量。
示例:
const [status, setStatus] = useState('typing'); // 'typing', 'sending', 'sent'
function handleSubmit(e) {
e.preventDefault();
setStatus('sending');
sendMessage(text).then(() => setStatus('sent'));
}
注意事项:
- 避免创建逻辑上可能冲突的多个state。
正确代码:
setStatus('sending');
错误代码:
// 错误:定义多个状态,可能会导致状态冲突
setIsSending(true);
setIsSent(false);
避免冗余的State
不要在state中存储可以从props或其他state计算得出的值。
技巧:
- 使用计算属性或者在渲染方法中直接计算出这些值。
示例:
const [firstName, setFirstName] = useState('');
const [lastName, setLastName] = useState('');
const fullName = `${firstName} ${lastName}`;
注意事项:
- 不要将可计算的数据存储为state。
正确代码:
const fullName = `${firstName} ${lastName}`;
错误代码:
const [fullName, setFullName] = useState(''); // 错误:这是一个冗余的state
避免重复的State
当相同的数据在多个地方出现时,应该考虑将其集中管理。
技巧:
- 在state中存储唯一的标识符,而不是整个数据对象。
- 使用查找表来管理数据。
示例:
const [items, setItems] = useState([{ id: 1, name: 'Item 1' }]);
const [selectedId, setSelectedId] = useState(1);
const selectedItem = items.find(item => item.id === selectedId);
注意事项:
- 避免在不同的state变量中存储相同的数据。
正确代码:
const selectedItem = items.find(item => item.id === selectedId);
错误代码:
const [selectedItem, setSelectedItem] = useState(items[0]); // 错误:创建了不必要的重复state
避免深度嵌套的State
深度嵌套的state很难管理和更新。尽可能地扁平化你的state结构。
技巧:
- 使用扁平化的数据结构,如ID映射表。
- 将复杂的state逻辑拆分到更小的组件中。
示例:
const [plan, setPlan] = useState({
0: { id: 0, title: 'Root', childIds: [1, 2] },
1: { id: 1, title: 'Child 1', childIds: [] },
2: { id: 2, title: 'Child 2', childIds: [] }
});
function handleDelete(id) {
setPlan(prevPlan => {
const newPlan = { ...prevPlan };
delete newPlan[id];
return newPlan;
});
}
注意事项:
- 避免在state中使用过于复杂的数据结构。
正确代码:
const newPlan = { ...prevPlan };
delete newPlan[id];
错误代码:
setPlan(prevPlan => {
prevPlan[id].childIds = []; // 错误:直接修改了state
return prevPlan;
});
记住,简化你的state结构可以减少bug,提高性能,并使你的代码更易于理解。
原文链接:https://juejin.cn/post/7341757372187836416 作者:辰火流光