关于分析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 思维索引的更多相关文章

  1. AngularJS 1.x 思维索引

    我们在这里不讨论Angular2和Angular4,因为其完全重写,其实已经不叫AngularJS了. AngularJS的缺陷: 性能问题:通过检查脏值进行数据更新,当数据不断增加时,检查的效率就不 ...

  2. Facebook React完全解析

    2004年,对于前端社区来说,是里程碑式的一年.Gmail横空出世,它带来基于前端渲染的原生应用级别的体验,相对于之前的服务端渲染网页可谓提升了一个时代,触动了用户的G点.自此,前端渲染的网站成为无数 ...

  3. 探索React生态圈

    原文地址:http://www.csdn.net/article/2015-08-04/2825370-react 2004年,对于前端社区来说,是里程碑式的一年.Gmail横空出世,它带来基于前端渲 ...

  4. 【优质】React的学习资源

    React的学习资源 github 地址: https://github.com/LeuisKen/react-collection https://github.com/reactnativecn/ ...

  5. React Hooks究竟是什么呢?

    摘要: React Hooks原理解析. 原文:快速了解 React Hooks 原理 译者:前端小智 我们大部分 React 类组件可以保存状态,而函数组件不能? 并且类组件具有生命周期,而函数组件 ...

  6. ReactEurope Conf 参会感想

    React 带来的革命性创新是前端世界过去几年最激动人心的变化.自从接触 React 以来,我深信 React 会改变客户端开发者(包括前端.iOS 和 Android)的开发体验.这次在巴黎举办的  ...

  7. 使用 AngularJS 和 ReactJS 的经验

    1. React 福音 当我们的团队开始寻找一个合适的前端框架的时候,我们考虑了许多选择,最后留下两个选项 —— Angular 和 React. Angular 是目前为止最成熟的方案:它拥有一个庞 ...

  8. ECMA6 New Features

    花了一些时间把ECMA6的新特性进行了回顾,给自己建立了思维索引,大部分内容借鉴了阮一峰大神的博客. refers: http://es6.ruanyifeng.com/#docs/arraybuff ...

  9. React 16.x 新特性思维导图

    React 16版本相对于以前的版本做了很大的改动,下面是我整理的React 16.x 新特性的思维导图文件,欢迎围观和指导:

随机推荐

  1. Hadoop 搭建集群的步骤

    1.安装jdk,配置环境变量 root@localhost java]# vi /etc/profile 在profile中添加如下内容: #set java environmentexport  J ...

  2. python学习-python入门

    开始学习python,开始记录. 第一个小程序:登陆系统 功能:1.通过文件名和密码导入用户名和密码~ 2.用户输入用户名和密码 3.将用户输入的用户名进行比对,先判断用户名是否在黑名单里面,如果在黑 ...

  3. 递归加载Treeview

    using System;using System.Collections.Generic;using System.ComponentModel;using System.Data;using Sy ...

  4. Sql Prompt---Unable to connect to the Redgate Client Service

    今天在使用SQLPrompt时,突然发现所有的提示都不能用了,在百度上搜索无果,刚刚在Google搜索,果然找到了自己想要的答案,今天把搜索的结果发布在此,希望能够帮助到有需要的朋友. 客户端服务停止 ...

  5. 周强 201771010141《面对对象程序设计(java)》第十周学习总结

    ---恢复内容开始--- 1.实验目的与要求 (1) 理解泛型概念: (2) 掌握泛型类的定义与使用: (3) 掌握泛型方法的声明与使用: (4) 掌握泛型接口的定义与实现: (5)了解泛型程序设计, ...

  6. Python中常见的序列及其函数

    分片:分片操作的实现需要提供两个索引作为边界,第一个包含在分片内,第二个不包含 number =[1,2,3,4,5,6,7,8,9,10] number [3:6]  -->[4,5,6] n ...

  7. 2019 Power BI最Top50面试题,助你面试脱颖而出系列<下>

    Q:什么是附加题? A:这就是常说的送分可选题,可做可不做:也可以说是加分项,是难点提升题. Power BI 面试题 — 附加题 33)什么是 Power View? 答案: Power View是 ...

  8. Python heapq模块

    注意,默认的heap是一个小顶堆! heapq模块提供了如下几个函数: heapq.heappush(heap, item) 把item添加到heap中(heap是一个列表) heapq.heappo ...

  9. mysql 导入数据库问题

    今天数据库迁移测试,发现存储过程导入不了,提示如下错误: Cannot load from mysql.proc. The table is probably corrupted 原因是mysql5. ...

  10. sql执行内部操作期间检测到不一致性解决方案

    解决方法:重启下SQL服务,把下面脚本运行即可.运行后,坏掉的数据库可能会丢失. --mydb 为坏了的数据库名--mytable  为坏了的据库表--master 这里不需要更改 use mydb  ...