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

有杯葡萄
  • 284

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

回复
阅读 15.6k
4 个回答
✓ 已被采纳

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

clipboard.png

再看个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>

    )
  }
}

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

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

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

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

你知道吗?

宣传栏