几个月以来我一直在使用React,而且我很清楚这种来源的组件的受控和不受控制性质
Controlled form inputs
Uncontrolled components
一切都很清楚,直到我偶然发现了这篇文章
我曾经认为受控与不受控制是React组件控制状态然后受控,而DOM refs处理然后是不受控制的(使用refs)
接下来的第三篇文章改变了我的观点,即如果组件具有任何React组件(Parent或组件本身)的单一事实来源,则可以控制它们。好的!这意味着React组件从父属性接收或播种值以映射构造函数中的组件局部状态变得无法控制。
如果您看一下第3条的两个推荐部分的差异,那么我可以使黑白控制不受控制的唯一差异就是这个
state = { email: this.props.defaultEmail }; //uncontrolled
但这两个文章是否使读者难以清楚地定义受控组件,还是仅仅是我?
我现在不确定我是否真的知道如何解释不受控制的组件。
或者这只是一个宽松的术语?
答案 0 :(得分:0)
您必须了解的基本区别是:受控组件由React本身处理。它们消耗道具和组件的状态。在任何事件调用后,React都会处理合成事件,例如onChange
,onClick
。
在不受控制的组件中,我们请求 DOM 处理该组件。就像要求DOM通过使用 ref 向组件添加引用来获取输入值。我希望这将在两个组成部分之间有明显的区别。您可以进一步提问。
答案 1 :(得分:0)
虽然我同意前面的答案,但我会这样说。
通常,可以将诸如div
之类的“本地”反应元素视为其道具({ children, ...attributes }) => ...
的函数。但是,由于DOM的构建方式,其中某些元素需要管理状态。在这种情况下,react提供了两种方法。
要么提供默认值,要么拥有uncontrolled
组件。然后,您可以将其视为功能({ children, ...attributes }, internalComponentState) => ...
或使用controlled
版本。然后,您可以恢复到先前的模型,但是状态不会消失,而必须将其提升到组件生命周期中(这可能并不容易)。