受控与非受控：表单状态该放在哪里

受控组件把输入框的值交给 React state 管理，非受控组件让 DOM 自己保存值，需要时通过 ref 读取。两者没有优劣，只有适用场景的差别。

受控与非受控的区别

const [keyword, setKeyword] = useState("");

<input
  value={keyword}
  onChange={(event) => setKeyword(event.target.value)}
  placeholder="搜索笔记"
/>;

const inputRef = useRef<HTMLInputElement>(null);
<input ref={inputRef} defaultValue="" />;

受控写法每次输入都会触发渲染，换来的是值随时可读、可校验、可联动；非受控写法渲染更少，取值时机集中在提交那一刻。

表单状态放在组件里还是页面里

状态应该放在需要读取它的最近公共父级。只有提交时才用一次的值，可以留在表单组件内部；需要和列表筛选、地址栏参数联动的值，就应该提到页面层。

一个判断标准

如果这个值会影响其他 UI 的显示，用受控；如果它只在提交时被读取一次，用非受控。不要在两种方式之间反复切换，固定一种写法能让表单代码更好读。

状态的位置比状态的数量更影响可维护性。