React render流程梳理

前言

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
ReactDOM.render(<App />, document.getElementById('root'));
複製代碼

當經過create-react-app初始化一個項目的時候,上面這段代碼就在瀏覽器中繪製出了內容.ReactDOM.render(ReactElement, Container, callback)是怎麼將React組件繪製到瀏覽器中的呢?本文是React源碼閱讀系列的起始篇,在這篇文章中主要圍繞如下兩個方面進行介紹:

1. render()方法調用中相關函數的調用
2. render()方法調用中產生的數據結構的梳理

閱讀源碼是一個知其然知其因此然的過程.經過源碼閱讀的過程當中咱們能學習到一些設計,代碼優化,解決方案等,經過這些來反哺實際工做的遇到的問題.這個也是這個系列想要得到而且與你們分享的內容.

如何閱讀React源碼

1. React倉庫是一個包含多個package的倉庫.在閱讀源碼以前須要對獨立的倉庫有個簡單的認識.好比react經過react-reconciler和react-dom來完成web頁面的構建.
   
2. debugger
   經過debugger來一步一步跟蹤函數的調用.

ReactDOM.render()調用過程當中的函數調用

如下全部代碼基於React 16.8.6

• 

走入ReactDOM.render()源碼

首先定位到packages/react-dom/src/client/ReactDOM.js

能夠看到ReactDOM.render()方法將當前的ReactElement和Container信息傳遞給了legacyRenderSubtreeIntoContainer.

因爲是首次mount,這個時候尚未root節點而且是應用的根節點這裏直接進行root節點的建立.最後調用root的render方法就開始進行頁面的繪製.在legacyCreateRootFromDOMContainer方法中會對當前容器的內容進行清理.這裏調用建立了ReactRoot節點.


createContainer根據當前的container信息來建立根容器.
定位到packages/react-reconciler/src/ReactFiberReconciler.js

定位到packages/react-reconciler/src/ReactFiberRoot.js(Fiber !!!!!!)
在createFiberRoot方法中,建立了根據當前的容器信息建立了FiberRootb而且建立了一個HostRootFiber進行相互引用.

ReactDOM.render()調用過程當中的數據結構

經過啓動最開始create-react-app建立的項目,能夠看到如下的輸出.

後記

這篇文章只梳理了React在實際調用渲染函數以前的函數調用和數據結構.在這個過程當中終於盼來了千呼萬喚的fiber.以後的文章會繼續深刻react的渲染流程和fiber的實現來對react進行學習.

                                            

                                                歡迎你們關注個人公衆號,一塊兒進步