react中的受控组件与不受控组件

前言

React是一个流行的构建用户界面的JavaScript库，用于构建Web应用程序。React中有两种类型的组件，受控组件和非受控组件。在本文中，我们将深入研究这两种组件的区别，优缺点以及如何选择适当的组件类型。

一、受控组件

在HTML中，表单元素的标签：<input>、<textarea>、<select>等元素标签的值改变通常是根据用户输入来进行更新。
在React中，可变状态通常保存在组件的状态属性中，并且只能使用 setState() 进行更新，而呈现表单的React组件也控制着在后续用户输入时该表单中发生的情况，以这种由React控制的输入表单元素而改变其值的方式，称为受控组件。

示例：

受控组件更新state的流程：

1. 先通过初始state声明数据通过value属性来绑定为表单的默认值
2. 每当表单值发生变化的时候，调用onChange事件处理器
3. 事件处理器通过事件对象event拿到改变后的状态，并更新组件的state
4. 一旦setState方法更新state，就会重新渲染视图，完成表单组件的更新

二、非受控组件

非受控组件是一种不由React状态控制的组件，表单数据由DOM本身处理。即不受setState()的控制，与传统的HTML表单输入相似，input输入值即显示最新值。
在非受控组件中，可以使用一个ref来从DOM获得表单值。

示例：

步骤：

1. 通过Reac.createRef()创建一个ref实例绑定到输入框的ref上；
2. 通过ref.current.value获取输入框的值进行数据组装提交到后台；

非受控组件在底层实现时是在其内部维护了自己的状态state，这样表现出用户输入任何值都能反应到元素上。

三、受控组件与非受控组件区别

React受控组件和非受控组件之间的最大区别是组件的值是由React状态控制还是由DOM节点控制。

受控组件：

受控组件依赖于状态
受控组件只有继承React.Component才会有状态
受控组件必须要在表单上使用onChange事件来绑定对应的事件
受控组件的修改会实时映射到状态值上，此时可以对输入的内容进行校验

非受控组件：

非受控组件不受状态的控制
非受控组件获取数据就是相当于操作DOM，而不会更新React状态
非受控组件可以很容易和第三方组件结合，更容易同时集成 React 和非 React 代码

四、受控组件与非受控组件的应用场景

1、受控组件使用场景：

①. 当需要对组件的值进行验证和处理时。例如，当您需要确保文本框的值仅包含数字时，您可以使用受控组件来验证文本框的值，并更新React状态以反映验证结果。

②.当需要确保组件的值与应用程序的状态同步时。例如，当您需要确保文本框的值与应用程序的状态同步时，您可以使用受控组件来更新React状态，并确保组件的值与应用程序的状态同步。

2、非受控组件使用场景：

①.当需要高速更新组件的值时。例如，当您需要实现实时搜索框时，您可以使用非受控组件来快速更新文本框的值，并更新搜索结果。

②.当组件的值不需要与应用程序的状态同步时。例如，当您需要实现一个单选按钮组时，您可以使用非受控组件来更新单选按钮的值，并且不需要将其与应用程序的状态同步。

五、受控组件与非受控组件优缺点

受控组件

优点

• 容易进行验证和处理：由于组件的值由React状态控制，就可以轻松地验证和处理组件的值。例如，可以使用onChange事件验证组件的值是否满足特定的条件，更新React状态反映验证结果。
• 有更好的可预测性：由于组件的值由React状态控制，因此组件的行为更容易预测。例如，当组件的值发生变化时，它将始终更新React状态并重新渲染，这使得应用程序更加可预测。

缺点

• 更多的代码：由于组件的值由React状态控制，因此需要编写更多的代码来管理组件的值。这可能会导致代码更难以维护和理解。
• 性能问题：由于每次组件的值发生变化时，它都会更新React状态并重新渲染，这可能会影响性能。如果您在处理大量数据时使用受控组件，则可能会遇到性能问题。

非受控组件

优点

• 更快的更新：由于组件的值由DOM节点控制，因此非受控组件可以更快地更新。这使得非受控组件适用于需要高速更新的场景，例如实时搜索框。
• 更少的代码：由于组件的值不由React状态控制，因此需要编写更少的代码来管理组件的值。这使得代码更易于维护和理解。

缺点

• 难以进行验证和处理：因为组件的值不由React状态控制，难以对其进行验证和处理。
• 更少的可预测性：组件的值由DOM节点控制，因此组件的行为更难以预测。例如，当组件的值发生变化时，它不会更新React状态并重新渲染，这可能会导致应用程序的行为更加不可预测。