React中什么是受控组件和非控组件？

八股文_React面试题 0 24

参考回答：

在 React 中，受控组件和非控组件是两种不同的方式来处理表单元素的状态。

受控组件：指的是表单元素的值由 React 组件的状态（state）来控制，任何时候表单元素的值都会反映 React 组件的状态。通过 value 属性将表单元素的值绑定到状态，状态的变化会触发表单元素的重新渲染。
非控组件：指的是表单元素的值由 DOM 自己来管理，而不是由 React 组件的状态来控制。React 只在初始渲染时设置一次表单元素的默认值，并且之后不再控制该值。

详细讲解与拓展：

受控组件：

在受控组件中，表单元素的值完全由 React 组件的状态管理，表单元素的值通过 value 属性与组件的状态相绑定，而用户输入会通过事件处理程序（如 onChange）更新状态。这意味着 React 组件控制了表单元素的状态。

示例：

function ControlledComponent() {
  const [value, setValue] = useState("");

  const handleChange = (event) => {
    setValue(event.target.value);  // 更新状态
  };

  return (
    <div>
      <input
        type="text"
        value={value}  // 输入框的值由 state 控制
        onChange={handleChange}  // 每次输入时更新 state
      />
      <p>{value}</p>
    </div>
  );
}

在这个例子中，input 的值由 value（React 组件的状态）控制。每次用户输入时，onChange 事件会触发 handleChange 函数，更新组件的状态，从而改变 input 的值。

受控组件的优点：

统一的状态管理：React 组件内部的状态和表单元素的状态始终保持一致。
更好的表单验证：因为表单元素的状态是由 React 控制的，表单验证可以更容易地通过状态来实现。
易于操作和扩展：可以通过 React 状态方便地管理表单的交互行为，如动态禁用提交按钮。

受控组件的缺点：

性能开销：因为每次输入都会触发组件的状态更新并重新渲染，所以对于复杂表单，性能可能会受到影响。
需要更多代码：你需要编写更多的代码来管理表单输入（例如：通过 onChange 更新状态）。

非控组件：

非控组件是 React 中的传统方式，表单元素的值由 DOM 自身控制，React 组件不会干预它们的值。你只能通过 defaultValue 或 defaultChecked 来初始化表单元素的值，但之后 React 不再干预它们。

示例：

function UncontrolledComponent() {
  const inputRef = useRef();

  const handleSubmit = (event) => {
    event.preventDefault();
    alert("A name was submitted: " + inputRef.current.value);  // 直接访问 DOM
  };

  return (
    <form onSubmit={handleSubmit}>
      <input type="text" ref={inputRef} />  {/* 使用 ref 访问 DOM */}
      <button type="submit">Submit</button>
    </form>
  );
}

在这个例子中，input 元素的值不由 React 组件的状态控制，而是由 DOM 自身管理。ref 被用来获取表单元素的值。

非控组件的优点：

简单：对于简单的表单，非控组件无需处理 React 状态，代码较少。
性能优势：因为没有 React 组件控制表单元素的状态，所以每次输入时不会触发重新渲染，适用于表单较复杂或大量输入的场景。

非控组件的缺点：

缺少 React 状态管理：由于表单值不是由 React 状态控制，处理表单验证、动态改变表单项的行为时会变得更加困难。
难以与其他组件共享状态：如果表单需要与其他组件共享状态，非控组件不如受控组件方便。

总结：

受控组件：表单元素的值由 React 组件的状态管理，输入变化通过事件处理更新状态，适用于需要统一管理表单数据、验证和交互的场景。
非控组件：表单元素的值由 DOM 自己管理，React 组件通过 ref 来访问其值，适用于较为简单或性能要求较高的表单。