react受控组件和非受控组件区别

React是一种流行的JavaScript库，用于构建用户界面。在React中，组件是构建块，而受控组件和非受控组件是两种不同的组件状态管理方式。本篇博客将深入探讨受控组件和非受控组件的区别，以及它们在React应用中的应用场景。

什么是受控组件？

在React中，受控组件是由React状态（state）控制的组件。这意味着组件的状态和用户输入是直接关联的。当用户与输入元素（如文本框或复选框）交互时，组件的状态会更新，从而反映用户的输入。

javascript 复制代码

import React, { useState } from 'react';

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

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

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

在上面的例子中，inputValue的状态受React控制，通过onChange事件更新状态。

什么是非受控组件？

相比之下，非受控组件是由DOM本身控制的组件。React不直接管理这些组件的状态，而是通过对DOM的引用来获取和更新组件的值。

javascript 复制代码

import React, { useRef } from 'react';

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

  const handleClick = () => {
    alert(`Input value: ${inputRef.current.value}`);
  };

  return (
    <div>
      <input type="text" ref={inputRef} />
      <button onClick={handleClick}>Get Value</button>
    </div>
  );
};

在这个例子中，通过inputRef引用DOM元素，而不是使用React状态来管理输入的值。

区别与应用场景：

状态管理：
- 受控组件：通过React状态管理组件的值。
- 非受控组件：直接通过DOM引用管理组件的值。
数据流：
- 受控组件：数据流是双向的，即用户输入会更新React状态，反之亦然。
- 非受控组件：数据流是单向的，需要通过DOM引用来获取用户输入。
适用场景：
- 受控组件：适用于需要对用户输入进行精确控制和处理的场景，例如表单验证。
- 非受控组件：适用于简单的交互，不需要在React中进行状态管理的场景，例如集成第三方库。

结论

在React应用中，选择受控组件或非受控组件取决于项目的需求和开发者的偏好。受控组件提供了更精确的控制和更丰富的React生命周期方法，而非受控组件则更接近原始的DOM操作方式，适用于简单的场景。在实际开发中，可以根据具体情况选择合适的组件状态管理方式。