【Under-the-hood-ReactJS-Intro】React源碼解讀

seasonley 發布于2019-08-22 18:16 / 1770人閱讀

摘要：所以為了簡化流程，這些的代碼都先暫時忽略了。也就是說，每個平臺都有獨立的實現。我們將調試兩個過程，和分別對應掛載和更新兩個階段。

概述：
先看看React的架構圖：
https://bogdan-lyashenko.gith...

好好看一下上圖，初看看起來好像很復雜，但是事實上，它只描述了兩個過程：掛載和更新。由于卸載在某種程度上就是“反掛載”，上圖中我們移除了卸載的過程，以使得流程圖看起來更簡單些。當然，上圖不是100%匹配源碼，但是已經能夠用來描述react架構的主要流程了。簡而言之，上圖覆蓋了60%的代碼，但是剩下的40%基本上沒有什么特別大的價值。所以為了簡化流程，這些40%的代碼都先暫時忽略了。

我們先在圖中看下模塊之間的依賴關系。

正如你所知，React是支持多個環境的：
1 手機端（RaectNative）
2 游覽器端（ReactDOM）
3 服務端渲染
4 ReactART（使用React繪制矢量圖）
5 其他

正是為了支持多平臺，上圖中很多文件的代碼量是比圖里展現的要多的多。以下是包含多平臺支持的流程圖。

正如你所見，一些內容被重復了兩次。也就是說，每個平臺都有獨立的實現。比如說，ReactEventListener。很顯然，這個方法的實現在不同的平臺是不同的。技術上來說，這些平臺獨立模塊應該會以某種方法注入或者連接到當前的邏輯過程中，其實，這些模塊中有很多像這樣的injectors。因為它們的語法是標準合成模式的一部分，為了簡化，它們也被暫時忽略了。

我們先學習下React DOM在游覽器中的邏輯流程。這是用的最多的平臺，同時這個函數基本上也覆蓋了React架構的所有思想。

代碼示列：
學習一個框架或者庫的最后的辦法是什么呢？閱讀和調試代碼。我們將調試兩個過程，React.render和component.setState,分別對應掛載和更新兩個階段。我們的實例代碼包含幾個帶有render方法的小組件，這樣會更有利于我們調試。

class ChildCmp extends React.Component {
    render() {
        return  {this.props.childMessage} 
    }
}

class ExampleApplication extends React.Component {
    constructor(props) {
        super(props);
        this.state = {message: "no message"};
    }

    componentWillMount() {
        //...
    }

    componentDidMount() {
        /* setTimeout(()=> {
            this.setState({ message: "timeout state message" });
        }, 1000); */
    }

    shouldComponentUpdate(nextProps, nextState, nextContext) {
        return true;
    }

    componentDidUpdate(prevProps, prevState, prevContext) {
        //...
    }

    componentWillReceiveProps(nextProps) {
        //...
    }

    componentWillUnmount() {
        //...
    }

    onClickHandler() {
        /* this.setState({ message: "click state message" }); */
    }

    render() {
        return 
            
            
            And some text as well!
        
    }
}

ReactDOM.render(
    ,
    document.getElementById("container"),
    function() {}
);

（未完待續）

云服務器 GPU云服務器源碼解讀 webrtc源碼解讀 webrtc fec源碼解讀 js v8源碼解讀

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/95680.html

React 源碼深度解讀（三）：首次 DOM 元素渲染 - Part 3

摘要：在學習源碼的過程中，給我幫助最大的就是這個系列文章，于是決定基于這個系列文章談一下自己的理解。到此為止，首次渲染就完成啦總結從啟動到元素渲染到頁面，并不像看起來這么簡單，中間經歷了復雜的層級調用。前言 React 是一個十分龐大的庫，由于要同時考慮 ReactDom 和 ReactNative ，還有服務器渲染等，導致其代碼抽象化程度很高，嵌套層級非常深，閱讀其源碼是一個非常艱辛的過...

U2FsdGVkX1x 2019-08-23 12:26 評論0 收藏0
React 源碼深度解讀（四）：首次自定義組件渲染 - Part 1

摘要：本篇開始介紹自定義組件是如何渲染的。組件將自定義組件命名為，結構如下經過編譯后，生成如下代碼構建頂層包裝組件跟普通元素渲染一樣，第一步先會執行創建為的。調用順序已在代碼中注釋。先看圖，這部分內容將在下回分解前言 React 是一個十分龐大的庫，由于要同時考慮 ReactDom 和 ReactNative ，還有服務器渲染等，導致其代碼抽象化程度很高，嵌套層級非常深，閱讀其源碼是一個非...

Warren 2019-08-23 12:37 評論0 收藏0
React 源碼深度解讀（六）：依賴注入

摘要：依賴注入和控制反轉，這兩個詞經常一起出現。一句話表述他們之間的關系依賴注入是控制反轉的一種實現方式。而兩者有大量的代碼都是可以共享的，這就是依賴注入的使用場景了。下一步就是創建具體的依賴內容，然后注入到需要的地方這里的等于這個對象。前言 React 是一個十分龐大的庫，由于要同時考慮 ReactDom 和 ReactNative ，還有服務器渲染等，導致其代碼抽象化程度很高，嵌套層級...

glumes 2019-08-23 12:50 評論0 收藏0
React 源碼深度解讀（一）：首次DOM元素渲染 - Part 1

摘要：調用棧是這樣的這里生成的我們將其命名為，它將作為參數傳入到。整個的調用棧是這樣的組件間的層級結構是這樣的到此為止，頂層對象已經構造完畢，下一步就是調用來自的方法，進行頁面的渲染了。通過表達的結構最終會轉化為一個純對象，用于下一步的渲染。歡迎關注我的公眾號睿Talk，獲取我最新的文章：showImg(https://segmentfault.com/img/bVbmYjo); 一、前言...

daydream 2019-08-23 12:26 評論0 收藏0
React 源碼深度解讀（八）：事務 - Part 2

摘要：前言是一個十分龐大的庫，由于要同時考慮和，還有服務器渲染等，導致其代碼抽象化程度很高，嵌套層級非常深，閱讀其源碼是一個非常艱辛的過程。在學習源碼的過程中，給我幫助最大的就是這個系列文章，于是決定基于這個系列文章談一下自己的理解。前言 React 是一個十分龐大的庫，由于要同時考慮 ReactDom 和 ReactNative ，還有服務器渲染等，導致其代碼抽象化程度很高，嵌套層級非常...

airborne007 2019-08-23 12:55 評論0 收藏0