react中使用ref属性

react提供ref属性，主要是为了对组件真正实例的引用，其实是ReactDOM.render()返回的组件实例；需要区分一下，ReactDOM.render()渲染组件时返回的是组件实例；而渲染dom元素时，返回是具体的dom节点。

挂载到组件(有状态组件)上的ref，表示对组件实例的引用；而挂载到dom元素上的ref，表示对具体的dom元素节点的引用。

ref的值可以设置为字符串，也可以设置为回调函数。

但是字符串的方式不推荐使用，或者在未来的react版本中不会再支持该方式，推荐使用回调函数的形式。

这个函数的执行时机是：

    1. 组件被挂载后，回调函数会立即执行，回调函数的参数为该组件的具体实例；

    2. 组件卸载或者原来的ref属性本身发生变化的时候，回调函数也会被立即执行，此时回调函数参数为null，以确保内存不泄漏。

---

class AudioPlay extends React.Component {

      constructor() {

            super();

            this.timeline = null;

            this.playhead = null;

            this.state = {......};

       }

        ......

        render () {

                return(

                   ...

                    <div ref={node => (this.timeline = node)} />

                    <div ref={node => (this.playhead = node)} />

                    ...

                )

        }

}

---

此段代码中，ref的回调函数中，参数node为div这个dom，渲染完毕后，这个实例将被保存在组件的this.timeline和this.playhead中，使用的时候可以直接使用this.timeline和this.playhead进行一些列操作。