2022年前端React的100道面试题的第9题：受控与非受控组件

问题

以下对 “受控组件” 和 ”非受控组件“ 描述正确的是？

 

选项

A 都支持在提交时进行一次性值检索；

B 都支持实时验证；

C 都支持动态输入；

D 都支持数据（状态）和 UI（输入）始终保持同步；

 

答案

A

 

纠错

B 只有 “受控组件” 支持实时验证；

C 只有 “受控组件” 支持动态输入；

D 只有 “受控组件” 支持数据（状态）和 UI（输入）始终保持同步；

 

解答

受控组件为用 state 同步交互输入值，非受控则表示 state 内无用户交互数据。

简单地理解受控组件，就是将用户的输入数据始终存储在组件内部的 state 中，实现组件数据（状态）和UI（输入）始终保持同步的组件实现方式。可以通过控制 state 内地数据来修改 UI 视图。

 

以下是最简单的受控组件的实例：

class Form extends Component {
  constructor() {
    super();
    this.state = {
      name: '',
    };
  }
​
  handleNameChange = (event) => {
    this.setState({ name: event.target.value });
  };
​
  render() {
    return (
      <div>
        <input
          type="text"
          value={this.state.name}
          onChange={this.handleNameChange}
        />
      </div>
    );
  }
}

 

而非受控组件，则仅在需要获取用户输入值时，从UI控件中数据（主要是通过 Ref 方式）。如果表单场景非常的简单，则可以使用非受控组件，

 

例如，下面的代码使用非受控组件接受一个表单的值：

class NameForm extends React.Component {
  constructor(props) {
    super(props);
    this.handleSubmit = this.handleSubmit.bind(this);
    this.input = React.createRef();
  }
​
  handleSubmit(event) {
    alert('A name was submitted: ' + this.input.current.value);
    event.preventDefault();
  }
​
  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          Name:
          <input type="text" ref={this.input} />
        </label>
        <input type="submit" value="Submit" />
      </form>
    );
  }
}

 

官方推荐方式

目前官方推荐使用 受控组件 来处理表单数据，为了可以更实时的进行验证反馈，也可以控制组件的渲染性能等优化。

 

资料

受控组件

非受控组件

 

来源

搜索《考试竞技》微信小程序