this.refs 和 ReactDOM.findDOMNode 区别是什么？

Question

根据说明：this.refs 获得的是虚拟DOM，而ReactDOM.findDOMNode 获得的是实际DOM。
但是我测试代码的时候发现，两个是等效的，都可以直接操作并在页面呈现。请问这个是官方文档的错误吗？

Answer 1

先看ref，第一点就有问题，官方文档说的很清楚，ref添加到Compoennt上获取的是Compoennt实例，添加到原生HTML上获取的是DOM

再看个demo

class Child extends React.Component {
  render() {
    return <p>child</p>
  }
}

class App extends React.Component {
  render() {
    return (
      <div>
        <div ref="div">app</div>
        <Child ref="child"/>
        <button onClick={()=> {
          console.log(this.refs)
        }}>log refs
        </button>
      </div>

    )
  }
}

新版本的React已经不推荐我们使用ref string转而使用ref callback

class App extends React.Component {
  render() {
    return (
      <div>
        <div ref={div => {
          this._div = div
        }}>app
        </div>
        <Child ref={child => this._child = child}/>
        <button onClick={()=> {
          console.log(this._div);
          console.log(this._child);
        }}>log refs
        </button>
      </div>

    )
  }
}

在说ReactDOM.findDOMNode，当参数是DOM，返回值就是该DOM（这个没啥卵用）；当参数是Component获取的是该Component render方法中的DOM

class App extends React.Component {
  render() {
    return (
      <div>
        <div ref={div => {
          this._div = div
        }}>app
        </div>
        <Child ref={child => this._child = child}/>
        <button onClick={()=> {
          console.log(ReactDOM.findDOMNode(this._div) === this._div);
          console.log(ReactDOM.findDOMNode(this._child));
        }}>log refs
        </button>
      </div>

    )
  }
}

Answer 2

对于属性的支持程度不一样；

refs可以拿子子组件的props/state/方法；

findDOMNOde拿到的是原生的标签相关属性；

Answer 3

我觉得区别应该是this.refs从组件内部获取组件内部的DOM，ReactDOM.findDOMNode从组件外获取组件渲染的DOM。

Answer 4

正好新写的文章里有说到这一块 https://segmentfault.com/a/11...，findDOMNode 目前其实已经不推荐使用了。