React 受控组件与不受控组件的总体定义答案

【问题标题】：React controlled vs uncontrolled components overall definitionReact 受控组件与不受控组件的总体定义
【发布时间】：2019-02-11 07:18:36
【问题描述】：

我已经使用 React 好几个月了，我已经清楚像这样的来源中组件的受控和不受控制的性质

Controlled form inputs
Uncontrolled components

在我偶然发现这篇文章之前，一切都很清楚

Controlled Components

我曾经认为受控与不受控是 React 组件控制状态然后受控，DOM refs 处理然后不受控（使用 refs）

然后文章第三条改变了我的观点，即如果组件具有来自任何 React 组件（Parent 或组件本身）的单一事实来源，则组件会受到控制。好的！这意味着 React 组件从父 props 接收或播种值以在构造函数中映射组件本地状态变得不受控制。

如果您查看第 3 条的两个推荐部分的差异，我可以使 b/w 受控不受控制的唯一差异是这个

state = { email: this.props.defaultEmail }; //uncontrolled

但是这两篇文章是不是让读者对受控组件给出一个清晰的定义感到困惑，或者只是我？

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

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

【问题讨论】：

标签： javascript reactjs

【解决方案1】：

您必须了解的基本区别是：受控组件由 React 自己处理。它们消耗组件的道具和状态。在任何事件调用时，React 都会处理合成事件，例如 onChange、onClick。

在不受控制的组件中，我们请求DOM来处理组件。就像通过使用 ref 添加对组件的引用来要求 DOM 获取输入值一样。我希望这将在这两个组件中做出明确的区分。您可以进一步提出任何问题。

【讨论】：

我知道这一点，我在我的问题中也提到了这一点。您应该真正考虑一下组件是如何变得不受控制的，正如在第 3 条中所做的 state = { email: this.props.defaultEmail }; 之后所解释的那样。它还在 React 中……对吧？

【解决方案2】：

虽然我同意前面的答案，但我会这样说。

通常“本机”反应元素，例如 div 可以被认为是它们的 props 的函数：({ children, ...attributes }) => ...。然而，由于 DOM 的构建方式，其中一些元素需要管理状态。在这种情况下，react 提供了两种方法。

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

【讨论】：