前端大厂最新面试题-controlled_Uncontrolled.docx

"前端大厂最新面试题-controlled_Uncontrolled" Controlled 和 Uncontrolled 组件是 React 中两个重要的概念，它们之间的区别在于组件的状态管理方式和用户输入处理方式。 Controlled 组件 Controlled 组件是指组件的状态完全受外部控制的组件，组件的值完全由外部状态决定。在 Controlled 组件中，组件的状态由 React 组件负责处理，这意味着组件的值会随着外部状态的变化而变化。例如： ```jsx class TestComponent extends React.Component { constructor(props) { super(props); this.state = { username: 'lindaidai' }; } render() { return <input name="username" value={this.state.username} />; } } ``` 在上面的例子中，input 组件的值完全由 `this.state.username` 决定。这样，当用户输入新内容时，input 组件的值不会自动更新。如果想要更新 input 组件的值，需要手动更新 `this.state.username`。 Controlled 组件的优点是可以很容易地实现表单验证和数据绑定。然而，如果不小心处理，可能会导致组件的状态和用户输入不一致。 Uncontrolled 组件 Uncontrolled 组件是指组件的状态不完全受外部控制的组件，组件的值可以由用户输入决定。在 Uncontrolled 组件中，组件的状态由 DOM 本身处理，而不是由 React 组件负责处理。例如： ```jsx import React, { Component } from 'react'; export class UnControll extends Component { constructor(props) { super(props); this.inputRef = React.createRef(); } handleSubmit = (e) => { console.log('我们可以获得input内的值为', this.inputRef.current.value); e.preventDefault(); } render() { return ( <form onSubmit={e => this.handleSubmit(e)}> <input defaultValue="lindaidai" ref={this.inputRef} /> <input type="submit" value="提交" /> </form> ); } } ``` 在上面的例子中，input 组件的值可以由用户输入决定，而不是由外部状态决定。使用 `ref` 可以获取 input 组件的当前值。 Uncontrolled 组件的优点是可以快速实现表单功能，代码量少，但是可能会导致组件的状态和用户输入不一致。 应用场景 Controlled 组件和 Uncontrolled 组件的选择取决于具体的应用场景。如果需要实现表单验证和数据绑定，推荐使用 Controlled 组件。如果需要快速实现表单功能，可以使用 Uncontrolled 组件。 在大多数情况下，推荐使用 Controlled 组件来实现表单，因为在 Controlled 组件中，表单数据由 React 组件负责处理。但是，如果选择 Uncontrolled 组件的话，控制能力较弱，表单数据就由 DOM 本身处理。 Controlled 组件和 Uncontrolled 组件都是 React 中重要的概念，它们之间的区别在于组件的状态管理方式和用户输入处理方式。选择使用哪种组件取决于具体的应用场景。