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

Z时代
2024-01-10
分类：技术分享

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

回答

先看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>
    )
  }}