React文档-State数据扁平化

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 文件

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: []
  },
};

js 复制代码

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 => (
          <PlaceTree
            key={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 => (
            <PlaceTree
              key={childId}
              id={childId}
              parentId={id}
              placesById={placesById}
              onComplete={onComplete}
            />
          ))}
        </ol>
      }
    </li>
  );
}

https://react.docschina.org/learn/choosing-the-state-structure#avoid-deeply-nested-state