约束性组件（ controlled component）与非约束性组件（ uncontrolled component）有什么区别？
参考回答
在 React 中，约束性组件（controlled component）和非约束性组件（uncontrolled component）的主要区别在于它们如何管理表单元素的状态。
- 约束性组件（Controlled Component）：React 组件完全控制表单元素的值，表单的值通过
state进行管理，并通过onChange事件更新state。 - 非约束性组件（Uncontrolled Component）：表单元素的值由 DOM 本身控制，React 通过
ref引用直接访问 DOM 元素的值，而不通过state进行管理。
简而言之，约束性组件通过 React 的 state 来管理值，而非约束性组件则将值交给 DOM 自身管理。
详细讲解与拓展
1. 约束性组件（Controlled Component）：
在 React 中，约束性组件是指表单元素的值由 React 组件的 state 来控制。每次输入变化时，state 都会更新，从而触发重新渲染。输入框的值通过 value 属性与 state 进行绑定，并通过 onChange 事件处理器更新 state。
特点：
– 值由 React 控制：表单元素的值完全由 React 管理，存储在组件的 state 中。
– 每次输入变化时更新 state：用户输入会触发 onChange 事件，进而更新 state，并重新渲染组件。
代码示例：
import React, { useState } from 'react';
function ControlledForm() {
const [value, setValue] = useState('');
const handleChange = (event) => {
setValue(event.target.value); // 更新 state
};
return (
<form>
<label>
Name:
<input type="text" value={value} onChange={handleChange} /> {/* 受控组件 */}
</label>
</form>
);
}
在这个例子中，input 的值是由 state 管理的，每次输入都会更新 state，从而触发重新渲染。
2. 非约束性组件（Uncontrolled Component）：
非约束性组件是指表单元素的值由 DOM 本身控制，而不是由 React 的 state 管理。React 通过 ref 引用来访问 DOM 元素，直接获取其当前值。ref 提供了对 DOM 元素的访问，而不会触发 React 的重新渲染。
特点：
– 值由 DOM 控制：表单元素的值不由 state 控制，而是由 DOM 自身控制。
– 通过 ref 获取当前值：React 可以通过 ref 访问 DOM 元素的值，而不需要通过 state 来存储它。
代码示例：
import React, { useRef } from 'react';
function UncontrolledForm() {
const inputRef = useRef();
const handleSubmit = (event) => {
event.preventDefault();
alert('A name was submitted: ' + inputRef.current.value); // 使用 ref 获取值
};
return (
<form onSubmit={handleSubmit}>
<label>
Name:
<input type="text" ref={inputRef} /> {/* 非受控组件 */}
</label>
<button type="submit">Submit</button>
</form>
);
}
在这个例子中，input 的值并没有通过 React 的 state 管理，而是通过 ref 获取到 DOM 元素的当前值。
3. 关键区别：
- 状态管理：
- 约束性组件：表单元素的值由 React
state控制。 - 非约束性组件：表单元素的值由 DOM 控制，React 通过
ref获取当前值。
- 约束性组件：表单元素的值由 React
- 更新方式：
- 约束性组件：每次输入时都会触发
onChange事件，更新state并重新渲染组件。 - 非约束性组件：不需要每次更新时重新渲染组件，可以通过
ref获取当前值。
- 约束性组件：每次输入时都会触发
- 使用场景：
- 约束性组件：适用于需要实时控制表单元素的值，通常用于验证、格式化输入值、处理输入等场景。
- 非约束性组件：适用于不需要实时跟踪表单元素的值，或者不需要频繁更新 UI 的简单表单。
4. 总结：
– 约束性组件通过 React 的 state 管理表单元素的值，允许 React 控制和响应用户输入。
– 非约束性组件则通过 ref 直接访问 DOM 元素，适用于不需要动态控制表单元素的场景。
对于大多数复杂的应用和需要实时交互的场景，约束性组件是推荐的做法，因为它更容易集成验证、格式化等功能。而非约束性组件在需要快速原型或简单表单时有时也能带来更少的代码量和更好的性能。