react中的受控组件和非受控组件

在React中，受控组件和非受控组件是两种处理表单输入的方式。

1. 受控组件

受控组件是指由React控制并维护其状态的组件。这意味着表单输入的值由组件的state属性来管理，每次值发生变化时都会更新state。要更新受控组件的值，需要通过onChange事件处理函数来更新state，然后再将新的值传递给组件。使用受控组件时，表单的值始终与组件的状态同步，可以方便地对输入进行验证或操作。

例如，以下代码演示了一个受控组件的例子：

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} />
  );
};

你可以将 React 中的受控组件与 Vue 中的表单的 v-model 进行类比。在 React 中，受控组件通过将表单元素的值绑定到组件的状态（state）来实现数据的双向绑定。当用户输入内容时，React 会更新组件的状态，从而更新表单元素的值。这样，你可以轻松地对表单的值进行控制和处理。

类似地，Vue 中的表单的 v-model 也实现了数据的双向绑定。通过将组件的数据绑定到表单元素的值，当用户输入内容时，Vue 会自动更新组件的数据，反之亦然。

因此，你可以将 React 中的受控组件与 Vue 中的表单的 v-model 视为在不同框架中实现表单的双向绑定的相似机制。

2. 非受控组件

非受控组件则将控制权交给了DOM本身，并不维护其输入值的状态。通过使用ref属性来访问DOM节点，可以在需要时获取表单输入的当前值。这样，无论用户输入如何，React并不会追踪或控制输入的值。非受控组件通常更适用于简单的表单输入或对实时输入不进行表单验证的情况。

以下是一个非受控组件的示例：

import React, { useRef } from 'react';

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

  const handleClick = () => {
    console.log(inputRef.current.value);
  };

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

需要注意的是，受控组件和非受控组件各有其适用场景，具体使用哪种方式取决于项目需求和个人偏好。