React.createRef() 实际上是如何工作的？

Question

我浏览了 React Refs 的 React 文档，这就是它所说的createRef()

createRef() 接收底层 DOM 元素作为其当前属性。当 ref 属性用于自定义类组件时， ref 对象接收组件的已安装实例作为其当前 .

我对此有一些疑问。首先看看下面的组件。

import React, { Component } from "react";

class ImageCard extends Component {
  constructor(props) {
    super(props);
    this.imageRef = React.createRef();
    console.log("Called in constructor", this.imageRef);
  }

  componentDidMount() {
    console.log("Called when component did mount ", this.imageRef);
  }

  render() {
    const { description, urls } = this.props.image;
    return (
      <div>
        <img ref={this.imageRef} src={urls.regular} alt={description} />
      </div>
    );
  }
}

export default ImageCard;

因此，在构造函数中，我创建了一个React Ref，并分配给了一个名为imageRef. 并且，在render()方法中，我通过了 阵营价到img阵营元件作为作为一个属性ref。

React Ref 在这里做什么？

img最终会成为一个对象，它有一个名为 ref 的属性this.imageRef，它的值是如何接收img的？

如果它是这样的this.imageRef.current = img(object)，它可能是。但我不明白上述方式即ref={this.imageRef}

此外，对于这两个控制台语句，这是我得到的输出。

因此，在构造函数中当前属性null是有效的。但是，当我展开它时，它具有img打印的所有属性，componentDidMount即clinetHeght 如何？

我不知道，如果对此有简短的解释，或者有人必须纠正整页。如果这太大而无法回答，外部链接或参考资料会有所帮助。

我也对库实现的细节不感兴趣，只是概述会有所帮助，这样我就可以React.createRef()放心或毫无疑问地使用。

Answer 1

对于如何ref分配，您必须记住 JSX 编译成普通的旧 javascript。关于幕后发生的事情的一个非常简单的例子是这样的：

function createRef(initialValue) {
    return {
        current: initialValue
    }
}

const root = document.getElementById('root');

function render(elementType, innerText, ref) {
    const el = document.createElement(elementType);
    if (ref) {
        ref.current = el;
    }
    el.innerText = innerText;
    root.replaceChildren(el);
}

const ref = createRef(null);
console.log(ref);
render('div', 'Hello World', ref);
console.log(ref);
    

<div id="root"></div>

所以基本上 - 当您使用 时<img ref={this.imageRef} src={urls.regular} alt={description} />， 将ref作为属性传递，并且在呈现它的函数中，它将实际的 DOM 节点分配给ref.current.

Answer 2

因此，为了回答你的第一个问题，React 会将 DOM 元素分配给currentref 的属性。在您的情况下，这意味着this.imageRef.current组件渲染后它将成为对图像元素的引用。

控制台输出部分让它有点令人困惑，但这并不是由于 React 所做的一些魔法，而是由于浏览器控制台如何处理在记录对象后属性发生变化的对象。例如，如果您在控制台中运行以下代码，然后展开输出，您将看到与 ref 中看到的相同行为。

const obj = { current: null }
console.log(obj)
obj.current = 'something'

这是它的样子的屏幕截图。