什么是React受控组件和不受控组件?

在ReactJS中什么是受控组件和非受控组件?它们之间有什么不同?

152021 次浏览
小开
最佳答案

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

  • 控制组件是通过props获取当前值并通过像onChange这样的回调通知更改的函数。父组件通过处理回调和管理自己的状态并将新值作为道具传递给被控制组件来“控制”它。您也可以将其称为“哑组件”。
  • 不受控制的组件在内部存储它自己的状态，当你需要它时，你可以使用ref查询DOM来找到它的当前值。这有点像传统的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>

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

小开
受控组件是从回调函数获取更改值的组件 而且 未受控组件是拥有来自DOM的组件。 例如, 当输入值发生变化时，我们可以使用受控组件中的onChange函数 我们也可以使用类似ref.

这样的DOM来获取值
小开

受控组件主要是那些组件的道具值来自父组件或来自存储的组件(如redux的情况)。例子:

<ControlledComp value={this.props.fromParent}/>

对于不受控制的组件，可以根据事件处理从组件的状态中获取组件值。例子:

<UncontrolledComp value={this.state.independentValue}/>
小开

它们都渲染表单元素

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

不受控制的组件和控制组件的不同之处在于它们从表单元素 (<input>， <textarea>， <select>)访问数据的方式。

不受控制的组件

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

示例—未受控组件:
const { useRef } from 'react';


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

控制组件

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

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

我们通过设置表单元素的属性value和事件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中受控组件的流 图像 < / p >

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

ReactJS中未受控组件的流 图像 < / p >

小开

受控组件是React中做事的首选方式。

它允许我们将所有组件的状态保持在React状态，而不是依赖DOM通过其内部状态来检索元素的值。

受控组件是从状态中派生其输入值的组件。

小开
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想要使用状态来控制更新的值，因此标题为<强> < /控制强>…

它的值可以通过将属性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中更多地使用受控组件，因为您可以执行即时验证和强制动态输入。


提交答案