按理说，

阅读前先想

1. 一个 输入框里显示的文字。到底存在哪里——React 的 state 里还是浏览器 DOM 里？
2. 下面两种写法。哪种会在每次输入时触发重渲染，哪种不会？
3. 如果一个组件根本没有 useState它还能重渲染吗？

这篇文章主线

从两段最简代码出发，回答同一个问题：表单数据由谁来管？ 接下来追踪使用者每次按键后的完整执行链路——事件如何触发、数据流向哪里、页面是否重渲染——最终形成选择两种模式的判断标准。

表单数据归谁管

知识点

受控组件 把表单值存在 React state 中，输入框的显示内容由 state 驱动。非受控组件 把表单值留在浏览器 DOM 中，React 在需要时通过 ref 手动读取。

这背后的主要原则是：UI 是 state 的投影。只要管理好 state，界面就会自动跟随。其实，受控组件完全遵守这一原则；非受控组件则在 state 程序之外开了一条“暗渠”。让数据直接驻留在 DOM 上，React 感知不到。

关键代码

非受控组件

// 非受控组件 —— 值留在 DOM
import { useRef } from 'react';function UncontrolledInput {
const inputRef = useRef;const handleClick = => {
console.log;}，return (
<>

获取输入值
);}

// 受控组件 —— 值存在 state
import { useState } from 'react';function ControlledInput {
const = useState;return (
<>
 setValue}
/>
);}

运行过程

• 使用者输入 “hello” → DOM 的 .value 从空变为 “h”、 “he”、 …“hello”，整个过程 React 不感知，没有调用 setState所以没有重渲染。
• 使用者点击按钮 → 调用 alert{/*示例中为 console.log */} → 打印 “hello”。按钮点击后仍然没有触发重渲染，因为组件内部根本没有使用 useState.

受控组件：

• User types “h” → . State changes from "" to "h". React schedules a re‑render.
• The component function runs again。producing `` which syncs DOM.
• The same cycle repeats for each subsequent keystroke – every character causes one re‑render.

为什么这样设计

受控是默认推荐。不过，The design philosophy of React is “single source of truth”. State is that truth;UI is merely its projection. When an input’s

非受控是务实妥协。If you don’t need React to constantly watch form – e.g.。a simple contact‑us textarea that’s only read on submit – you can avoid unnecessary renders and let browser manage value directly.