React 三板斧：显示数据、条件渲染、渲染列表，一文通杀！

官方文档太散？这一篇把 显示数据、条件渲染、渲染列表 三大基础模块合并成「一页速查表」，配 100% 可运行代码片段，复制即用。

---

1️⃣ 显示数据：把变量塞进 JSX 的 4 种姿势

场景	代码片段
纯文本	<h1>{user.name}</h1>
属性绑定	<img src={user.avatar} alt={'Photo of ' + user.name} />
样式对象	<div style={{ color: user.color, fontSize: 20 }}>{user.bio}</div>
拼接/运算	<span>{unreadCount > 9 ? '9+' : unreadCount}</span>

✅ 记住：大括号 {} 就是回到 JS 世界的任意门。

---

2️⃣ 条件渲染：3 种写法 + 1 条最佳实践

① if/else（早返回模式，最清晰）

function Greeting ({ isLogin }) {
  if (isLogin) return <h1>Welcome back!</h1>;
  return <h1>Please sign up.</h1>;
}

② 三元运算符（行内）

<button>{loading ? 'Loading...' : 'Submit'}</button>

③ 逻辑与 &&（快捷但注意 0）

{errors.length && <ErrorBanner list={errors} />}

⚠️ 陷阱：0 会被渲染出来！用 !!errors.length && 或 errors.length > 0 && 规避。

✅ 最佳实践

复杂逻辑抽成独立组件，保持 JSX 干净。

---

3️⃣ 渲染列表：key、key、key！

基础模板

const TodoList = ({ todos }) => (
  <ul>
    {todos.map(todo =>
      <li key={todo.id}>{todo.text}</li>
    )}
  </ul>
);

key 的 3 条军规

1. 唯一且稳定（不要用 index）。
2. 同级唯一，跨列表可重复。
3. 不泄露业务敏感信息（避免用数据库主键直接暴露）。

动态列表增删

// 添加
setTodos(prev => [...prev, { id: Date.now(), text: newText }]);

// 删除
setTodos(prev => prev.filter(t => t.id !== delId));

---

🎯 三合一实战：Mini 聊天室

function Chat({ messages, user }) {
  return (
    <div className="chat">
      <h2>Hi, {user.name} 👋</h2>
      {messages.length === 0 && <p>No messages yet.</p>}
      <ul>
        {messages.map(msg => (
          <li key={msg.id} className={msg.from === user.id ? 'me' : 'other'}>
            {msg.text}
          </li>
        ))}
      </ul>
    </div>
  );
}

---

🏁 一页速记卡

能力	记忆口诀
显示数据	{} 里放 JS
条件渲染	早返回、三元、&&
渲染列表	map + 唯一 key

把这张卡片贴在工位，React 入门再也不迷路！