首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >React受控组件与非受控组件的总体定义

React受控组件与非受控组件的总体定义
EN

Stack Overflow用户
提问于 2018-09-06 13:28:31
回答 2查看 1.8K关注 0票数 1

我使用React已经有好几个月了,我很清楚像这样来源的组件的受控和非受控性质

Controlled form inputs

Uncontrolled components

一切都很清楚,直到我偶然发现了这篇文章

Controlled Components

我过去常常认为受控与非受控是控制状态的React组件,然后是受控的,DOM引用处理,然后是非受控的(使用引用)

然后,第三篇文章改变了我的观点,如果组件有来自任何React组件(父组件或组件本身)的单一来源,则这些组件是受控制的。好吧,好吧!这意味着React组件从父props接收或播种值以映射构造函数中的组件本地状态变得不受控制。

如果你看一下文章3的两个推荐的比较部分,我能使b/w控制的唯一的区别就是这个。

代码语言:javascript
复制
state = { email: this.props.defaultEmail }; //uncontrolled

但是,这两篇文章是不是让读者感到困惑,无法给出一个清晰的受控组件定义,还是只有我一个人觉得困惑?

我现在不确定我是否真的知道如何解释非受控组件。

或者这只是一个松散的术语?

EN

回答 2

Stack Overflow用户

发布于 2018-09-06 13:54:45

您必须了解的基本区别是:控制的组件是由React本身处理的。它们使用组件的属性和状态。在任何事件调用时,React都会处理onChangeonClick等合成事件。

而在非受控组件中,我们请求DOM来处理组件。比如要求DOM通过使用引用添加对组件的引用来获取输入值。我希望这将在这两个部分中有一个明确的区别。您可以进一步提出任何问题。

票数 6
EN

Stack Overflow用户

发布于 2018-09-06 20:08:01

虽然我同意前面的答案,但我会这样表达它。

通常,诸如div之类的“本地”react元素可以被认为是它们的道具:({ children, ...attributes }) => ...的函数。但是,由于DOM的构建方式,其中一些元素需要管理状态。在这种情况下,react提供了两种方法。

要么你提供一个默认值,你就有了uncontrolled组件。然后,您可以将其视为一个函数({ children, ...attributes }, internalComponentState) => ...,或者使用controlled版本。然后,您可以恢复到以前的模型,但状态不会消失,而是必须提升到您的组件生命周期中(这可能并不容易)。

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/52197080

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档