受控组件

官网中对受控组件定义如下。

在 HTML 中，表单元素（如<input>、 <textarea> 和 <select>）之类的表单元素通常自己维护 state，并根据用户输入进行更新。而在 React 中，可变状态（mutable state）通常保存在组件的 state 属性中，并且只能通过使用 setState()来更新。我们可以把两者结合起来，使 React 的 state 成为“唯一数据源”。渲染表单的 React 组件还控制着用户输入过程中表单发生的操作。被 React 以这种方式控制取值的表单输入元素就叫做“受控组件”。
对于受控组件来说，每个 state 突变都有一个相关的处理函数。这使得修改或验证用户输入变得简单。

下面代码中我们要实现在form表单提交时获取到input输入框中的内容。同时把输入框中的字母转为大写。
按照文档说明，表单元素<input>我们使用onChange事件来维护，在每一次输入框改变时，都会更新state。

    constructor() {
        super();
        this.state= {
            name : '',
        }
    }
    handleChange (event) {
        this.setState({
            name : event.target.value.toUpperCase()
        });
    }
    handleSubmit (event) {
        alert("输入框值:" + this.state.name);
        event.preventDefault();
    }
    render () {
        return (
            <form onSubmit={this.handleSubmit.bind(this)}>
                <label>
                    名字:
                    <input type="text" name="name" value={this.state.name} onChange={this.handleChange.bind(this)}/>
                </label>
                <input type="submit" value="提交" />
            </form>
        )
    }

非受控组件

---

在大多数情况下，我们推荐使用 受控组件 来处理表单数据。在一个受控组件中，表单数据是由 React 组件来管理的。另一种替代方案是使用非受控组件，这时表单数据将交由 DOM 节点来处理。
要编写一个非受控组件，而不是为每个状态更新都编写数据处理函数，你可以 使用 ref 来从 DOM 节点中获取表单数据

Ref & DOM

---

和angular一样，React不推荐使用再直接操作dom，万不得已的情况下操作dom，react提供了ref的方式来处理dom。在高级指引中有一节专门介绍了用法。

Refs 提供了一种方式，允许我们访问 DOM 节点或在 render 方法中创建的 React 元素。

应用场景较少，简单了解下。不得不用的时候再参考使用手册即可。