前言

这篇文章围绕两个实战项目，覆盖 React 中最主要的几个 Hook：

文章分为上下两篇：上篇讲表单状态管理，下篇讲渲染性能调整。本次关键是帮助你解决“表单输入卡顿”“每次输入都导致全局重渲染”等痛点。

再看上篇。受控组件 vs 非受控组件

痛点一： 很多开发者在使用受控输入时发现输入框闪烁或无法更新，这是因为误用了 value 与 onChange 的组合。

痛点二： 非受控表单经常出现“提交后获取不到最新值”，原因是忘记在合适时机读取 ref。

痛点三： 在大型表单中频繁更新 state 导致性能下降，特别是对象级别的更新不当会触发不必要的渲染。

一、受控组件：React 是唯一数据源

最简版本 — ControlledInput.jsx

function ControlledInput {
const = useState;return (
 setValue}
/>
);}

提示：  确保与 React state 同步，否则 input 将变成只读。

对象 state 的受控表单 — RegisterForm.jsx

function RegisterForm {
const = useState;const handleChange = e => {
const { name,value } = e.target;setForm)，};return (
<>


提交
);}

• 单个 state 管理所有字段： Vue 的 reactive 思路再现。
• 计算属性名 ： 一个 handleChange 通吃所有 input。
• 保留旧字段 …form： 避免改一个字段丢失其他字段。

带完整验证的受控表单 — LoginForm/index.jsx

function LoginForm {
const = useState;const = useState;const validate = => {
let msg = '';if {
if msg = '使用者名为空';else if msg = '使用者名长度不能小于3';}
if {
if msg = '密码不能为空';
else if msg = '密码长度不能小于6位';}
setErrors);}，const handleChange = e => {
const { name,value } = e.target;setForm)，validate;// 输入时校验
}，说起来，const isValid =
form.username && form.password &&
errors.username &&!老实说，errors.password;return (


{errors.username && }

{errors.password && }

登录


);}

"因为数据全在 state，验证、提交、禁用按钮、错误提示——所有 UI 都可以根据 state 实时决定。"

"如果你只想一次性读取使用者输入。而不需要实时反馈，非受控组件能显著减少渲染次数。"

function UncontrolledInput { const inputRef = useRef;const handleClick = => console.log;return ( <> < < );}

"使用者输入 → DOM 自己存着值 → 必要时 ref.current.value 提取，React 不追踪每个字符。"

function CommentBox { const textareaRef = useRef;其实，const handleSubmit = => { const comment = textareaRef.current.value;if return，console.log;}，return ( <> < < );}

"React 的 ⟨textarea⟩话说回来，⟩不过，'native ⟨，amp;amp，;amp，rangle;" 一样无需绑定值与事件。""