TLDR;

https://www.youtube.com/watch?v=6L2Rd116EvY 你可以查看那一页，他解释得很好.......

控制组件

受控组件是呈现表单元素的组件，例如<input/>，其值由react和react单独控制。例如，复制下面的代码并尝试在DOM中更改输入字段…

export default function Component() {

  return (
        <div>
            <input type="text" value="somevalue" />
            
          </div>
)
}

无论你如何尝试更新上面输入的值，react都不会让你这么做。因为react想要成为一个使用状态来控制更新值的人，因此title controlled…

它的值可以通过连接属性onChange和value到一个状态来更新，如下所示。

function Component() {

  const [text,setText] = React.useState("")

  return (
          <div>

            <input type="text" onChange={(e)=>setText(e.target.value)} value={text} />

            <p>{text}</p> 
          </div>
  )
}

现在我们的输入和它的值可以被更新，用来渲染一些东西或执行即时验证....

不受控制的组件

非受控组件是呈现<input/>这样的表单元素的组件，其值可以由Dom元素处理，受控和非受控之间的一个主要区别是值属性定义。对于不受控制的，我们有一个defaultValue代替或根本没有值。

function Component() {

  return (
         <div>

            <input type="email" id="message" defaultValue="example@mail.com" />
            
          </div>
  )
}

上面输入的值可以被改变，并由DOM控制，而不需要React…

建议在react中更多地使用受控组件，因为您可以执行即时验证和强制动态输入。

TLDR;

https://www.youtube.com/watch?v=6L2Rd116EvY 你可以查看那一页，他解释得很好.......

控制组件

受控组件是呈现表单元素的组件，例如<input/>，其值由react和react单独控制。例如，复制下面的代码并尝试在DOM中更改输入字段…

export default function Component() {

  return (
        <div>
            <input type="text" value="somevalue" />
            
          </div>
)
}

无论你如何尝试更新上面输入的值，react都不会让你这么做。因为react想要成为一个使用状态来控制更新值的人，因此title controlled…

它的值可以通过连接属性onChange和value到一个状态来更新，如下所示。

function Component() {

  const [text,setText] = React.useState("")

  return (
          <div>

            <input type="text" onChange={(e)=>setText(e.target.value)} value={text} />

            <p>{text}</p> 
          </div>
  )
}

现在我们的输入和它的值可以被更新，用来渲染一些东西或执行即时验证....

不受控制的组件

非受控组件是呈现<input/>这样的表单元素的组件，其值可以由Dom元素处理，受控和非受控之间的一个主要区别是值属性定义。对于不受控制的，我们有一个defaultValue代替或根本没有值。

function Component() {

  return (
         <div>

            <input type="email" id="message" defaultValue="example@mail.com" />
            
          </div>
  )
}

上面输入的值可以被改变，并由DOM控制，而不需要React…

建议在react中更多地使用受控组件，因为您可以执行即时验证和强制动态输入。

受控制的组件不保持它们的状态。

它们需要的数据从父组件传递给它们。

它们通过回调函数与这些数据交互，回调函数也从父进程传递给子进程。

它们都渲染表单元素

未受控组件和受控组件是用于描述呈现HTML表单元素的React组件的术语。每次创建渲染HTML表单元素的React组件时，都是在创建这两个元素中的一个。

非受控组件和受控组件访问表单元素数据的方式不同(<input>， <textarea>， <select>)。

不受控制的组件

未受控组件是呈现表单元素的组件，其中表单元素的数据由DOM处理(默认DOM行为)。要访问输入的DOM节点并提取其值，可以使用ref。

示例—未受控组件:

const { useRef } from 'react';

function Example () {
  const inputRef = useRef(null);
  return <input type="text" defaultValue="bar" ref={inputRef} />
}

控制组件

受控组件是一种呈现表单元素并通过将表单数据保持在组件状态来控制它们的组件。

在受控组件中，表单元素的数据由React组件(而不是DOM)处理，并保存在组件的状态中。受控组件基本上会覆盖HTML表单元素的默认行为。

我们通过设置表单元素的属性值和事件onChange将表单元素(<input>， <textarea>或<select>)连接到状态来创建一个受控组件。

示例—受控组件:

const { useState } from 'react';

function Controlled () {
  const [email, setEmail] = useState();

  const handleInput = (e) => setEmail(e.target.value);


  return <input type="text" value={email} onChange={handleInput} />;
}

受控组件:表单数据由React组件处理。

ReactJS中受控组件的流程 图像

不受控组件:表单数据由DOM本身处理。

ReactJS中未受控组件的流 图像

这与有状态DOM组件(表单元素)有关，React文档解释了其中的区别:

A Controlled Component is one that takes its current value through props and notifies changes through callbacks like onChange. A parent component "controls" it by handling the callback and managing its own state and passing the new values as props to the controlled component. You could also call this a "dumb component". A Uncontrolled Component is one that stores its own state internally, and you query the DOM using a ref to find its current value when you need it. This is a bit more like traditional HTML.

大多数原生React表单组件同时支持受控和不受控使用:

// Controlled:
<input type="text" value={value} onChange={handleChange} />

// Uncontrolled:
<input type="text" defaultValue="foo" ref={inputRef} />
// Use `inputRef.current.value` to read the current value of <input>

在大多数(或所有)情况下，您应该使用受控组件。