React 思惟索引

關於分析React源碼的文章已經有比較多，我就不獻醜了。

根據分析的結果把React的大體流程和思惟導圖作了一點總結，圖片以下：

源碼在: https://github.com/laryosbert/mini-react.git

 

渲染過程：

 

 

 

更新過程:

 

內部關係思惟導圖：

 

 

 

小bug：在render函數中使用map時，return函數(無狀態)組件時，return後的‘(’必須緊跟在rentrun關鍵詞後同一行。

 

 render() {
        return (
            <div>                
                {                    
                    this.state.addrItems.map(item=>{     
                        // '('須與return同一行                                   
                        return (                        
                        <div>{item.address}</div>
                        );                       
                    })

                }
            </div>
        );
    }

 

refs:

https://juejin.im/post/5983dfbcf265da3e2f7f32de

 https://github.com/purplebamboo/little-reactjs