第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號安全,請及時(shí)綁定郵箱和手機(jī)立即綁定
已解決430363個(gè)問題,去搜搜看,總會(huì)有你想問的

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

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

翻閱古今 2024-01-18 09:55:13
我瀏覽了React Refs 的 React 文檔,這就是它所說的內(nèi)容createRef()createRef() 接收底層 DOM 元素作為其當(dāng)前屬性。當(dāng) ref 屬性用于自定義類組件時(shí), ref 對象接收組件的已安裝實(shí)例作為其 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;因此,在構(gòu)造函數(shù)中,我創(chuàng)建了一個(gè)React Ref,并分配給一個(gè)名為 的屬性imageRef。并且,在該render()方法中,我將該 React Refimg作為屬性傳遞給React 元素ref。React Ref 在這里做什么?img最終將成為一個(gè)對象,該對象具有名為 ref 的屬性,其值為 value this.imageRef,它如何接收img當(dāng)前屬性?如果是這樣的話this.imageRef.current = img(object),那是有可能的。但我不明白上面的方式即ref={this.imageRef}另外,對于這兩個(gè)控制臺(tái)語句,這是我得到的輸出。因此,在構(gòu)造函數(shù)中,當(dāng)前屬性是null有效的。但是,當(dāng)我展開它時(shí),它具有ieimg中打印的所有屬性,如何?componentDidMountclinetHeght我不知道,是否對此有簡短的解釋,或者有人必須糾正整頁。如果這個(gè)問題太大而無法回答,外部鏈接或參考資料會(huì)有所幫助。我對庫實(shí)現(xiàn)的細(xì)節(jié)也不感興趣,只是一個(gè)概述就會(huì)有所幫助,這樣我就可以React.createRef()放心地或毫無疑問地使用。
查看完整描述

2 回答

?
慕絲7291255

TA貢獻(xiàn)1859條經(jīng)驗(yàn) 獲得超6個(gè)贊

對于如何ref分配,您必須記住 JSX 編譯為普通的舊 JavaScript。幕后發(fā)生的事情的一個(gè)非常簡單的例子如下:


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>

所以基本上 - 當(dāng)您使用 時(shí)<img ref={this.imageRef} src={urls.regular} alt={description} />, 會(huì)ref作為屬性傳遞,并且在呈現(xiàn)它的函數(shù)中,它將實(shí)際的 DOM 節(jié)點(diǎn)分配給ref.current



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

TA貢獻(xiàn)2012條經(jīng)驗(yàn) 獲得超12個(gè)贊

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


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


const obj = { current: null }

console.log(obj)

obj.current = 'something'

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

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

查看完整回答
反對 回復(fù) 2024-01-18
  • 2 回答
  • 0 關(guān)注
  • 151 瀏覽
慕課專欄
更多

添加回答

舉報(bào)

0/150
提交
取消
微信客服

購課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

公眾號

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號