Zongzi

Fiber 是 React 16 中新的协调引擎。他的主要目的是使 Virtual DOM 可以进行增量式渲染。了解更多 从数据结构来理解 Fiber ，他其实是一个链表数据结构，分别通过 return ， child ， sibling 连接着另一个 Fiber 。同样的也可…

历时近 6 年之久，从 0.3.0 (May 29, 2013) 至 16.8.6 (March 27, 2019) 整个 React 框架已经经历了可以说是“脱胎换骨”，具体更新内容细节可以移步至 CHANGELOG.md 查看。 回看 v0.3 ，源码存放在 src 目录下…

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

那么关于生命周期， React 当中生命周期有 2 个。 一个是组件的生命周期 _lifeCycleState ，另一个是复合生命周期 _compositeLifeCycleState 用于复合组件。 那么到此，实现生命周期功能。那么让我们来看看那些生命周期的钩子都在哪里：

在这里，我们看到创建组件的方法是 React.createClass ，组件就是一堆 HTML 元素的集合，但是组件具有状态 (state) 和属性 (props) ，还具有生命周期，并且组件可以更新。所以我们会一一将其到来，那么本次我们仅讨论组件渲染。我们看到复合组件 看到 …

React 采用将事件挂载至 document 或者 window 上来实现顶级事件。接下来我们会一一来介绍事件的实现过程。 我们来回忆下， ReactNativeComponent.js 中 _createOpenTagMarkup 方法中的 putListener 函数和 …

Transaction 创建一个黑盒子，它能够包装任何方法，以便在调用方法之前和之后维护某些不变量（即使在调用包装方法时抛出异常）。 实例化事务的人可以在创建时提供不变量的执行者。 Transaction 类本身将为您提供一个额外的自动不变量 - 任何事务实例在运行时不应该运行…

下面我们依次来解读 CSS 样式 和 DOM 属性。 这里需要注意， mergeInto 函数会对 one , two 参数进行校验。 校验他们是否为 object ，并且不是 array 。 校验下 props.style 传入的是否是对象，然后创建 CSS markup 标…

这里的内容，我相信大家看的都很眼熟吧，这和 ReactDOM.js 中的 Constructor 一样，只不过这里不接受 children 参数，而是只接受一个 text 参数。 那么在压扁之后，我们调用的是 ReactMultiChild.Mixin.mountMultiCh…