react.js - this.refs 和 ReactDOM.findDOMNode 区别是什么?
本文介绍了react.js - this.refs 和 ReactDOM.findDOMNode 区别是什么?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
问 题
根据说明: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>
)
}
}
这篇关于react.js - this.refs 和 ReactDOM.findDOMNode 区别是什么?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文