React的哲学是在JS层面构建UI，并把UI组件以功能单位拆分成更小的组件单元，以利于复用和整合，父组件通过props作为操作子组件的唯一通道,甚至子组件想和父组件交互时，也只能依靠父组件通过props传递下来的方法（该方法在父组件内定义，子组件只是拿到它的引用）。在文档中，称这种模式属于dataflow，即把程序分成多个块，每个块相对独立，并有各自的处理逻辑。
在React中，考虑到有些场景通过直接获取元素的引用会更方便简洁，于是提供了Ref这个接口。Ref可以帮我们获取React Element或DOM Element的引用，在文档提到：
When to Use Refs
There are a few good use cases for refs:
- Managing focus, text selection, or media playback. //操作元素的焦点、文本选择和媒体播放
- Triggering imperative animations. //触发必要的动画效果
- Integrating with third-party DOM libraries. //整合进第三方的DOM插件时
可以看出，这些场景都是想获取文档中的某个元素并触发摸个行为。在组件构建起来变得复杂时，可能元素众多，要获取/改变某个特定元素，要么经过几层筛选，要么传递的props变得臃肿，ref就像一个id,提供了简洁的接口和回调机制。
同时，文档也提醒不要滥用ref，推荐只作为一种辅佐手段。
Avoid using refs for anything that can be done declaratively.
For example, instead of exposing open() and close() methods on a Dialog component, pass an isOpen prop to it.
ref使用：
第一个例子，ref将元素的引用存储到组件的一个内部变量中。
1 focus() {
2 // Explicitly focus the text input using the raw DOM API
3 this.textInput.focus();
4 }
5
6 render() {
7 // Use the `ref` callback to store a reference to the text input DOM
8 // element in an instance field (for example, this.textInput).
9 return (
10 <div>
11 <input
12 type="text"
13 ref={(input) => { this.textInput = input; }} />
14 <input
15 type="button"
16 value="Focus the text input"
17 onClick={this.focus}
18 />
19 </div>
20 );
21 }
在line13中，ref作为一个html特性插入到input中，它的值是一个函数。该函数在组件挂载的时候触发，函数的唯一参数是组件本身（也就是这个input元素），函数体内用一个变量this.textInput指向了该input。
在组件从文档中卸载的时候，函数会再次触发，此时参数是null。也即是将this.textInput赋值为null，随后被js的垃圾收集机制清除。
待续...