React中的每个组件都是一个状况机，通常状况下，我们经由过程设置组件的状况就能够完成UI的更新，然则在某些状况下确切须要直接操纵DOM。

React中操纵DOM的要领：

• Refs
• findDOMNode()

findDOMNode()

当组件加载到页面上以后（mounted），你就能够经由过程 getDOMNode() 要领拿到组件对应的 DOM 元素。

React.findDOMNode()只在mounted组件中挪用，mounted组件就是已渲染在浏览器DOM构造中的组件。假如你在组件的render()要领中挪用React.findDOMNode()就会抛出非常。

Refs

经由过程在要援用的 DOM 元素上面设置一个 ref 属性指定一个称号，然后经由过程 this.refs.name 来访问对应的 DOM 元素。

比方有一种状况是必需直接操纵 DOM 来完成的，你愿望一个 <input/>元素在你清空它的值时 focus，你没法仅仅靠 state 来完成这个功用。

class App extends Component {
  constructor() {
    return { userInput: '' };
  }

  handleChange(e) {
    this.setState({ userInput: e.target.value });
  }

  clearAndFocusInput() {
    this.setState({ userInput: '' }, () => {
      this.refs.theInput.focus();
    });
  }

  render() {
    return (
      <div>
        <div onClick={this.clearAndFocusInput.bind(this)}>
          Click to Focus and Reset
        </div>
        <input
          ref="theInput"
          value={this.state.userInput}
          onChange={this.handleChange.bind(this)}
        />
      </div>
    );
  }
}

假如ref 是设置在原生 HTML 元素上，它拿到的就是 DOM 元素，假如设置在自定义组件上，它拿到的就是组件实例，这时刻就须要经由过程 findDOMNode来拿到组件的 DOM 元素。

由于无状况组件没有实例，所以
ref 不能设置在无状况组件上，一般来说这没什么题目，由于无状况组件没有实例要领，不须要
ref 去拿实例挪用相干的要领，然则假如想要拿无状况组件的
DOM 元素的时刻，就须要用一个状况组件封装一层，然后经由过程
ref 和
findDOMNode 去猎取。