咱们在上几篇讲完了简单组件的渲染过程。这次我们用一个自定义组件（我们平时开发用的那种）来探索渲染流程的更多支线。 本篇涉及的文件：和第一篇还有第二篇一样 如果本篇涉及的函数和代码在之前详细讨论过，我会用{}来做引用 App非常像我在最开始给出来的的那个组件，我们上次觉得这个组件…

上次我们看完了自定义组件渲染的表层逻辑。这个过程虽然看似很像简单组件对应的逻辑，但也包含一些其特有的处理：1）一个额外的ReactCompositeComponent 需要被实例化来代表这个自定义的组件（App）；2）App.render()会触发很多个React.create…

上次我们走完了平台无关的逻辑流程（表层）。简单来说，这个过程把ReactElement[1]封装进ReactCompositeComponent[T] 里面，然后再用它来派生出ReactDOMComponent[ins]. 本篇我会继续讨论ReactDOMComponent[i…

在上一篇中我们分析了整个渲染流程的前奏，即从一个JSX表达式到ReactCompositeComponent的生成过程。最后我们讨论到batchedMountComponentIntoNode()。本篇会从这个函数开始继续打通简单组件渲染的流程。 本篇涉及的文件： rende…

界面更新本质上就是数据的变化。通过把所有会动的东西收敛到状态(state)，React提供了一个非常直观的前端框架。我也比较喜欢review基于React代码，因为我一般都是从数据结构开始看，这样可以在钻到细节代码之前建立对整个逻辑的初步理解。我也经常会好奇React的实现方式…

本文讲 组件如何编译 以及 ReactDOM.render 的渲染过程。 babel 将 React JSX 编译成 JavaScript. 每个标签的创建都调用了 React.createElement. 贯穿源码，常见的两种数据结构，有助于快速阅读源码。 是 React.c…

上面代码看来，一个是不替换组件的情况下更新组件，另一个则是直接更新 markup 标记。我们按照顺序一个个看过来吧，先看到 ReactCompositeComponent.receiveProps ： 关于 DOM 操作一系列的方法这里不准备做解读，可以直接查看源码 core/…

当我们在开发 React 项目中，第一次调用 ReactDOM.render 的时候都发生了什么呢？ 今天就从源码角度来追踪一下这个问题（主要看流程， 而不纠结与细节）。 首先我们可以从 ReactDOM 的入口文件 ReactDOMStackEntry.js 中找到 rend…