为何组件需使用defaultValue而非仅依赖value？

核心原因是受控组件和不受控组件的设计逻辑完全不同，两者对应不同的开发场景：

• 场景1：不需要同步外部状态的简单输入
  如果你只是需要一个输入框，初始填个默认值，之后用户输入的内容不需要同步到组件外的状态（比如独立的搜索框，仅在提交时取一次值），用defaultValue就足够了。这种情况下你不用写额外的onChange事件去更新状态，代码更简洁：

  // 不受控写法，省心省力
  <Input defaultValue="初始默认值" />
  

  要是硬用value，你就得额外维护一个状态，还要写onChange去更新，纯属多此一举：

  // 受控写法，没必要的冗余代码
  const [inputVal, setInputVal] = useState("初始默认值");
  <Input value={inputVal} onChange={(e) => setInputVal(e.target.value)} />
  

• 场景2：需要同步外部状态的交互场景
  当输入框的值需要和其他组件联动（比如表单实时校验、多输入框联动、根据外部状态动态修改输入值），这时候必须用value做受控处理。比如你要做一个“重置”按钮，点击后把输入框变回初始值，用受控组件就能直接通过修改状态实现：

  const [inputVal, setInputVal] = useState("初始默认值");
  <div>
    <Input value={inputVal} onChange={(e) => setInputVal(e.target.value)} />
    <button onClick={() => setInputVal("初始默认值")}>重置</button>
  </div>
  

  这种场景下defaultValue就没用了，因为它只能设置初始值，之后没法通过外部状态去修改输入框的内容。

简单说，defaultValue是给“不用管后续值变化”的场景用的，value是给“需要精确控制输入值”的场景用的，两者各司其职——既帮你在简单场景下省掉冗余代码，也能满足复杂交互的精确控制需求。

内容的提问来源于stack exchange，提问作者Tina Glenn