2022年前端React的100道面试题的第9题:受控与非受控组件(Question 9 of 100 questions of front end react in 2022: controlled and uncontrolled components)

问题

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

选项

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

B 都支持实时验证;

C 都支持动态输入;

D 都支持数据(状态)和 UI(输入)始终保持同步;

答案

A

纠错

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

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

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

解答

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

受控组件为用 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>    );  }}

官方推荐方式

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

资料

受控组件

非受控组件

来源

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

————————

problem

What is the correct description of “controlled components” and “uncontrolled components”?

option

A all support one-time value retrieval when submitting;

B all support real-time verification;

C supports dynamic input;

D supports data (status) and UI (input) to keep synchronization all the time;

answer

A

纠错

B < strong > only “controlled components” < / strong > support real-time verification;

C < strong > only “controlled component” < / strong > supports dynamic input;

D < strong > only “controlled components” < / strong > support data (status) and UI (input) to keep synchronization all the time;

answer

The controlled component synchronizes the interaction input value with state, and the uncontrolled component indicates that there is no user interaction data in state.

The controlled component synchronizes the interaction input value with state, and the uncontrolled component indicates that there is no user interaction data in state.

Simply understand the controlled component, that is, the user’s input data is always stored in the state inside the component, so as to realize the component implementation method that the component data (state) and UI (input) are always synchronized. You can modify the UI view by controlling the data in the state.

The following is an example of the simplest controlled component:

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>    );  }}

For uncontrolled components, data is only obtained from UI controls (mainly through ref) when user input values need to be obtained. If the form scenario is very simple, you can use uncontrolled components,

For example, the following code uses an uncontrolled component to accept the value of a form:

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>    );  }}

< strong > official recommendation method < / strong >

At present, it is officially recommended to use controlled components to process form data. In order to verify and feedback in real time, you can also control the rendering performance of components.

data

Controlled components

Uncontrolled components

source

Search wechat applet of competitive examination