《Go 后端开发者学 React：数据渲染》

React 中的数据渲染，简单理解就是：

把 JavaScript / TypeScript 中的数据，通过 JSX 展示到 HTML 页面上。

你之前学过 HTML、CSS、JavaScript，可以把 React 理解成：数据发生变化时，React 会根据新数据更新页面，而不需要你手动操作 DOM。

React 数据渲染主要掌握 5 种方式。

1. 基础渲染：使用 {}

React 使用 JSX 语法，可以在 HTML 风格的标签中嵌入 JavaScript 表达式。

function App() {
  const name = "张三";
  const age = 25;

  return (
    <div>
      <h1>姓名：{name}</h1>
      <p>年龄：{age}</p>
    </div>
  );
}

渲染结果：

姓名：张三

年龄：25

核心：JSX 中使用 {变量}，就可以将变量值展示到页面。

还可以写表达式：

<p>明年年龄：{age + 1}</p>
<p>是否成年：{age >= 18 ? "是" : "否"}</p>

2. 对象渲染

假设有一个用户对象：

interface User {
  id: number;
  name: string;
  age: number;
}

function App() {
  const user: User = {
    id: 1001,
    name: "张三",
    age: 25
  };

  return (
    <div>
      <p>用户ID：{user.id}</p>
      <p>姓名：{user.name}</p>
      <p>年龄：{user.age}</p>
    </div>
  );
}

注意：不能直接渲染普通对象。

<div>{user}</div> // ❌ React 不支持直接渲染普通对象

需要访问对象的具体属性：

<div>{user.name}</div> // ✅

3. 数组渲染：map（重点）

这在实际 React 开发中最常见。

假设后端返回了一个用户列表：

const users = [
  { id: 1, name: "张三", age: 20 },
  { id: 2, name: "李四", age: 25 },
  { id: 3, name: "王五", age: 30 }
];

使用 map() 遍历数组：

function App() {
  return (
    <div>
      {users.map((user) => (
        <div key={user.id}>
          <span>{user.name}</span>
          <span> - {user.age}岁</span>
        </div>
      ))}
    </div>
  );
}

渲染结果：

张三

20 岁

李四

25 岁

王五

30 岁

为什么需要 key？

<div key={user.id}>

key 用来帮助 React 识别列表中每个元素的身份，以便正确、高效地更新列表。

一般使用数据库 ID、业务唯一 ID。

不推荐在可能发生插入、删除或排序的列表中直接使用数组索引作为 key。

4. 条件渲染：三元表达式和 &&

假设需要展示任务状态。

const task = {
  id: 1001,
  status: "running"
};

方式一：三元表达式

function App() {
  return (
    <div>
      {task.status === "running"
        ? <span>运行中</span>
        : <span>未运行</span>}
    </div>
  );
}

格式：

条件 ? 条件成立时显示 : 条件不成立时显示

方式二：&&

function App() {
  return (
    <div>
      {task.status === "running" && (
        <span>任务正在执行</span>
      )}
    </div>
  );
}

当条件为 true 时显示内容，否则不显示。

这两种方式在 React 业务开发中都很常见。

5. 动态数据渲染：useState（最重要）

前面展示的都是静态数据。

但是在真实项目中，例如：

• 点击按钮增加计数
• 修改任务状态
• 搜索用户列表
• 获取后端接口数据

都需要让页面随着数据变化而更新。

React 提供了 useState 来管理组件状态。

import { useState } from "react";

function App() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <h2>当前计数：{count}</h2>

      <button onClick={() => setCount(count + 1)}>
        +1
      </button>
    </div>
  );
}

你可以直接体验

拆开理解 useState

const [count, setCount] = useState(0);

这里：

• count：当前状态值。
• setCount：修改状态的函数。
• useState(0)：初始化状态为 0。

当执行：

setCount(count + 1);

React 会安排组件重新渲染，页面上的 {count} 就会显示更新后的值。

注意：不能只通过 count++ 来修改状态，因为这不会正确地通知 React 更新状态。

6. 实际场景：渲染后端返回的任务列表

将前面学到的 map、useState 和 TypeScript 类型结合起来：

import { useEffect, useState } from "react";

interface Task {
  id: number;
  name: string;
  status: string;
}

function TaskList() {
  const [tasks, setTasks] = useState<Task[]>([]);

  useEffect(() => {
    fetch("/api/tasks")
      .then((res) => {
        if (!res.ok) {
          throw new Error("请求失败");
        }
        return res.json();
      })
      .then((data: Task[]) => {
        setTasks(data);
      })
      .catch(console.error);
  }, []);

  return (
    <div>
      <h2>任务列表</h2>

      {tasks.map((task) => (
        <div key={task.id}>
          {task.name} - {task.status}
        </div>
      ))}
    </div>
  );
}

这里假设接口返回的数据符合 Task[]，真实项目需要根据接口可信度决定是否进行运行时数据校验。

整个过程：

7. React 数据渲染和传统 JavaScript 有什么区别？

你本科可能学过这种写法：

// 原生 JavaScript
document.getElementById("count").innerText = "10";

这是直接操作 DOM。

而 React：

const [count, setCount] = useState(0);

return <div>{count}</div>;

这是声明式渲染：你只需要描述数据对应的页面长什么样，React 负责把变化更新到 DOM。

总结

场景	React 语法
渲染变量	{name}
渲染对象属性	{user.name}
渲染数组	{list.map(...)}
条件渲染	{condition ? A : B}
按条件显示	{condition && <div />}
状态更新渲染	useState
接口数据渲染	useEffect + fetch + useState

你现在最需要掌握的就是这三个：

1. {}：把数据放到 JSX 中。
2. map()：把数组变成一组 JSX 元素。
3. useState()：数据变化时触发界面更新。

掌握这三个以后，你就能理解 React 绝大部分基础数据渲染逻辑。