[React] 组件对应的DOM对象

React组件内部的各生命周期方法，this指向的是当前组件的实例。

class Page extends Component {
    constructor(props){
        super(props);

        console.assert(this instanceof Page);
    }

    render() {
        console.assert(this instanceof Page);

        return (
            <span>hello world</span>
        );
    }
}

在某些情况下，需要引用组件相对应的DOM对象，这时候可以使用ref属性。

class Page extends Component {
    constructor(props) {
        super(props);
    }

    componentDidMount() {
        alert(this._dom);  //[object HTMLSpanElement]
    }

    render() {
        return (
            <span ref={span => this._dom = span}>hello world</span>
        );
    }
}

组件被挂载后，ref属性中的回调函数会立即执行，回调函数的参数就是DOM对象。
其中，this指向组件对象，我们在回调函数中，将DOM对象赋值到了组件对象的某个属性中（例如：_dom属性），
这样，我们在componentDidMount生命周期函数中，就可以通过组件的这个属性（例如：_dom属性）来访问DOM对象了。

---

注：
（1）ref的属性值可以不是回调函数，而是一个字符串，用来表示组件的名字，
React会在组件挂载后，把该组件对象放到this.refs的同名属性中，
然后再用ReactDOM.findDOMNode，就可以得到该组件对应的DOM对象了。

class Page extends Component {
    componentDidMount(){
        let mySpan=this.refs['mySpan']，
            mySpanDOM =ReactDOM.findDOMNode(mySpan);

        alert(mySpanDOM);  //[object HTMLSpanElement]
    }

    render() {
        return (
            <span ref="mySpan"></span>
        );
    }
}

（2）ReactDOM.findDOMNode在组件挂载后才可以使用，在constructor中使用会报错。

Uncaught Error: findDOMNode was called on an unmounted component.

---

参考

React: Refs and the DOM
深入React技术栈 - P38~P39