Question

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>
    </>
  )
}

Answer 1

在代码中，两个ref都指向两个不同的DOM节点，这就是为什么它们不相同的原因。

createRef将返回DOM节点或组件的已安装实例，具体取决于调用位置。无论哪种方式，您所拥有的确实确实很简单。但是，如果您想对该参考进行某些操作，该怎么办？如果要在安装组件时执行该操作怎么办？

Ref回调非常有用，因为它们在componentDidMount和componentDidUpdate之前被调用。这就是您如何对ref进行更细粒度的控制。现在，您不仅要强制性地获取DOM元素，而且要在React生命周期中动态更新DOM，而且可以通过ref API细粒度地访问DOM。

为什么行为不同？

1 个答案: