当前位置：首页 > news >正文

React文档-State数据扁平化

news 来源：原创 2025/5/11 6:22:03

1、选择 State 结构

思考一下：
如果渲染列表，并更新列表数据在下面展示~

state 过去常常是这样复制的：

items = [{ id: 0, title: 'pretzels'}, ...]
selectedItem = {id: 0, title: 'pretzels'}
改了之后是这样的：
items = [{ id: 0, title: 'pretzels'}, ...]
selectedId = 0

重复的 state 没有了，你只保留了必要的 state！
现在，如果你编辑 selected 元素，下面的消息将立即更新。这是因为 setItems 会触发重新渲染，而 items.find(…) 会找到带有更新文本的元素。你不需要在 state 中保存选定的元素，因为只有选定的 ID 是必要的。其余的可以在渲染期间计算。
在这里插入图片描述

2、state “扁平化”（也称“规范化”）嵌套更加容易

1、如果 state 嵌套太深，难以轻松更新，可以考虑将其“扁平化”。这里有一个方法可以重构上面这个数据。不同于树状结构，每个节点的 place 都是一个包含其子节点的数组，你可以让每个节点的 place 作为数组保存其子节点的 ID。然后存储一个节点 ID 与相应节点的映射关系。
2、现在要删除一个地点，您只需要更新两个 state 级别：

其父级地点的更新版本应该从其 childIds 数组中排除已删除的 ID。
其根级“表”对象的更新版本应包括父级地点的更新版本。
places.js 文件

export const initialTravelPlan = {0: {id: 0,title: '(Root)',childIds: [1],},1: {id: 1,title: 'Earth',childIds: [2, 7]},2: {id: 2,title: 'Africa',childIds: [3, 4, 5, 6]}, 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, 9]},8: {id: 8,title: 'Nigeria',childIds: [11]},9: {id: 9,title: 'South Africa',childIds: []},10: {id: 10,title: 'Americas',childIds: [11, 12],   },11: {id: 11,title: 'Argentina',childIds: []},
};

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];// 创建一个其父级地点的新版本// 但不包括子级 ID。const nextParent = {...parent,childIds: parent.childIds.filter(id => id !== childId)};// 更新根 state 对象...setPlan({...plan,// ...以便它拥有更新的父级。[parentId]: nextParent});}const root = plan[0];const planetIds = root.childIds;return (<><h2>Places to visit</h2><ol>{planetIds.map(id => (<PlaceTreekey={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 => (<PlaceTreekey={childId}id={childId}parentId={id}placesById={placesById}onComplete={onComplete}/>))}</ol>}</li>);
}