5、React 入门：从理解数据到创建组件

React 入门：从理解数据到创建组件

1. 理解应用数据

在规划组件的组织方式之前，除了界面原型，我们还需要了解 API 会为应用提供哪些信息。根据原型，我们或许能大致猜到会接收到的数据。了解应用数据的结构，是创建 UI 前规划工作的重要部分。

在继续之前，不妨回顾一下之前做过的界面拆解练习。重新审视同一个网页界面，看看在对 React 组件有了更多了解后，是否会有不同的拆解方式。是否会以不同的方式对元素进行分组呢？

以下是一个从 API 获取的评论框数据示例，以及它与原型的匹配方式：

{
  "id": 123,
  "content": "What we hope ever to do with ease, we must first learn to do with diligence. — Samuel Johnson",
  "user": {
    "name": "Mark Thomas",
    "id": 1
  },
  "comments": [
    {
      "id": 0,
      "user": "David",
      "content": "too. mainstream."
    },
    {
      "id": 1,
      "user": "Peter",
      "content": "Who was Samuel Johnson?"
    },
    {
      "id": 2,
      "user": "Mitchell",
      "content": "@Peter get off Letters