React学习笔记：受控与非受控组件

受控组件：

什么是受控组件呢？
在HTML中，表单元素（input、textarea、select）之类的表单元素通常会自己维护state，并根据用户输入的值进行更新。但是在 React 中一些需要改变的值通常都是放在 state 属性中的，并且规定只能通过 setState() 来改变值进行更新，这样将两者结合起来，使得 React 的 state 成为了“唯一的数据源”，并且渲染表单的 React 组件还控制着用户输入过程中表单发生的操作，被 React 以这种方式控制取值的表单输入元素就叫做**“受控组件”**。一个受控组件中，表单数据是由React组件来管理的。

示例如下图，input组件通过事件监听 handleChange 函数，在函数中改变了 state 属性里的 username，随后将更新后的state里的username通过value设置给input组件，这种就叫做受控组件。

非受控组件：

非受控组件指的是表单数据交由DOM节点来处理。在React中要使用非受控组件来处理表单的数据，那么就需要使用到 ref 来从DOM节点中获取表单的数据。