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