React与DOM

React将React涉及DOM操作的部分剥离开，目的是为了抽象React,同时使用于Web端和移动端。ReactDOM的关注点在DOM上，因此只适用于Web端。

在React组件的开发实现中，我们并不会用到ReactDOM,只有在顶层组件以及由于React模型所限而不得不操作DOM的时候，才会使用它。

1.ReactDOM

ReactDOM中的API非常少，只有findDOMNode，unmountComponentAtNode和render.

1.findDOMNode

React提供的可以获取DOM的方法之一就是findDOMNode，当组件被渲染到DOM中后，findDOMNode返回该React组件实例相应的DOM节点。它可以用于获取表单的value以及用于DOM的测量。例如，假设要在当前组件加载完时获取当前DOM，则可以使用findDOMNode：

import React,{ Component } from 'React';
import ReactDOM from 'react-dom';

class App extends Component {
    componentDidMount() {
        const dom = ReactDOM.findDOMNode(this);
    }
    render() {}
}

如果在render中返回null,那么findDOMNode也返回null.findDOMNode只对已经挂载的组件有效。

2.render

为什么说只有在顶层组件我们才不得不使用ReactDOM呢，这是因为要把React渲染的VirtualDOM渲染到浏览器的DOM当中，就要使用render方法了。

ReactComponent render() {
    ReactElement element,
    DOMElement container,
    [function callback]
}

该方法把元素挂载到container中，并且返回element的实例（即refs引用）。当然，如果时无状态组件，render会返回null.当组件装载完毕时,callback就会被调用

当组件在初次渲染之后再次更新时，React不会把整个组件重新渲染一次，而会用它高效的DOM diff算法做局部的更新。

2.ReactDOM的不稳定方法

ReactDOM中有两个不稳定方法，其中一个方法与render方法颇为相似，unstable_renderSubtreeIntoContainer.它的作用很简单，就是更新组件到传入的DOM节点上，它和render的区别在于是否传入父节点。

3.refs

刚才我们已经详述了ReactDOM的render方法，比如我们渲染了一个App组件到root节点

const myAppInstance = ReactDOM.render(<App />, document.getElementById('root'));

refs是React组件中非常特殊的prop,可以附加到任何一个组件上。从字面意思来看，refs即reference,组件被调用时会创建一个该组件的实例，而refs就会指向这个实例。

import React,{ Component } from 'React';

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

        this.handleClick = this.handleClick.bind(this);    
    }
    handleClick() {
        if(this.myTextInput !== null){
            this.myTextInput.focus();
        }    
    }
    render() {
        return (
            <div>
                <input type="text" ref={(ref) => this.myTextInput = ref} />
                <input type="button" value="Focus the text input" 
                onClick={this.handleClick} />
            </div>
        );
    }
}

refs同样支持字符串。对于DOM操作，不仅可以使用findModule获得该组件DOM，还可以使用refs获得组件内部的DOM。

import React, { componnet } from 'React';
import ReactDOM from 'react-dom';

class App extends Componnet {
    componentDidMount() {
        const myComp = this.refs.myComp;
        const dom = React.findDOMNode(myComp);  
    }
    render() {
        return (
           <div>
                <Comp ref="myComp" />
            </div>
        );
    }
}

要获取一个React组件的引用，既可以使用this来获取当前的React组件，也可以使用refs来获取你拥有的子组件的引用