本文共 1645 字，大约阅读时间需要 5 分钟。

React组件中的输入绑定：非受控组件与受控组件对比

在React开发中，处理表单输入通常有两种方式：非受控组件和受控组件。了解这两种方式的区别对提高开发效率至关重要。

非受控组件

非受控组件的特点是现用现取。当你在表单中输入内容后，通过事件触发回调函数时，才会将输入值取出进行处理。这种方式简单且灵活，但存在一定的开发复杂度。

示例代码

class Login extends React.Component {
  handleSubmit = (event) => {
    event.preventDefault();
    const { username, password } = event.target.elements;
    alert(`你输入的账号是${username.value}, 密码是${password.value}`);
  };
  render() {
    return (
      
   
    
        用户名：
     this.username = c} />
        密码 ：
     this.password = c} />
        
    登录
      
   
    );
  }
}
ReactDOM.render(
   , document.getElementById('test'));

优点

• 每次事件触发时立即获取最新输入值，确保数据的一致性。
• 适合简单的动态数据获取场景。

缺点

• 需要手动操作ref属性，增加了维护成本。
• 对于多个输入场景，代码会变得冗长。

受控组件

受控组件则完全不同于非受控组件。通过维护组件的内部状态，所有输入操作都会自动更新状态值。Stateful组件能够在任何时候直接访问输入数据，无需通过事件回调进行处理。

示例代码

class Login extends React.Component {
  state = {
    username: '',
    password: ''
  };
  saveUsername = (event) => {
    this.setState({ username: event.target.value });
  };
  savePassword = (event) => {
    this.setState({ password: event.target.value });
  };
  handleSubmit = (event) => {
    event.preventDefault();
    const { username, password } = this.state;
    alert(`你输入的账号是${username}, 密码是${password}`);
  };
  render() {
    return (
      
   
    
        用户名：
    
        密码 ：
    
        
    登录
      
   
    );
  }
}
ReactDOM.render(
   , document.getElementById('test'));

优点

• 归属于双向绑定模式， posture VueJS中的v-model。
• 状态维护统一，避免了回调函数的复杂性。
• 合并了多个输入操作到一个状态中。

缺点

• 需要最初初始化状态，增加了初期配置量。

对比总结

非受控组件适用于简单场景，而受控组件则更适合复杂或多个输入场景的动态管理。推荐使用受控组件因为其ologically更简洁，而且不需要手动操作ref属性。

注意事项

• 如果你的项目中有多个输入项，直接使用受控组件。
• 受控组件的状态维护确保数据的一致性，降低了错误率。
• 如果你熟悉Vue或其他框架的双向绑定模式，受控组件会更容易理解和使用。