为什么行为不同？

Question

createRef 和 ref={(c) => this.el = c} 有什么区别？

当我输出每个 ref 都有相同的元素但它不是假的。

为什么？

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 .

为什么行为不同？

Why behavior is different?

javascript

reactjs

use-ref

create-ref