理解React中受控和不受控制的组件-js教程-PHP中文网

理解React中受控和不受控制的组件

花韻仙語

发布： 2025-01-31 20:44:01

原创

690人浏览过

理解react中受控和不受控制的组件

React开发中，选择受控组件还是非受控组件是构建表单时的关键决策。两者各有优劣，理解其差异对高效开发至关重要。本文将深入探讨它们的定义、区别、优势以及各自的适用场景。

什么是受控组件？

在React中，受控组件是指其值由React组件状态管理的表单元素。这意味着组件状态存储当前值，并在用户交互时更新状态。

受控组件示例：

import React, { useState } from 'react';

const ControlledComponent = () => {
  const [inputValue, setInputValue] = useState('');

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

  const handleSubmit = (event) => {
    event.preventDefault();
    alert(`提交的值: ${inputValue}`);
  };

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

export default ControlledComponent;

登录后复制

此例中，输入字段的值由inputValue状态控制。用户输入时，handleChange函数更新状态。

什么是非受控组件？

非受控组件则自行管理内部状态，不依赖React的状态管理机制，而是使用DOM处理表单数据。输入值不存储在组件状态中，但可通过ref访问。

非受控组件示例：

import React, { useRef } from 'react';

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

  const handleSubmit = (event) => {
    event.preventDefault();
    alert(`提交的值: ${inputRef.current.value}`);
  };

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

export default UncontrolledComponent;

登录后复制

此例中，输入字段的值通过ref (inputRef) 直接从DOM获取。组件不维护输入值的自身状态。

何时使用哪种类型？