时间戳

首页 > 解决方案 > React.createRef() 实际上是如何工作的？

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

问题描述

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

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

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

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 Refimg作为属性传递给React 元素ref。

React Ref 在这里做了什么？

img最终将成为一个对象，它具有一个名为 ref 和 value 的属性this.imageRef，它如何接收img它的当前属性？

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

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

在此处输入图像描述

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

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

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

标签： javascriptreactjs

解决方案

对于如何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.

推荐阅读