第六节：受控组件 、portals、fragment、严格模式
一. 受控组件
## 1. 受控组件
(1) 在 HTML 中，表单元素（如<input>、 <textarea> 和 <select>）之类的表单元素通常自己维护 state，并根据用户输入进行更新。
(2) 而在 React 中，可变状态（mutable state）通常保存在组件的 state 属性中，并且只能通过使用 setState()来更新。
我们将两者结合起来，使React的state成为 "唯一数据源"；
渲染表单的 React 组件还控制着用户输入过程中表单发生的操作；
被 React 以这种方式控制取值的表单输入元素就叫做“受控组件”；
(3) 由于在表单元素上设置了 value 属性，因此显示的值将始终为 this.state.value，这使得 React 的 state 成为唯一数据源。
(4) 由于 handleUsernameChange 在每次按键时都会执行并更新 React 的 state，因此显示的值将随着用户输入而更新。
## 2. 非受控组件
(1) React推荐大多数情况下使用 受控组件 来处理表单数据：
一个受控组件中，表单数据是由 React 组件来管理的；
另一种替代方案是使用非受控组件，这时表单数据将交由 DOM 节点来处理；
(2) 如果要使用非受控组件中的数据，那么我们需要使用 ref 来从DOM节点中获取表单数据。
我们来进行一个简单的演练： 使用ref来获取input元素；◼ 在非受控组件中通常使用defaultValue来设置默认值；
(3)同样，<input type="checkbox"> 和 <input type="radio"> 支持 defaultChecked，<select> 和 <textarea> 支持 defaultValue。
二. portals
三. fragment
四. 严格模式
!
- 作 者 : Yaopengfei(姚鹏飞)
- 博客地址 :
- 声 明1 : 如有错误，欢迎讨论，请勿谩骂^_^。
- 声 明2 : 原创博客请在转载时保留原文链接或在文章开头加上本人博客地址，否则保留追究法律责任的权利。