窥探React - 源码分析

正文

请到「今天看啥」查看全文

( node(这里node指element ), shouldHaveDebugID ) { ... // 如果element为空 if (node === null || node === false ) { // 创建空component instance = ReactEmptyComponent.create(instantiateReactComponent); } else if ( typeof node === 'object' ) { // 如果是对象 ... // 这里是类型检查 // 如果element.type是字符串 if ( typeof element.type === 'string' ) { //实例化 宿主组件, 也就是DOM节点 instance = ReactHostComponent.createInternalComponent(element); } else if (isInternalComponentType(element.type)) { // 保留给以后版本使用，此处暂时不会涉及到 } else { // 否则就实例化ReactCompositeComponent instance = new ReactCompositeComponentWrapper(element); } // 如果element是string或number } else if ( typeof node === 'string' || typeof node === 'number' ) { // 实例化ReactDOMTextComponent instance = ReactHostComponent.createInstanceForText(node); } else { invariant( false , 'Encountered invalid React node of type %s' , typeof node); } ... return instance; }

3、批量更新

在调用 instantiateReactComponent 拿到组件实例后, React 接着调用了 batchingStrategy.batchedUpdates 并将组件实例当作参数执行批量更新.

批量更新是一种优化策略, 避免重复渲染, 在很多框架都存在这种机制. 其实现要点是要弄清楚何时存储更新, 何时批量更新.

在React中, 批量更新受 batchingStrategy 控制,而这个策略除了server端都是 ReactDefaultBatchingStrategy :

不信你看, 在ReactUpdates.js中 :

var ReactUpdatesInjection = {
  ...
  // 注入批量策略的函数声明
  injectBatchingStrategy: function(_batchingStrategy) {
    ... 
  
    batchingStrategy = _batchingStrategy;
  },
};

在ReactDefaultInjection.js中注入 ReactDefaultBatchingStrategy :

ReactInjection.Updates.injectBatchingStrategy(ReactDefaultBatchingStrategy); // 注入

那么React是如何实现批量更新的? 在ReactDefaultBatchingStrategy.js我们看到, 它的实现依靠了 事务 .

3.1 我们先介绍一下事务.

在 Transaction.js中, React 介绍了事务:

* <pre>
 *                       wrappers (injected at creation time)
 *                                      +        +
 *                                      |        |
 *                    +-----------------|--------|--------------+
 *                    |                 v        |              |
 *                    |      +---------------+   |              |
 *                    |   +--|    wrapper1   |---|----+         |
 *                    |   |  +---------------+   v    |         |
 *                    |   |          +-------------+  |         |
 *                    |   |     +----|   wrapper2  |--------+   |
 *                    |   |     |    +-------------+  |     |   |
 *                    |   |     |                     |     |   |
 *                    |   v     v                     v     v   | wrapper
 *                    | +---+ +---+   +---------+   +---+ +---+ | invariants
 * perform(anyMethod) | |   | |   |   |         |   |   | |   | | maintained
 * +----------------->|-|---|-|---|-->|anyMethod|---|---|-|---|-|-------->
 *                    | |   | |   |   |         |   |   | |   | |
 *                    | |   | |   |   |         |   |   | |   | |
 *                    | |   | |   |   |         |   |   | |   | |
 *                    | +---+ +---+   +---------+   +---+ +---+ |
 *                    |  initialize                    close    |
 *                    +-----------------------------------------+
 * </pre

请到「今天看啥」查看全文