简述React受控组件与非受控组件(小结)

简介：
本文对React框架中的受控组件和非受控组件进行对比总结，帮助开发者理解两者特性和应用场景。 React 中的受控组件与非受控组件是两种不同的表单处理方式。它们的主要区别在于是否能够由外部控制其值的变化。 一、非受控组件 在 React 中，非受控组件是指那些内部维护状态 state 的组件，而不是通过父级或外部的状态来管理自身数据的输入元素。这意味着一旦设置好初始值（通常使用 props），该值就不能再被修改了。例如，在下面的例子中，`Input` 组件设置了 `defaultValue` 属性作为其初始值： ```jsx ``` 在页面初始化时可以设置输入框的默认内容，但之后试图通过更改 props 来修改这个值是无效的。 二、受控组件 与非受控组件不同的是，受控组件的状态 state 是由外部控制和管理的。这意味着可以通过改变父级状态来直接更新这些元素中的数据。例如，在下面的例子中，我们创建了一个 `InputItem` 组件，并且通过监听输入事件（如 onChange）实时地更新其内部状态： ```jsx export default class InputItem extends React.Component { constructor(props) { super(props); this.state = { value: }; } componentWillReceiveProps(nextProps) { this.setState({ value: nextProps.value }); } _onChange(evt) { this.setState({ value: evt.target.value }); } render() { return ( ); } } ``` 在这里，我们设置了一个初始值，并且通过外部传递的 `value` 属性来修改输入框的内容。 三、对比与选择 | 类型 | 状态维护方式 | 值更新机制 | 使用场景 | | --- | --- | --- | --- | | 非受控组件 | 组件内部管理状态 state | 仅能通过 props 设置初始值，之后无法改变。| 主要用于展示数据的场景。| | 受控组件 | 状态由外部或父级控制和更新。| 外部可以直接修改输入框中的值，并且这些变化会反映到父级的状态中。| 更适用于处理需要编辑的数据的情况。| 在选择使用受控还是非受控组件时，应根据具体的应用场景来决定：如果数据的变更需要外部干预，则建议采用受控形式；反之，若仅需展示固定不变的信息，则可以考虑使用非受控方式。