浅谈受控组件和非受控组件

受控组件（Controlled Components）

在受控组件中，React 组件的状态（state）驱动表单元素的值。以下是一个详细的示例：

import React, { useState } from 'react';

const ControlledComponent = () => {
  // 组件状态用于管理输入框的值
  const [inputValue, setInputValue] = useState('');

  // 处理输入框值变化的函数
  const handleChange = (event) => {
    // 通过 setState 更新组件状态
    setInputValue(event.target.value);
  };

  return (
    <input
      type="text"
      value={inputValue}
      onChange={handleChange}
    />
  );
};

在这个例子中：

• inputValue 是 React 组件的状态，用于管理输入框的值。
• handleChange 函数用于处理输入框值的变化，通过 setInputValue 更新状态。
• 输入框的值通过 value 属性受到 React 控制，称之为受控组件。

非受控组件（Uncontrolled Components）

在非受控组件中，React 不控制组件的状态，而是直接与 DOM 交互。以下是一个详细的示例：

import React, { useRef } from 'react';

const UncontrolledComponent = () => {
  // 创建一个 ref 来获取输入框的引用
  const inputRef = useRef(null);

  // 处理按钮点击事件，通过 ref 获取输入框的值
  const handleButtonClick = () => {
    console.log(inputRef.current.value);
  };

  return (
    <div>
      {/* ref 关联到输入框 */}
      <input type="text" ref={inputRef} />
      <button onClick={handleButtonClick}>Get Value</button>
    </div>
  );
};

在这个例子中：

• inputRef 是通过 useRef 创建的引用，用于获取输入框的 DOM 元素。
• handleButtonClick 函数通过 inputRef.current.value 获取输入框的值。
• 输入框的值不受 React 状态管理，称之为非受控组件。

如何选择

受控组件：

• 优势：

  • 更容易与 React 的单向数据流和状态管理方式结合使用。
  • 适用于需要实现表单验证、动态更新或处理用户输入的场景。

• 示例用途：

  • 表单验证、实时搜索、动态表单等。

非受控组件：

• 优势：

  • 适用于对 React 状态不关心，或需要直接与 DOM 交互的场景。
  • 简化某些特定的需求，如通过原生 DOM 事件获取值。

• 示例用途：

  • 集成非 React 库、直接访问 DOM 元素等。

根据具体需求和个人或团队的偏好，选择适当的方式。在大多数情况下，使用受控组件更符合 React 的设计理念。