createRef和ref = {(c)=> this.el = c}有什么区别?
当我输出每个引用时,它具有相同的元素,但不是false。
为什么?
import React from "react"
class Home extends React.Component {
constructor(){
super();
this.el1 = React.createRef();
}
componentDidmount(){
console.log(el1 === el2) // false why false?
}
render(){
return (
<>
<div ref={this.el1}>
<span>A</span>
</div>
<div ref={(c)=> { this.el2 = c }}}>
<span>A</span>
</div>
</>
)
}
答案 0 :(得分:1)
在代码中,两个ref
都指向两个不同的DOM
节点,这就是为什么它们不相同的原因。
createRef
将返回DOM节点或组件的已安装实例,具体取决于调用位置。无论哪种方式,您所拥有的确实确实很简单。但是,如果您想对该参考进行某些操作,该怎么办?如果要在安装组件时执行该操作怎么办?
Ref
回调非常有用,因为它们在componentDidMount和componentDidUpdate之前被调用。这就是您如何对ref进行更细粒度的控制。现在,您不仅要强制性地获取DOM元素,而且要在React生命周期中动态更新DOM,而且可以通过ref API细粒度地访问DOM。