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

原文链接:https://juejin.cn/post/7341757372187836416 作者:辰火流光

(0)
上一篇 2024年3月4日 上午10:16
下一篇 2024年3月4日 上午10:27

相关推荐

发表回复

登录后才能评论