React 工具和库面试题, 什么是 React 中的非受控组件?它的应用场景是什么?

Step 1

Q:: 什么是 React 中的非受控组件？

A:: 非受控组件是指那些不依赖 React 状态管理来控制其值的表单元素。相反，它们直接使用 DOM 元素自身的内部状态。通常，通过 ref 来访问 DOM 节点并获取其当前值。非受控组件在需要直接操作 DOM 或与非 React 系统集成时特别有用。

Step 2

Q:: React 中的非受控组件的应用场景是什么？

A:: 非受控组件适用于表单元素需要直接与 DOM 交互的情况，例如与第三方库集成，或者处理复杂表单时希望避免 React 状态更新的开销。此外，它们也适用于简单的表单收集场景，避免了使用状态管理带来的复杂性。

Step 3

Q:: 如何在 React 中创建一个非受控组件？

A:: 在 React 中，可以通过将 defaultValue 或 defaultChecked 属性赋予表单元素，并使用 ref 来访问该元素，从而创建非受控组件。示例代码如下：

 
class MyForm extends React.Component {
  constructor(props) {
    super(props);
    this.inputRef = React.createRef();
  }
 
  handleSubmit = (event) => {
    event.preventDefault();
    alert('Input value: ' + this.inputRef.current.value);
  }
 
  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <input type="text" defaultValue="Default Value" ref={this.inputRef} />
        <button type="submit">Submit</button>
      </form>
    );
  }
}
 

Step 4

Q:: React 中受控组件和非受控组件的区别是什么？

A:: 受控组件依赖于 React 状态来管理表单元素的值，任何用户输入都会通过事件处理器更新状态。非受控组件则直接使用 DOM 节点的值，并且通常使用 ref 来访问元素。受控组件适合复杂的交互和验证逻辑，而非受控组件适合轻量的表单处理场景。

Step 5

Q:: 在 React 中使用受控组件和非受控组件各有哪些优缺点？

A:: 受控组件的优点是其可以利用 React 状态管理进行实时验证和复杂交互，但缺点是代码更复杂且可能带来性能开销。非受控组件的优点是更接近于原生 DOM 操作，代码更简单且性能较好，但缺点是无法享受 React 状态管理带来的便利性，特别是在需要实时同步状态的情况下。

Step 1

Q:: 什么是 React 中的非受控组件？

A:: 非受控组件是指其值不受 React 控制的表单组件。通常，表单元素如输入框和选择框的值是由组件的状态（state）管理的，这种组件称为受控组件。而在非受控组件中，表单元素的值是由 DOM 自己管理的，而不是通过 React 的状态来管理。要获取非受控组件的值，通常使用 ref 来访问 DOM 元素并读取其值。

Step 2

Q:: 非受控组件的应用场景是什么？

A:: 非受控组件适用于表单元素需要与外部库或已有代码集成的情况，或是初始加载时表单元素无需频繁交互或更新的场景。它在处理不频繁变更的用户输入或在需要简单访问表单数据的情况下非常有用，比如一次性提交表单。在一些性能要求较高的场景中，非受控组件可能更为合适，因为它减少了 React 状态的管理工作。