React前端面试每日一试 5.什么是受控组件和非受控组件?

在React中,受控组件和非受控组件是两种处理表单数据的方式。理解这两种方式对于管理和维护表单状态非常重要。

受控组件(Controlled Components)

受控组件 是指那些表单数据完全由React组件的状态控制的组件。也就是说,表单元素的值是通过React的state来管理的,任何对表单元素值的更改都通过事件处理器来更新状态。

特点 如下:

1.数据源 :表单元素的值由React组件的状态控制。

2.单一数据源 :表单元素的值和组件状态保持同步,确保数据源一致性。

3.事件处理:通过事件处理器(如onChange)来更新组件状态,从而更新表单元素的值。

示例代码

javascript 复制代码
import React, { useState } from 'react';

function ControlledForm() {
  const [inputValue, setInputValue] = useState('');

  function handleChange(event) {
    setInputValue(event.target.value);
  }

  function handleSubmit(event) {
    event.preventDefault();
    alert('Submitted value: ' + inputValue);
  }

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

export default ControlledForm;

在上面示例中,输入框的值由组件的状态inputValue 控制,handleChange函数更新状态,从而更新输入框的值。

非受控组件(Uncontrolled Components)

非受控组件 是指那些表单数据由DOM本身管理的组件。即表单元素的值存储在DOM中,React并不直接控制这些值。通常,非受控组件使用ref来访问DOM元素并获取其值。

特点如下

1.数据源 :表单元素的值由DOM本身控制。

2.访问方式 :使用ref来访问表单元素的值。

3.独立管理:表单元素的值不与组件状态绑定,因此不需要事件处理器来更新组件状态。

示例代码

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

function UncontrolledForm() {
  const inputRef = useRef(null);

  function handleSubmit(event) {
    event.preventDefault();
    alert('Submitted value: ' + inputRef.current.value);
  }

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

export default UncontrolledForm;

在上面这个示例中,输入框的值由DOM本身控制,通过inputRef访问输入框的值并在表单提交时读取。

总结

受控组件和非受控组件是两种处理React表单数据的不同方式 。受控组件使用React状态 来管理表单数据,提供更高的控制性和一致性,但代码相对复杂。非受控组件则依赖于DOM本身来管理表单数据,代码简单,但数据流可能不如受控组件明确。选择哪种方式取决于具体的使用场景和需求。

通过合理选择和使用受控组件和非受控组件,可以构建高效、可维护的React表单组件,满足各种复杂的表单处理需求。

拓展 双控组件

有时候我们可能希望组件能够兼具受控和非受控的特性,这种组件可以称为"双控组件"(Hybrid Components)。双控组件允许开发者在需要时以受控方式使用组件,而在其他情况下则以非受控方式使用组件。

双控组件的实现可以通过以下方式:

1.受控模式 :如果组件接收到value和onChange props,则以受控方式运行。

2.非受控模式:如果组件没有接收到value和onChange props,则以非受控方式运行,并使用defaultValue初始化组件的值。

通过这种方式,组件可以更好地适应不同的使用场景,同时保持代码简洁和可维护性.

相关推荐
DoraBigHead2 分钟前
🧭 React 理念:让时间屈服于 UI —— 从同步到可中断的演化之路
前端·javascript·面试
敢敢J的憨憨L25 分钟前
GPTL(General Purpose Timing Library)使用教程
java·服务器·前端·c++·轻量级计时工具库
DTS小夏32 分钟前
算法社Python基础入门面试题库(新手版·含答案)
python·算法·面试
喝拿铁写前端38 分钟前
Vue 组件通信的两种世界观:`.sync` 与普通 `props` 到底有什么不同?
前端·vue.js·前端框架
美酒没故事°1 小时前
npm源管理器:nrm
前端·npm·npm源
用户22152044278001 小时前
vue3组件间的通讯方式
前端·vue.js
三十_A1 小时前
【实录】使用 patch-package 修复第三方 npm 包中的 Bug
前端·npm·bug
下位子1 小时前
『AI 编程』用 Claude Code 从零到一开发全栈减脂追踪应用
前端·ai编程·claude
tyro曹仓舒1 小时前
Vue单文件组件到底需不需要写name
前端·vue.js
用户47949283569151 小时前
面试官:讲讲2FA 双因素认证原理
前端·后端·安全