二維碼
        企資網(wǎng)

        掃一掃關(guān)注

        當(dāng)前位置: 首頁 » 企資快報(bào) » 品牌 » 正文

        你對_ReactDOM.render(_...

        放大字體  縮小字體 發(fā)布日期:2022-12-06 15:36:00    作者:付芳華    瀏覽次數(shù):68
        導(dǎo)讀

        | 慕課網(wǎng)精英講師 上古鵬感謝首次自「慕課網(wǎng)」,想了解更多IT干貨內(nèi)容,程序員圈內(nèi)熱聞,歡迎!ReactDOM.render函數(shù)是整個 React 應(yīng)用程序首次渲染得入口函數(shù),你對它了解多少呢?本

        | 慕課網(wǎng)精英講師 上古鵬

        感謝首次自「慕課網(wǎng)」,想了解更多IT干貨內(nèi)容,程序員圈內(nèi)熱聞,歡迎!

        ReactDOM.render函數(shù)是整個 React 應(yīng)用程序首次渲染得入口函數(shù),你對它了解多少呢?本節(jié)主要介紹 ReactDOM 對象有哪些屬性與方法,ReactDOM.render函數(shù)在得三個重要參數(shù)分別是什么,以及函數(shù)返回值是什么。

        ReactDOM 對象

        // 源碼位置:packages/react-dom/src/client/ReactDOM.js

        const ReactDOM = {

        findDOMNode: function(...) { ... },

        hydrate: function(...) { ... },

        render: function (element, container, callback) {

        // 會先檢驗(yàn)container是否有效,無效則停止執(zhí)行且拋出錯誤

        // ...

        return legacyRenderSubtreeIntoContainer(null, element, container, false, callback);

        },

        unstable_renderSubtreeIntoContainer: function(...) {},

        unmountComponentAtNode: function(...) {}

        // ...

        }

        代碼示例 1.2.1 ReactDOM 對象得定義

        ReactDOM 對象上面有findDOMNode、hydrate和render等多個函數(shù)。其中ReactDOM.render函數(shù)有三個參數(shù)和一個返回值。下面內(nèi)容將會對這三個參數(shù)和返回值進(jìn)行詳細(xì)說明。

        理解 ReactDOM.render 函數(shù)得三個參數(shù)

        ReactDOM.render( ... )得基本用法見代碼示例 1.2.2。

        import React from 'react';

        import ReactDOM from 'react-dom';

        import UpdateCounter from './pages/UpdateCounter';

        ReactDOM.render(<UpdateCounter name="Taylor" />, document.getElementById('root'));

        代碼示例 1.2.2 ReactDOM.render 函數(shù)得使用

        在代碼示例 1.2.1 中,傳入ReactDOM.render函數(shù)得兩個參數(shù)分別是<UpdateCounter name="Taylor" />和document.getElementById('root')。第二個參數(shù)很明顯是 DOM 元素,也就是 React 應(yīng)用程序最終渲染在頁面中得容器。那么,我們該如何理解第壹個參數(shù)呢?

        UpdateCounter是由 class 聲明得一個「類」,它在 React 中被稱為組件( component )。React 提供了 JSX 語法,基于 JSX 語法在函數(shù)或者「類」得兩側(cè)分別加上<和/>就變成了元素( element )。因此,<UpdateCounter name="Taylor" />就是一個 React 元素。在第二章中會詳細(xì)介紹 React 組件和 React 元素。

        第三個參數(shù)是應(yīng)用程序渲染完成后得回調(diào)函數(shù),這個參數(shù)是可選項(xiàng),React 會在應(yīng)用程序渲染完成后檢查是否有回調(diào)函數(shù),如果有則調(diào)用該回調(diào)函數(shù)。

        ReactDOM.render函數(shù)除了執(zhí)行渲染任務(wù)外還有自己得返回值即legacyRenderSubtreeIntoContainer函數(shù)得執(zhí)行結(jié)果。那么,legacyRenderSubtreeIntoContainer函數(shù)得執(zhí)行結(jié)果是什么呢?

        ReactDOM.render 函數(shù)得返回值

        在 React 源碼中,legacyRenderSubtreeIntoContainer函數(shù)內(nèi)部通過return得形式又嵌套了多層函數(shù)。為了方便看到ReactDOM.render函數(shù)最終得返回值,使用console.log(...)將函數(shù)執(zhí)行結(jié)果輸出,見代碼示例 1.2.3。

        console.log('返回值',

        ReactDOM.render(

        <UpdateCounter name="Taylor" />, document.getElementById('root'), () => {console.log('渲染完成')}

        )

        );

        // 輸出結(jié)果

        UpdateCounter: {

        context: {},

        handleClick: ? (),

        props: {name: "Taylor"},

        refs: {},

        state: {count: 0, text: "計(jì)數(shù)"},

        // 更新觸發(fā)器

        updater: {isMounted: ?, enqueueSetState: ?, enqueueReplaceState: ?, enqueueForceUpdate: ?},

        // 存儲了首次渲染完成后對應(yīng)得Fiber結(jié)點(diǎn)信息

        _reactInternalFiber: FiberNode {tag: 1, key: null, stateNode: UpdateCounter, elementType: …},

        _reactInternalInstance: {_processChildContext: ?},

        isMounted: (...),

        replaceState: (...),

        // 繼承于React.Component

        __proto__: Component,

        }

        代碼示例 1.2.3 ReactDOM.render 函數(shù)執(zhí)行后得返回值

        ReactDOM.render函數(shù)得返回值是當(dāng)前應(yīng)用程序根組件得實(shí)例。組件實(shí)例是 React 應(yīng)用程序運(yùn)行時在內(nèi)存中得一種臨時狀態(tài),組件實(shí)例得屬性包括了自身類定義得屬性以及繼承于React.Component得屬性。在UpdateCounter 實(shí)例中,state和handleClick為自身類得屬性,而context,props和updater等則繼承于React.Component。

        小結(jié)

        本章主要介紹了在研究 React 內(nèi)部運(yùn)行機(jī)制方面得一些思路與切入點(diǎn)以及 React 應(yīng)用程序得首次渲染入口—ReactDOM.render函數(shù)。

        歡迎「慕課網(wǎng)」,發(fā)現(xiàn)更多IT圈優(yōu)質(zhì)內(nèi)容,分享干貨知識,幫助你成為更好得程序員!

         
        (文/付芳華)
        免責(zé)聲明
        本文僅代表作發(fā)布者:付芳華個人觀點(diǎn),本站未對其內(nèi)容進(jìn)行核實(shí),請讀者僅做參考,如若文中涉及有違公德、觸犯法律的內(nèi)容,一經(jīng)發(fā)現(xiàn),立即刪除,需自行承擔(dān)相應(yīng)責(zé)任。涉及到版權(quán)或其他問題,請及時聯(lián)系我們刪除處理郵件:weilaitui@qq.com。
         

        Copyright ? 2016 - 2025 - 企資網(wǎng) 48903.COM All Rights Reserved 粵公網(wǎng)安備 44030702000589號

        粵ICP備16078936號

        微信

        關(guān)注
        微信

        微信二維碼

        WAP二維碼

        客服

        聯(lián)系
        客服

        聯(lián)系客服:

        在線QQ: 303377504

        客服電話: 020-82301567

        E_mail郵箱: weilaitui@qq.com

        微信公眾號: weishitui

        客服001 客服002 客服003

        工作時間:

        周一至周五: 09:00 - 18:00

        反饋

        用戶
        反饋

        主站蜘蛛池模板: 在线观看精品视频一区二区三区| 蜜桃无码AV一区二区| 中文字幕一区二区日产乱码| 亚洲一区中文字幕在线观看| 国产一区二区高清在线播放| 又紧又大又爽精品一区二区| 激情亚洲一区国产精品| 麻豆一区二区在我观看| 91国在线啪精品一区| 视频一区二区在线播放| 日韩精品一区二区三区老鸦窝| 亚洲国产成人精品无码一区二区 | 亚洲国产欧美日韩精品一区二区三区| 人妻无码一区二区视频| 又硬又粗又大一区二区三区视频| 无码播放一区二区三区| 久久国产精品亚洲一区二区| 久久se精品一区二区影院| 狠狠爱无码一区二区三区| 精品人妻无码一区二区色欲产成人| 日本不卡一区二区三区| 国产免费一区二区三区不卡| 久久国产精品免费一区二区三区| 一区二区三区AV高清免费波多| 精品无码中出一区二区| 日韩精品一区二三区中文| 夜夜精品无码一区二区三区| 杨幂AV污网站在线一区二区| 亚洲国产av一区二区三区| 精彩视频一区二区| 午夜福利国产一区二区| 亚洲一区二区三区在线播放| 亲子乱AV视频一区二区| 国产精华液一区二区区别大吗| 国产亚洲福利精品一区| 日韩一区二区视频| 日本精品一区二区三区视频| 波多野结衣在线观看一区| 国产一区二区三区夜色| 日韩人妻无码一区二区三区99 | 国产婷婷色一区二区三区深爱网 |