React基础 第十七章（良好的State结构）

在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，提高性能，并使你的代码更易于理解。