22 受控组件与非受控组件

在使用 React.js 开发表单时，我们会面临两种组件的选择：受控组件（Controlled Components）和非受控组件（Uncontrolled Components）。这两者在状态管理和数据处理上有着显著的不同，本篇将深入探讨它们的特性、应用场景，以及如何在项目中使用它们。

受控组件

受控组件是将表单元素的值存储在组件的状态中。通过这种方式，表单元素的当前值由 React 组件的状态决定，任何的表单输入都需要通过 setState 来更新状态。受控组件通常更加直观，也便于实现复杂的表单逻辑。

示例：受控组件的基本实现

下面是一个简单的受控组件示例，它允许用户输入一个名字，然后显示该名字。

import React, { useState } from 'react';

const ControlledForm = () => {
    const [name, setName] = useState('');

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

    const handleSubmit = (event) => {
        event.preventDefault();
        alert(`你输入的名字是: ${name}`);
    };

    return (
        <form onSubmit={handleSubmit}>
            <label>
                名字:
                <input type="text" value={name} onChange={handleChange} />
            </label>
            <button type="submit">提交</button>
        </form>
    );
};

export default ControlledForm;

受控组件的特点

1. 状态管理：所有表单的值都存储在 React 组件的状态中，使得状态与界面保持同步。
2. 单一数据源：数据的变化直接通过 setState 更新组件的状态。
3. 更容易进行表单验证：由于所有的输入都在组件状态中，可以方便地进行逻辑处理和验证。

非受控组件

非受控组件则是直接使用 DOM 元素来存储表单数据。我们可以通过 ref 来访问表单元素的当前值。这种方法常常使得 React 组件的状态保持较低的复杂性，但在一些情况下，例如需要直接操作 DOM，或在需要与非 React 代码交互时，非受控组件会显得更有效。

示例：非受控组件的基本实现

下面是一个简单的非受控组件示例，使用 ref 来获取用户输入的值。

import React, { useRef } from 'react';

const UncontrolledForm = () => {
    const nameInput = useRef(null);

    const handleSubmit = (event) => {
        event.preventDefault();
        alert(`你输入的名字是: ${nameInput.current.value}`);
    };

    return (
        <form onSubmit={handleSubmit}>
            <label>
                名字:
                <input type="text" ref={nameInput} />
            </label>
            <button type="submit">提交</button>
        </form>
    );
};

export default UncontrolledForm;

非受控组件的特点

1. 减少状态管理：不需要将表单值映射到组件状态中，较少的 State 相关代码。
2. 更接近原生 DOM 操作：使用 ref 与传统的 JavaScript 操作方式类似。
3. 更简单的实现：在一些简单表单中，非受控组件通常能更快地实现功能。

受控组件与非受控组件的选择

在选择使用受控组件还是非受控组件时，可以考虑以下因素：

• 项目复杂性：如果表单逻辑复杂，并且需要实现较多的验证和条件渲染，受控组件通常是更优的选择。
• 表单数量：对于少量简单输入的表单，非受控组件可能会更加简便。
• 团队的编程规范：在某些团队中，建议全部使用受控组件以保持一致性和可维护性。

小结

在 React 中，表单处理可以通过受控组件和非受控组件来实现。受控组件通过状态管理提供了更多的灵活性和可控性，而非受控组件则在简单的表单中提供了更轻量的解决方案。通过明确理解两者的特性和应用场景，可以在项目中更高效地使用 React 的表单处理能力。

在上一篇中，我们学习了如何使用合成事件来处理事件，在下一篇中，我们将继续探讨表单处理中的基本使用，敬请期待！