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

前言

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

一、受控组件

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

示例：

受控组件更新state的流程：

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