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

本篇文章向大家介绍《理解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获取。组件不维护输入值的自身状态。

何时使用哪种类型？

• 受控组件： 适用于需要根据用户输入管理复杂表单、实现验证或需要动态行为的场景。当需保持表单数据与组件状态同步时，也是首选。

• 非受控组件： 适用于简单表单，或希望快速原型而无需状态管理开销的场景。与不依赖React状态管理的库集成时也很有用。

结论

React中的受控组件由React状态控制表单元素的值，允许完全控制表单数据，便于实时管理、验证和操作输入值。但需要更多样板代码，大型表单时性能可能降低。

非受控组件则内部存储状态，仅在必要时（如表单提交）与之交互。它们易于实现，性能可能更好，尤其对于大型表单。但对表单数据的控制较少，动态验证或修改也更困难。

文中关于的知识介绍，希望对你的学习有所帮助！若是受益匪浅，那就动动鼠标收藏这篇《理解React中受控和不受控制的组件》文章吧，也可关注golang学习网公众号了解相关技术文章。