组件设计模式（上） 受控/非受控组件与容器组件

Csvn2026-03-20 10:50

📚 概述

组件设计模式是 React 开发中的核心概念。理解受控/非受控组件以及容器组件模式，能帮助你写出更清晰、更可维护的代码。

1️⃣ 受控组件（Controlled Components）

受控组件是指表单数据由 React 状态管理的组件。

核心特点

  • ✅ 单一数据源：表单值存储在 state 中
  • ✅ 实时验证：可以在输入时进行验证
  • ✅ 强制格式：可以控制输入格式
  • ✅ 条件禁用：可以根据条件禁用提交按钮

代码示例：表单验证

ini 复制代码 
import { useState } from 'react';

function ControlledForm() {
  const [formData, setFormData] = useState({
    username: '',
    email: '',
    password: ''
  });
  const [errors, setErrors] = useState({});

  const validateField = (name, value) => {
    switch (name) {
      case 'email':
        return /^[^\s@]+@[^\s@]+.[^\s@]+$/.test(value) 
          ? '' : '请输入有效的邮箱地址';
      case 'password':
        return value.length >= 8 
          ? '' : '密码至少需要 8 个字符';
      default:
        return '';
    }
  };

  const handleChange = (e) => {
    const { name, value } = e.target;
    setFormData(prev => ({ ...prev, [name]: value }));
    
    // 实时验证
    const error = validateField(name, value);
    setErrors(prev => ({ ...prev, [name]: error }));
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    // 提交前验证所有字段
    const newErrors = {};
    Object.keys(formData).forEach(key => {
      const error = validateField(key, formData[key]);
      if (error) newErrors[key] = error;
    });

    if (Object.keys(newErrors).length === 0) {
      console.log('提交数据:', formData);
    } else {
      setErrors(newErrors);
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <div>
        <label>用户名：</label>
        <input
          name="username"
          value={formData.username}
          onChange={handleChange}
        />
      </div>
      <div>
        <label>邮箱：</label>
        <input
          name="email"
          value={formData.email}
          onChange={handleChange}
        />
        {errors.email && <span style={{color: 'red'}}>{errors.email}</span>}
      </div>
      <div>
        <label>密码：</label>
        <input
          name="password"
          type="password"
          value={formData.password}
          onChange={handleChange}
        />
        {errors.password && <span style={{color: 'red'}}>{errors.password}</span>}
      </div>
      <button 
        type="submit"
        disabled={Object.values(errors).some(e => e) || !formData.username}
      >
        提交
      </button>
    </form>
  );
}

2️⃣ 非受控组件（Uncontrolled Components）

非受控组件是指表单数据由 DOM 自身管理的组件，使用 ref 来访问表单值。

适用场景

  • 📁 文件输入（<input type="file" />）
  • 🔌 第三方库集成（不兼容 React 状态管理）
  • ⚡ 简单表单（不需要实时验证）
  • 📊 性能优化（避免频繁重渲染）

代码示例：使用 useRef

javascript 复制代码 
import { useRef } from 'react';

function UncontrolledForm() {
  const formRef = useRef(null);
  const fileInputRef = useRef(null);

  const handleSubmit = (e) => {
    e.preventDefault();
    
    // 通过 ref 获取表单数据
    const formData = new FormData(formRef.current);
    const data = Object.fromEntries(formData.entries());
    
    console.log('表单数据:', data);
    
    // 访问文件输入
    const file = fileInputRef.current.files[0];
    if (file) {
      console.log('选中的文件:', file.name);
    }
  };

  return (
    <form ref={formRef} onSubmit={handleSubmit}>
      <div>
        <label>用户名：</label>
        <input name="username" defaultValue="" />
      </div>
      <div>
        <label>邮箱：</label>
        <input name="email" type="email" defaultValue="" />
      </div>
      <div>
        <label>上传文件：</label>
        <input 
          ref={fileInputRef}
          name="file" 
          type="file" 
        />
      </div>
      <button type="submit">提交</button>
    </form>
  );
}

3️⃣ 容器组件模式（Container Component Pattern）

容器组件负责数据获取和业务逻辑，展示组件负责 UI 渲染。

核心思想

  • 🧠 容器组件：处理数据、状态、业务逻辑
  • 🎨 展示组件：只负责接收 props 并渲染 UI
  • 🔄 关注点分离：逻辑与视图解耦

代码示例：用户列表

javascript 复制代码 
// UserList.jsx - 展示组件（纯 UI）
function UserList({ users, loading, error, onRefresh }) {
  if (loading) return <div>加载中...</div>;
  if (error) return <div>错误：{error}</div>;

  return (
    <div>
      <button onClick={onRefresh}>刷新</button>
      <ul>
        {users.map(user => (
          <li key={user.id}>
            {user.name} - {user.email}
          </li>
        ))}
      </ul>
    </div>
  );
}

// UserListContainer.jsx - 容器组件（数据逻辑）
import { useState, useEffect } from 'react';
import UserList from './UserList';

function UserListContainer() {
  const [users, setUsers] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  const fetchUsers = async () => {
    try {
      setLoading(true);
      const response = await fetch('/api/users');
      const data = await response.json();
      setUsers(data);
      setError(null);
    } catch (err) {
      setError(err.message);
    } finally {
      setLoading(false);
    }
  };

  useEffect(() => {
    fetchUsers();
  }, []);

  return (
    <UserList
      users={users}
      loading={loading}
      error={error}
      onRefresh={fetchUsers}
    />
  );
}

export default UserListContainer;

4️⃣ 现代替代方案：自定义 Hooks

随着 Hooks 的普及，自定义 Hooks 成为容器组件的现代替代方案。

代码示例：useUsers Hook

javascript 复制代码 
// hooks/useUsers.js
import { useState, useEffect } from 'react';

export function useUsers() {
  const [users, setUsers] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  const fetchUsers = async () => {
    try {
      setLoading(true);
      const response = await fetch('/api/users');
      const data = await response.json();
      setUsers(data);
      setError(null);
    } catch (err) {
      setError(err.message);
    } finally {
      setLoading(false);
    }
  };

  useEffect(() => {
    fetchUsers();
  }, []);

  return { users, loading, error, refetch: fetchUsers };
}

// 使用 Hook 的组件
import { useUsers } from './hooks/useUsers';

function UserPage() {
  const { users, loading, error, refetch } = useUsers();

  if (loading) return <div>加载中...</div>;
  if (error) return <div>错误：{error}</div>;

  return (
    <div>
      <button onClick={refetch}>刷新</button>
      <ul>
        {users.map(user => (
          <li key={user.id}>{user.name} - {user.email}</li>
        ))}
      </ul>
    </div>
  );
}

💡 模式对比

特性 受控组件 非受控组件 容器组件 自定义 Hooks
数据源 React state DOM React state React state
实时验证 ✅ ❌ ✅ ✅
性能 中等 高 中等 高
代码复用 中 低 高 非常高
推荐场景 表单验证 文件输入/简单表单 数据获取 数据获取（现代）

⚠️ 选择建议

  1. 需要实时验证 → 受控组件
  2. 集成第三方库 → 非受控组件
  3. 复杂数据逻辑 → 自定义 Hooks（优先）或容器组件
  4. 简单表单 → 非受控组件（性能更好）
相关推荐
早點睡3902 小时前
ReactNative项目OpenHarmony三方库集成实战：react-native-video
javascript·react native·react.js
請你喝杯Java2 小时前
基于 TypeScript React Next.js 的 AI 产品技术栈调研报告
javascript·react.js·typescript
薛定e的猫咪4 小时前
AI 时代前端框架选型：React 核心原理与 SocialVibe 项目实战解析
人工智能·react.js·前端框架
早點睡3904 小时前
ReactNative项目Openharmony三方库集成实战：react-native-safe-area-context
javascript·react native·react.js
James man4 小时前
前端节点连接库选型指南：React-Flow、AntV X6 与 Power-Link 深度对比
前端·react.js·前端框架
Jinuss4 小时前
React 19 新特性：`useOptimistic` Hook 完整指南
前端·javascript·react.js
弓.长.4 小时前
ReactNative for OpenHarmony项目鸿蒙化三方库：react-native-image-crop-picker — 图片选择裁剪组件
react native·react.js·harmonyos
console.log('npc')20 小时前
Cursor，Trae，Claude Code如何协作生产出一套前后台app？
前端·人工智能·react.js·设计模式·ai·langchain·ai编程
Coding张1 天前
React 底层运行原理框架（大白话版）
react.js
热门推荐
01GitHub 镜像站点02Qwen3.5 开源全解析：从 0.8B 到 397B，代际升级 + 全场景选型指南03OpenClaw 使用和管理 MCP 完全指南04Labelme从安装到标注：零基础完整指南05AI 编程三剑客：Spec-Kit、OpenSpec、Superpowers 深度对比与实战指南06UV安装并设置国内源07小黑课堂计算机二级WPSoffice题库软件下载安装教程（2026年3月最新版）08OpenClaw Control UI安全上下文访问配置09Claude Code + GLM4.7 避坑指南：解决 Unable to connect to Anthropic services10让 Trae IDE 智能体 “读懂”文档 Excel+PDF+DOCX ：mcp-documents-reader 工具使用指南