亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

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

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

翻閱古今 2024-01-18 09:55:13
我瀏覽了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有效的。但是,當我展開它時,它具有ieimg中打印的所有屬性,如何?componentDidMountclinetHeght我不知道,是否對此有簡短的解釋,或者有人必須糾正整頁。如果這個問題太大而無法回答,外部鏈接或參考資料會有所幫助。我對庫實現的細節也不感興趣,只是一個概述就會有所幫助,這樣我就可以React.createRef()放心地或毫無疑問地使用。
查看完整描述

2 回答

?
慕絲7291255

TA貢獻1859條經驗 獲得超6個贊

對于如何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。



查看完整回答
反對 回復 2024-01-18
?
繁花如伊

TA貢獻2012條經驗 獲得超12個贊

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


控制臺輸出部分讓它有點令人困惑,但這并不是由于 React 所做的一些魔法,而是由于瀏覽器控制臺如何處理在記錄對象后屬性發生變化的對象。例如,如果您在控制臺中運行以下代碼,然后展開輸出,您將看到與 ref 中看到的相同行為。


const obj = { current: null }

console.log(obj)

obj.current = 'something'

這是它的樣子的屏幕截圖。

https://img1.sycdn.imooc.com/65a885420001b9a804360224.jpg

查看完整回答
反對 回復 2024-01-18
  • 2 回答
  • 0 關注
  • 154 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號