第二节:React 基础篇-受控组件 vs 非受控组件

一、场景题:设计一个实时搜索输入框,说明选择依据

受控组件 vs 非受控组件

核心区别
特征 受控组件 非受控组件
数据管理 由React状态(state)控制 通过DOM元素(ref)直接访问
更新时机 每次输入触发onChange 提交时通过ref获取值
实时性 即时响应输入 延迟获取最终值
典型场景 需实时验证/反馈的输入 表单提交后处理

实时搜索输入框设计

场景需求

• 用户输入时立即触发搜索请求(需防抖优化)

• 输入内容需要动态高亮匹配结果

• 支持清空输入后重置搜索结果

方案选择:受控组件

代码实现

jsx 复制代码
import { useState, useEffect } from 'react';

function SearchInput() {
  const [query, setQuery] = useState('');
  const [results, setResults] = useState([]);

  // 防抖处理(300ms延迟)
  useEffect(() => {
    const handler = setTimeout(() => {
      if (query) {
        fetchResults(query).then(setResults);
      } else {
        setResults([]);
      }
    }, 300);

    return () => clearTimeout(handler);
  }, [query]);

  return (
    <div>
      <input
        type="text"
        value={query}
        onChange={(e) => setQuery(e.target.value)}
        placeholder="Search..."
      />
      <ul>
        {results.map((result) => (
          <li key={result.id}>{result.text}</li>
        ))}
      </ul>
    </div>
  );
}
选择依据
  1. 实时反馈需求

    • 输入内容需要立即触发搜索逻辑(防抖优化避免频繁请求)。

    • 受控组件的onChange可精准捕获每次输入变化,适合高频交互。

  2. 状态同步性

    • 搜索结果的渲染依赖当前输入值(如query清空时需同步清空结果)。

    • 受控组件通过useState保证UI与状态严格同步。

  3. React 18优化

    • 自动批处理(Automatic Batching)合并多次setQuery导致的渲染,减少性能损耗。

    useTransition可标记搜索为低优先级更新,避免输入卡顿。


为何不选非受控组件?

  1. 延迟问题

    • 非受控组件需通过ref.current.value手动获取值,无法实时响应输入变化。

  2. 防抖实现复杂

    • 需自行监听input事件并添加定时器,代码冗余易出错。

  3. 状态追溯困难

    • 清空输入框时需手动操作DOM(如ref.current.value = ""),违背React数据流原则。


总结

优先受控组件 :实时交互、状态依赖型场景(搜索、表单验证)。

选非受控组件 :仅需最终结果的文件上传、大型表单性能优化(如1000+字段)。

React 18+优化 :利用useDeferredValue进一步降低高频输入的性能开销:

jsx 复制代码
const deferredQuery = useDeferredValue(query); // 延迟更新派生值

二、场景:自己实现一个非受控组件的案例

以下是一个简单的非受控组件 实现案例,通过 ref 直接访问输入框的值:

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

function UncontrolledInput() {
  // 1. 创建ref引用
  const inputRef = useRef(null);

  // 2. 提交时获取值
  const handleSubmit = (e) => {
    e.preventDefault();
    alert("输入的值: " + inputRef.current.value);
    inputRef.current.value = ""; // 直接操作DOM清空输入
  };

  return (
    <form onSubmit={handleSubmit}>
      <input 
        type="text" 
        ref={inputRef}  // 3. ref绑定到input
        placeholder="非受控输入" 
      />
      <button type="submit">提交</button>
    </form>
  );
}
核心特点:
  1. 直接DOM操作 :通过 inputRef.current.value 直接读写输入框值
  2. 无状态管理 :无需 useState 控制输入内容
  3. 适用场景:表单提交后只需最终值,无需实时验证或中间状态
对比受控组件优势:

更少渲染 :输入过程不会触发组件重渲染

代码更简:适合简单表单(如一次性文件上传)

相关推荐
未来之窗软件服务12 分钟前
免费版酒店押金原路退回系统之【房费押金计算器】实践——仙盟创梦IDE
前端·javascript·css·仙盟创梦ide·东方仙盟·酒店押金系统
拾光拾趣录15 分钟前
常见 HTTP 请求头:从“为什么接口返回乱码”说起
前端·http
阿华的代码王国15 分钟前
【Android】卡片式布局 && 滚动容器ScrollView
android·xml·java·前端·后端·卡片布局·滚动容器
2025年一定要上岸21 分钟前
【pytest高阶】源码的走读方法及插件hook
运维·前端·python·pytest
姑苏洛言25 分钟前
答题抽奖活动小程序技术复盘
前端
砖头拍死你1 小时前
51单片机如何使用printf打印unsigned long的那些事
java·前端·51单片机
用户1512905452201 小时前
css —pointer-events属性_css pointer-events
前端
帅夫帅夫1 小时前
Axios 入门指南:从基础用法到实战技巧
前端
云边散步1 小时前
《校园生活平台从 0 到 1 的搭建》第四篇:微信授权登录前端
前端·javascript·后端
讨厌吃蛋黄酥1 小时前
React样式冲突终结者:CSS模块化+Vite全链路实战指南🔥
前端·javascript·react.js