React.createRef() 實際上是如何工作的？

Question

我瀏覽了 React Refs 的 React 文檔，這就是它所說的createRef()

createRef() 接收底層 DOM 元素作為其當前屬性。 當 ref 屬性用於自定義 class 組件時，ref object 接收組件的已安裝實例作為其當前實例。

我對此有一些疑問。 首先看看下面的組件。

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()方法中，我將該React Ref傳遞給img React 元素作為屬性作為ref 。

React Ref 在這里做了什么？

img最終將成為一個 object ，它具有一個名為 ref 的屬性，其值為this.imageRef ，它如何接收img作為它的當前屬性？

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

此外，對於這兩個控制台語句，這是我得到的 output。

因此，在構造函數中，當前屬性是有效的null 。 但是，當我擴展它時，它具有在componentDidMount中打印的img的所有屬性，即還有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作為屬性傳遞，並且在呈現它的 function 中，它分配實際DOM 節點到ref.current 。

Answer 2

因此，為了回答您的第一個問題，React 會將 DOM 元素分配給 ref 的current屬性。 在您的情況下，這意味着this.imageRef.current將在組件渲染后立即成為對圖像元素的引用。

控制台 output 部分讓它有點混亂，但這不是因為 React 做了什么魔法，而是因為瀏覽器控制台如何處理在 object 被記錄后屬性發生變化的對象。 例如，如果您在控制台中運行以下代碼，然后展開 output，您將看到與 ref 相同的行為。

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

這是它的截圖。