6-refs 拿到真实的 dom 元素

以前的方式：

在元素上给一个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 操作其实是代码里面的“噪音”，不利于我们理解和维护。