react-14defaultValue（仅在首次渲染时生效）和value（受 React 状态控制）

        在 React 中，defaultChecked/checked 和 defaultValue/value 是用于处理表单元素初始值和受控值的属性对。区别在于表单元素是否受 React 组件状态控制。

1. defaultValue

• 作用：设置表单元素的初始值（仅在首次渲染时生效）。
• 特点：
  • 只在组件首次挂载时生效，后续状态变化不会影响它。
  • 适用于非受控组件。

import React from 'react';

function UncontrolledInput() {
  return (
    <div>
      <input type="text" defaultValue="Initial value" />
    </div>
  );
}

export default UncontrolledInput;

输入框首次渲染时会显示 "Initial value"，但后续用户输入不会通过 React 状态管理。

2. value

• 作用：控制表单元素的当前值（受 React 状态控制）。
• 特点：
  • 必须与 onChange 事件处理程序一起使用，以更新 React 状态。
  • 适用于受控组件。

import React, { useState } from 'react';

function ControlledInput() {
  const [inputValue, setInputValue] = useState('');

  return (
    <div>
      <input
        type="text"
        value={inputValue}
        onChange={(e) => setInputValue(e.target.value)}
      />
    </div>
  );
}

export default ControlledInput;

 输入框的值由 inputValue 状态控制，用户输入会通过 onChange 更新状态。

3.总结 

属性对	适用场景	是否受 React 状态控制	是否需要 onChange
defaultChecked	非受控组件（初始值）	否	否
checked	受控组件	是	是
defaultValue	非受控组件（初始值）	否	否
value	受控组件	是	是