React框架的受控组件和非受控组件

 

当涉及到 React 框架时，了解受控组件和非受控组件是非常重要的概念。这两种组件类型用于处理表单输入和其他用户交互，并在 React 中有着不同的使用方式和特点。本文将介绍受控组件和非受控组件的概念、使用方法以及何时使用它们。

受控组件和非受控组件的概念

受控组件

受控组件是由 React 组件完全控制的表单元素。组件的状态（state）被用于存储和更新表单元素的值，同时更新状态的函数也负责更新表单元素的值。这样，组件可以根据状态的变化来响应用户输入并进行相应的处理。

非受控组件

非受控组件是由 DOM 自身管理和处理的表单元素。React 组件不追踪或管理表单元素的状态，而是通过引用（ref）来访问表单元素的值和状态。非受控组件更接近于传统的 HTML 表单，组件无需为每个用户输入事件创建事件处理函数，而是从 DOM 中读取值。

受控组件的使用

使用受控组件时，需要考虑以下几个方面：

1. 初始化状态：在组件的状态中设置表单元素的初始值。

2. 监听变化：通过监听表单元素的变化事件（如 onChange），更新组件的状态。

3. 处理提交：通过监听表单的提交事件（如 onSubmit），处理表单的提交行为。

下面是一个受控组件的示例，展示了一个简单的输入框：

import React, { useState } from 'react';

const ControlledComponent = () => {
  const [value, setValue] = useState('');

  const handleChange = (event) => {
    setValue(event.target.value);
  };

  const handleSubmit = (event) => {
    event.preventDefault();
    console.log('Submitted value:', value);
    // 进行进一步的处理
  };

  return (
    <form onSubmit={handleSubmit}>
      <input type="text" value={value} onChange={handleChange} />
      <button type="submit">Submit</button>
    </form>
  );
};

在上述示例中，我们使用 useState 钩子函数来定义了一个名为 value 的状态变量，并通过 setValue 函数更新它。输入框的值由 value 状态控制，并通过 handleChange 函数更新状态。表单的提交事件由 handleSubmit 函数处理。

非受控组件的使用

使用非受控组件时，可以使用引用（ref）来访问表单元素的值。以下是一个非受控组件的示例：

import React, { useRef } from 'react';

const UncontrolledComponent = () => {
  const inputRef = useRef(null);

  const handleSubmit = (event) => {
    event.preventDefault();
    const value = inputRef.current.value;
    console.log('Submitted value:', value);
    // 进行进一步的处理
  };

  return (
    <form onSubmit={handleSubmit}>
      <input type="text" ref={inputRef} />
      <button type="submit">Submit</button>
    </form>
  );
};

在上述示例中，我们使用 useRef 钩子函数创建了一个名为 inputRef 的引用，然后将它赋值给输入框的 ref 属性。在表单的提交事件中，通过 inputRef.current.value 来获取输入框的值。

受控组件 vs 非受控组件

受控组件和非受控组件各有其优缺点，根据实际需求选择适合的方式：

• 受控组件适用于需要对用户输入进行严格控制和验证的场景。它提供了更多的灵活性，可以实时响应用户的输入，并执行额外的逻辑。但它也需要更多的代码和状态管理。

• 非受控组件适用于简单的表单或需要直接访问底层 DOM 元素的情况。它更接近于传统的 HTML 表单，代码量较少，但缺少一些 React 的高级功能，如表单验证和实时数据更新。

根据实际情况和需求，选择适合的组件类型以提高开发效率和用户体验。

希望本文对你理解和使用受控组件和非受控组件有所帮助。在 React 开发中，根据场景选择合适的组件类型是提高效率和代码质量的关键。