React 是什么与心智模型

一句话定义

React 是一个声明式的 JavaScript UI 库：你描述「界面在给定状态下应该长什么样」，React 负责在状态变化时计算出最小 DOM 变更并应用。

为什么重要

它是整个知识库的地基。之后所有 API（useState、useEffect、Suspense……）都只是同一句话的实现细节：UI = f(state)。先建立这个心智模型，后面的规则会从「要背的条款」变成「自然的推论」。

前置知识

JavaScript 函数与对象基础（见总览）。
至少见过一个 HTML 页面的结构。

核心概念

库 vs 框架：React 只管「渲染到视图」，路由、数据获取、样式都不在其内（生态补齐，见 kp-021、kp-026）。
声明式（Declarative）：描述目标状态，不描述操作步骤。
命令式（Imperative）：逐步执行操作步骤（原生 DOM / jQuery 风格）。
UI = f(state)：组件是函数，输入是 props 与 state，输出是 UI 描述。

原理 / 机制

同一个「已勾选的待办项」用两种风格表达：

jsx// 命令式：一步一步改 DOM
const li = document.createElement('li');
li.textContent = task.title;
if (task.done) {
  li.classList.add('done');
  checkbox.checked = true;
}
list.appendChild(li);

// 声明式：只描述"当前状态下的样子"
function TaskItem({ task }) {
  return (
    <li className={task.done ? 'done' : ''}>
      <input type="checkbox" defaultChecked={task.done} />
      {task.title}
    </li>
  );
}

声明式的关键收益：你永远不会忘记处理「中间状态」。命令式代码在 3 个状态、5 个操作组合下必然出现「忘记某个 if」的 bug；声明式代码里每种状态都被 f 完整地重新描述。

React 接到「状态变了」的信号后做的事：

textstate/props 变化 → 重新执行组件函数 → 得到新的 UI 描述(虚拟 DOM)
                → 与旧描述对比(diff) → 计算最小变更 → 提交到真实 DOM

对比与提交的细节是 kp-008 的主题；此处只需记住：组件函数会被反复调用，且你必须把它当作纯函数来写。

直观类比

声明式像「给设计师需求稿」：你说「列表按价格升序、售罄置灰」，你不说「先把第三个卡片删掉，再把第五张的位置挪过来」。
UI = f(state) 像烘焙：材料（state）进了烤箱（React），蛋糕（UI）自动成型。状态是唯一的原料，UI 只是它的投影——所以永远去改原料，不要去掰蛋糕。

实例 / 案例

按钮计数器，最小的完整 React 应用（官方文档第一步）：

jsximport { useState } from 'react';

export default function Counter() {
  const [count, setCount] = useState(0);

  function handleClick() {
    setCount(count + 1); // 不要写 count = count + 1
  }

  return <button onClick={handleClick}>点了 {count} 次</button>;
}

阅读顺序：count 是状态 → 点击触发 setCount → React 重跑 Counter → 新 JSX 描述与旧对比 → 只更新文本节点。document.querySelector 在这份代码里一次都没出现。

常见误区

「React = jQuery 替代品」：不对。jQuery 改善的是命令式 DOM 操作的手感；React 改变的是编程范式本身。
直接改 DOM：element.innerHTML = ... 与 React 的渲染结果互相踩踏，是初学者最经典的 bug 来源。需要操作 DOM 时用 ref（kp-017）。
直接改 state：count = 5 或 list.push(x) 不会触发任何更新——状态必须通过 setter 更新（kp-005）。
认为 React 渲染很慢所以要先学性能技巧：React 的默认路径对 95% 的应用足够快；过早记忆化是本末倒置（kp-018 详述）。

自测题

用自己的话解释「UI = f(state)」，并指出 f 的输入有哪两样？
命令式代码在状态组合多的时候为什么容易出 bug？举一个你会忘掉的分支。
下面代码哪里违背了 React 的心智模型？

``jsx function Badge() { document.title = '新消息'; return <span>NEW</span>; } `` （答案：直接改了全局 DOM；应放入 effect 或让标题成为组件树的一部分。）

与其他知识点的关系

向前：需要 kp-002 的 JSX 语法才能把「描述 UI」写成代码。
向后：kp-005 / kp-004 是 f 的两个输入的展开；kp-008 解释 f 之后发生什么；kp-022 把 f 升级为「可以被打断、分优先级的 f」。