码迷,mamicode.com
首页 > 其他好文 > 详细

React 思维索引

时间:2018-07-07 20:31:49      阅读:286      评论:0      收藏:0      [点我收藏+]

标签:res   hub   pos   思维   items   大致   分享图片   class   做了   

关于分析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

React 思维索引

标签:res   hub   pos   思维   items   大致   分享图片   class   做了   

原文地址:https://www.cnblogs.com/full-stack-engineer/p/8824526.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!