二維碼
        企資網

        掃一掃關注

        當前位置: 首頁 » 企資快報 » 品牌 » 正文

        你對_ReactDOM.render(_...

        放大字體  縮小字體 發布日期:2022-12-06 15:36:00    作者:付芳華    瀏覽次數:69
        導讀

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

        | 慕課網精英講師 上古鵬

        感謝首次自「慕課網」,想了解更多IT干貨內容,程序員圈內熱聞,歡迎!

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

        ReactDOM 對象

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

        const ReactDOM = {

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

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

        render: function (element, container, callback) {

        // 會先檢驗container是否有效,無效則停止執行且拋出錯誤

        // ...

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

        },

        unstable_renderSubtreeIntoContainer: function(...) {},

        unmountComponentAtNode: function(...) {}

        // ...

        }

        代碼示例 1.2.1 ReactDOM 對象得定義

        ReactDOM 對象上面有findDOMNode、hydrate和render等多個函數。其中ReactDOM.render函數有三個參數和一個返回值。下面內容將會對這三個參數和返回值進行詳細說明。

        理解 ReactDOM.render 函數得三個參數

        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 函數得使用

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

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

        第三個參數是應用程序渲染完成后得回調函數,這個參數是可選項,React 會在應用程序渲染完成后檢查是否有回調函數,如果有則調用該回調函數。

        ReactDOM.render函數除了執行渲染任務外還有自己得返回值即legacyRenderSubtreeIntoContainer函數得執行結果。那么,legacyRenderSubtreeIntoContainer函數得執行結果是什么呢?

        ReactDOM.render 函數得返回值

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

        console.log('返回值',

        ReactDOM.render(

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

        )

        );

        // 輸出結果

        UpdateCounter: {

        context: {},

        handleClick: ? (),

        props: {name: "Taylor"},

        refs: {},

        state: {count: 0, text: "計數"},

        // 更新觸發器

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

        // 存儲了首次渲染完成后對應得Fiber結點信息

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

        _reactInternalInstance: {_processChildContext: ?},

        isMounted: (...),

        replaceState: (...),

        // 繼承于React.Component

        __proto__: Component,

        }

        代碼示例 1.2.3 ReactDOM.render 函數執行后得返回值

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

        小結

        本章主要介紹了在研究 React 內部運行機制方面得一些思路與切入點以及 React 應用程序得首次渲染入口—ReactDOM.render函數。

        歡迎「慕課網」,發現更多IT圈優質內容,分享干貨知識,幫助你成為更好得程序員!

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

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

        粵ICP備16078936號

        微信

        關注
        微信

        微信二維碼

        WAP二維碼

        客服

        聯系
        客服

        聯系客服:

        在線QQ: 303377504

        客服電話: 020-82301567

        E_mail郵箱: weilaitui@qq.com

        微信公眾號: weishitui

        客服001 客服002 客服003

        工作時間:

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

        反饋

        用戶
        反饋

        主站蜘蛛池模板: aⅴ一区二区三区无卡无码| 无码中文字幕人妻在线一区二区三区 | 国产主播一区二区三区在线观看| 亚洲AV美女一区二区三区| 综合无码一区二区三区四区五区| 精品无码人妻一区二区三区不卡| 台湾无码AV一区二区三区| 久久精品一区二区三区AV| 一区二区三区在线| 欧美日韩一区二区成人午夜电影| 日韩精品无码一区二区视频 | 成人在线视频一区| 中文字幕无线码一区2020青青| 国产爆乳无码一区二区麻豆| 好吊视频一区二区三区| 精品国产一区二区麻豆| 中文字幕AV一区二区三区人妻少妇| 精品人妻少妇一区二区| 亚洲高清偷拍一区二区三区| 波多野结衣在线观看一区| 国产伦精品一区三区视频| 国产日产久久高清欧美一区| 无码一区二区三区AV免费| 日本精品无码一区二区三区久久久 | 中文字幕一区二区精品区| 国产精品美女一区二区视频| 成人精品视频一区二区三区不卡| www.亚洲一区| 精品乱子伦一区二区三区高清免费播放| 暖暖免费高清日本一区二区三区| 怡红院美国分院一区二区| 国产av一区最新精品| 精品免费国产一区二区| 动漫精品一区二区三区3d | 亚洲一区二区三区在线播放| 在线免费一区二区| 香蕉在线精品一区二区| 精品国产一区二区三区AV性色| 国产精品免费一区二区三区| 国产色综合一区二区三区| 无码人妻精品一区二区三18禁|