React基础 第十七章(良好的State结构)

在React中,选择合适的state结构是构建高效、可维护应用程序的关键。本文将深入探讨如何根据React官方文档的建议来选择state结构,并提供实用的技巧、示例代码以及注意事项。

合并关联的State

当你发现自己在多个state变量上执行相同的操作时,最好将它们合并为一个单独的state变量。

技巧

  • 使用对象或数组来组合相关的state。
  • 当更新state时,确保更新所有相关字段。

示例

jsx 复制代码
const [position, setPosition] = useState({ x: 0, y: 0 });

function handlePointerMove(e) {
  setPosition({ x: e.clientX, y: e.clientY });
}

注意事项

  • 当使用对象作为state时,更新单个字段时不要忘记保留其他字段。
  • 或者使用immer

正确代码

jsx 复制代码
setPosition(prevPosition => ({ ...prevPosition, x: 100 }));

错误代码

jsx 复制代码
setPosition({ x: 100 }); // 错误:丢失了y属性

避免矛盾的State

确保state之间不会出现逻辑上的矛盾,例如,一个变量表示正在发送中,另一个变量表示已发送,这两个状态不应该同时出现。

技巧

  • 使用枚举或状态机来管理相关的状态。
  • 用一个state变量替代多个可能导致矛盾的state变量。

示例

jsx 复制代码
const [status, setStatus] = useState('typing'); // 'typing', 'sending', 'sent'

function handleSubmit(e) {
  e.preventDefault();
  setStatus('sending');
  sendMessage(text).then(() => setStatus('sent'));
}

注意事项

  • 避免创建逻辑上可能冲突的多个state。

正确代码

jsx 复制代码
setStatus('sending');

错误代码

jsx 复制代码
// 错误:定义多个状态,可能会导致状态冲突
setIsSending(true);
setIsSent(false);

避免冗余的State

不要在state中存储可以从props或其他state计算得出的值。

技巧

  • 使用计算属性或者在渲染方法中直接计算出这些值。

示例

jsx 复制代码
const [firstName, setFirstName] = useState('');
const [lastName, setLastName] = useState('');
const fullName = `${firstName} ${lastName}`;

注意事项

  • 不要将可计算的数据存储为state。

正确代码

jsx 复制代码
const fullName = `${firstName} ${lastName}`;

错误代码

jsx 复制代码
const [fullName, setFullName] = useState(''); // 错误:这是一个冗余的state

避免重复的State

当相同的数据在多个地方出现时,应该考虑将其集中管理。

技巧

  • 在state中存储唯一的标识符,而不是整个数据对象。
  • 使用查找表来管理数据。

示例

jsx 复制代码
const [items, setItems] = useState([{ id: 1, name: 'Item 1' }]);
const [selectedId, setSelectedId] = useState(1);
const selectedItem = items.find(item => item.id === selectedId);

注意事项

  • 避免在不同的state变量中存储相同的数据。

正确代码

jsx 复制代码
const selectedItem = items.find(item => item.id === selectedId);

错误代码

jsx 复制代码
const [selectedItem, setSelectedItem] = useState(items[0]); // 错误:创建了不必要的重复state

避免深度嵌套的State

深度嵌套的state很难管理和更新。尽可能地扁平化你的state结构。

技巧

  • 使用扁平化的数据结构,如ID映射表。
  • 将复杂的state逻辑拆分到更小的组件中。

示例

jsx 复制代码
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中使用过于复杂的数据结构。

正确代码

jsx 复制代码
const newPlan = { ...prevPlan };
delete newPlan[id];

错误代码

jsx 复制代码
setPlan(prevPlan => {
  prevPlan[id].childIds = []; // 错误:直接修改了state
  return prevPlan;
});

记住,简化你的state结构可以减少bug,提高性能,并使你的代码更易于理解。

相关推荐
安分小尧2 小时前
React 文件上传新玩法:Aliyun OSS 加持的智能上传组件
前端·react.js·前端框架
编程社区管理员2 小时前
React安装使用教程
前端·react.js·前端框架
拉不动的猪2 小时前
vue自定义指令的几个注意点
前端·javascript·vue.js
yanyu-yaya2 小时前
react redux的学习,单个reducer
前端·javascript·react.js
skywalk81632 小时前
OpenRouter开源的AI大模型路由工具,统一API调用
服务器·前端·人工智能·openrouter
Liudef062 小时前
deepseek v3-0324 Markdown 编辑器 HTML
前端·编辑器·html·deepseek
拉不动的猪2 小时前
uniapp与React Native/vue 的简单对比
前端·vue.js·面试
z_mazin3 小时前
Chrome开发者工具实战:调试三剑客
前端·javascript·chrome·网络爬虫
sen_shan5 小时前
Vue3+Vite+TypeScript+Element Plus开发-04.静态菜单设计
前端·javascript·typescript·vue3·element·element plus·vue 动态菜单
旧识君5 小时前
移动端1px终极解决方案:Sass混合宏工程化实践
开发语言·前端·javascript·前端框架·less·sass·scss