React：受控组件和非受控组件

受控和非受控指的都是 state，也就是指受 state 控制、不受 state 控制

受控组件

对于 input 输入框，如果使用 value 属性来接受状态值，并且配置 onChange 事件，那它就是受控组件，也就是受 state 控制，因此，它不能直接编辑（在 input 中就是无法直接更改输入框中的值）

function ControlledInput() {
  const [value, setValue] = useState('');
  return <input value={value} onChange={(e) => setValue(e.target.value)} />;
}

受控组件的数据流是双向的。在上面这个例子中，往输入框输入内容，会即时反映到视图上。我们会发现它跟 Vue 中的 v-model 有相似之处

要获取组件的值，直接使用 state 的值就可以了

以下是官方的定义

受控组件是指表单元素的值由 React 组件的状态（state）控制。用户输入时，值会通过事件处理函数更新状态，从而实现双向数据绑定。受控组件的值始终与 React 的状态同步，适用于需要对输入进行实时验证或处理的场景。

优点包括数据流清晰、易于验证和动态控制。缺点是代码量较多，尤其是表单复杂时，需要为每个输入字段编写事件处理逻辑。

非受控组件

当我们在 input 标签中使用 defaultValue 属性进行赋值时，那它就是非受控组件。与受控组件相反，非受控组件可以直接编辑组件的值

要获取非受控组件的值，需要通过 ref，也可以通过 getElementsById 来获取

非受控组件的值由 DOM 自身管理，而不是通过 React 状态控制。通常通过 ref 直接访问 DOM 元素的值，适用于简单表单或需要集成第三方库的场景。

<input
  type="text"
  defaultValue="初始值"
  ref={(input) => this.input = input}
/>

import React, { Component } from 'react';

export class UnControll extends Component {
    constructor(props) {
        super(props);
        this.inputRef = React.createRef();
    }

    handleSubmit() {
        console.log(this.inputRef.current.value);
    }

    render() {
        return (
            <form onSubmit={(e) => this.handleSubmit(e)}>
                <input defaultValue="123" ref={this.inputRef} />
            </form>
        )
    }
}

优点包括代码简洁、性能较高，适合无需即时反馈的场景。缺点是数据流不够透明，难以实现复杂的交互逻辑。

选择建议

需要实时验证或动态控制表单行为时，优先使用受控组件。
对于简单表单或性能敏感场景，非受控组件更为合适。两者可以结合使用，例如在表单提交时通过 ref 获取非受控组件的值。