基于前后端分离的父子ID渲染思路

2023-09-12 09:17:03

前后端分离已经成为业界主流，后端负责数据和业务逻辑，前端负责展示和交互。数据渲染自然就成了前端的事，而数据的格式也自然由后端决定。那么，在父子ID场景下，有哪些常见的渲染思路呢？

1. 使用嵌套结构渲染

这种方式比较直观，后端直接返回嵌套的JSON数据，前端通过递归遍历数据结构进行渲染。优点是数据结构清晰，易于理解。缺点是数据嵌套太深时，前端代码会变得复杂，而且不利于数据的复用。

{
  "id": 1,
  "name": "父级",
  "children": [
    {
      "id": 2,
      "name": "子级1"
    },
    {
      "id": 3,
      "name": "子级2"
    }
  ]
}

const data = {
  id: 1,
  name: "父级",
  children: [
    {
      id: 2,
      name: "子级1"
    },
    {
      id: 3,
      name: "子级2"
    }
  ]
};

const render = (data) => {
  return (
    <ul>
      <li>{data.name}</li>
      {data.children.map(child => render(child))}
    </ul>
  );
};

2. 使用扁平化结构渲染

这种方式将嵌套的数据结构扁平化，后端返回一个包含所有数据的数组，前端通过父子ID关系自行组装成树形结构。优点是数据结构简单，前端代码更简洁。缺点是组装树形结构的逻辑比较复杂，而且不利于数据的增删改查。

[
  {
    "id": 1,
    "name": "父级",
    "parentId": null
  },
  {
    "id": 2,
    "name": "子级1",
    "parentId": 1
  },
  {
    "id": 3,
    "name": "子级2",
    "parentId": 1
  }
]

const data = [
  {
    id: 1,
    name: "父级",
    parentId: null
  },
  {
    id: 2,
    name: "子级1",
    parentId: 1
  },
  {
    id: 3,
    name: "子级2",
    parentId: 1
  }
];

const map = new Map();
data.forEach(item => map.set(item.id, item));

const buildTree = (data) => {
  const tree = [];
  data.forEach(item => {
    const parent = map.get(item.parentId);
    if (parent) {
      parent.children = parent.children || [];
      parent.children.push(item);
    } else {
      tree.push(item);
    }
  });
  return tree;
};

3. 使用树形结构渲染

这种方式后端直接返回一个树形结构的数据，前端直接渲染即可。优点是数据结构最符合渲染需求，前端代码最简洁。缺点是后端需要额外处理数据，而且不利于数据的增删改查。

{
  "id": 1,
  "name": "父级",
  "children": [
    {
      "id": 2,
      "name": "子级1"
    },
    {
      "id": 3,
      "name": "子级2"
    }
  ]
}

const data = {
  id: 1,
  name: "父级",
  children: [
    {
      id: 2,
      name: "子级1"
    },
    {
      id: 3,
      name: "子级2"
    }
  ]
};

const render = (data) => {
  return (
    <ul>
      <li>{data.name}</li>
      {data.children.map(child => render(child))}
    </ul>
  );
};