其实，

数据主权与渲染防线：从受控组件到性能调整的完整图景

上一节我们把“复用”交给自定义 Hooks、“并行”交给 Web Worker。React 的工程能力又上了一个台阶。但把视线从线程拉回到界面有一个最朴素、也最躲不开的场景：表单。使用者名、密码、评论、搜索框——只要做界面就逃不开输入框。

而输入框的第一个问题。就是“主权”之争：输入框里的值，到底归谁管？

• 让 React 的状态来管，输入框只是一个“傀儡”——这是受控组件。
• 让 DOM 自己管，React 用到时再伸手去取——这是非受控组件。

同一天笔记还顺带解锁了性能调整的第一道防线：父组件一重新渲染。子组件全部跟着动，这很浪费。memo 把子组件“记”下来不该动的时候就不动——而 useCallbackuseMemo,是这条路上的下一站。

使用者痛点：表单管理混乱导致数据同步问题和性能浪费！

一、受控组件：让 React 说了算

痛点揭示：数据管理权归属不明导致校验逻辑难以实现！

import { useState } from 'react' function ControlledInput { const = useState return ( <> Controlled Input setValue} /> ) }

二、非受控组件：让 DOM 自己说了算

痛点揭示：过度依赖DOM引用导致状态管理失控！

三、CommentBox：提交时才取值的 textarea