以前的方式：
在元素上给一个ref的属性，值是字符串，如 ：ref="d1"
访问这个真是的dom元素 ： this.refs.d1
现在推荐的方式，回调
在元素上给一个ref属性，值是回调函数，会把当前dom元素当参数传到回调函数里面。
过程解析：这个节点被渲染的时候，这个回调函数会被调用，会传递一个参数：这个真实的DOM元素，你就可以做任何事情。
ref={elt=>{this.d1=elt}} //将这个DOM挂载到组件实例上
this.d1 //访问这个真实的DOM元素
在父组件上拿到子组件ref
class Sub extends Component{
constructor(props){
super(props)
}
render(){
let {d1} = this.props
return (
<div>
<div ref={d1}>子组件的div</div>
</div>
)
}
}
export default class Refs extends Component{
constructor(props){
super(props)
}
getChildDom=()=>{
console.log(this.d1)
}
render(){
return (
<div>
<Sub d1={elt=>{this.d1=elt}}></Sub>
<div
>会被拿到</div>
<button onClick={this.getChildDom}>getChildDom</button>
</div>
)
}
}
记住一个原则：能不用 ref 就不用。特别是要避免用 ref 来做 React.js 本来就可以帮助你做到的页面自动更新的操作和事件监听。多余的 DOM 操作其实是代码里面的“噪音”，不利于我们理解和维护。
