一. refs的使用
在React的开发模式中，通常情况下不需要、也不建议直接操作DOM原生，但是某些特殊的情况，确实需要获取到DOM进行某些操作：
- 管理焦点，文本选择或媒体播放。
- 触发强制动画。
- 集成第三方 DOM 库。
1.1. 创建ref的方式
如何创建refs来获取对应的DOM呢？目前有三种方式：
- 方式一：传入字符串
-
- 使用时通过 this.refs.传入的字符串格式获取对应的元素；
- 方式二：传入一个对象
-
- 对象是通过 React.createRef() 方式创建出来的；
- 使用时获取到创建的对象其中有一个current属性就是对应的元素；
- 方式三：传入一个函数
-
- 该函数会在DOM被挂载时进行回调，这个函数会传入一个 元素对象，我们可以自己保存；
- 使用时，直接拿到之前保存的元素对象即可；
1.2. ref节点的类型
ref 的值根据节点的类型而有所不同：
- 当 ref 属性用于 HTML 元素时，构造函数中使用 React.createRef() 创建的 ref 接收底层 DOM 元素作为其 current 属性；
- 当 ref 属性用于自定义 class 组件时，ref 对象接收组件的挂载实例作为其 current 属性；
- 你不能在函数组件上使用 ref 属性，因为他们没有实例；
二. 受控组件
2.1. 认识受控组件
2.1.1. 默认提交表单方式
在React中，HTML表单的处理方式和普通的DOM元素不太一样：表单元素通常会保存在一些内部的state。
- 这个处理方式是DOM默认处理HTML表单的行为，在用户点击提交时会提交到某个服务器中，并且刷新页面；
- 在React中，并没有禁止这个行为，它依然是有效的；
- 但是通常情况下会使用JavaScript函数来方便的处理表单提交，同时还可以访问用户填写的表单数据；
- 实现这种效果的标准方式是使用“受控组件”；
2.1.2. 受控组件提交表单
在 HTML 中，表单元素（如、 和 ）之类的表单元素通常自己维护 state，并根据用户输入进行更新。
而在 React 中，可变状态（mutable state）通常保存在组件的 state 属性中，并且只能通过使用 setState()来更新。
- 我们将两者结合起来，使React的state成为“唯一数据源”；
- 渲染表单的 React 组件还控制着用户输入过程中表单发生的操作；
- 被 React 以这种方式控制取值的表单输入元素就叫做“受控组件”；
由于在表单元素上设置了 value 属性，因此显示的值将始终为 this.state.value，这使得 React 的 state 成为唯一数据源。
由于 handleUsernameChange 在每次按键时都会执行并更新 React 的 state，因此显示的值将随着用户输入而更新。
2.2. 常见表单的处理
刚才我们演示的是一个input表单的处理，这里我们再演示一下其他的情况。
textarea标签
texteare标签和input比较相似：e.targer.value
select标签
select标签的使用也非常简单，只是它不需要通过selected属性来控制哪一个被选中，它可以匹配state的value来选中 e.targer.value
三. 非受控组件
React推荐大多数情况下使用 受控组件 来处理表单数据：
- 一个受控组件中，表单数据是由 React 组件来管理的；
- 另一种替代方案是使用非受控组件，这时表单数据将交由 DOM 节点来处理；
如果要使用非受控组件中的数据，那么我们需要使用 ref 来从DOM节点中获取表单数据。
我们来进行一个简单的演练：
- 使用ref来获取input元素；
- 在非受控组件中通常使用defaultValue来设置默认值；
this.usernameRef = createRef();
<inputdefaultValue="username"type="text"name="username"ref={this.usernameRef}/>
this.usernameRef.current.value
