React源码阅读笔记

  • Tony Wang
  • 星期五, 2017 9月 22日 , 下午 3:47

海滩拾贝~

Transactions

Transactions创造了一个盒子，盒子里装的是需要调用的方法，盒子控制的是方法调用前后的不变式。盒子的创建者在运行时动态创建不变式的实施实体。Transactions有一个起始不变式，任何Transaction实体在运行的时候不会被再次运行。通常适用于不同示例方法的相同不变式只需要创建一个Transaction实体。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
* 
*                       wrappers (injected at creation time)
*                                      +        +
*                                      |        |
*                    +-----------------|--------|--------------+
*                    |                 v        |              |
*                    |      +---------------+   |              |
*                    |   +--|    wrapper1   |---|----+         |
*                    |   |  +---------------+   v    |         |
*                    |   |          +-------------+  |         |
*                    |   |     +----|   wrapper2  |--------+   |
*                    |   |     |    +-------------+  |     |   |
*                    |   |     |                     |     |   |
*                    |   v     v                     v     v   | wrapper
*                    | +---+ +---+   +---------+   +---+ +---+ | invariants
* perform(anyMethod) | |   | |   |   |         |   |   | |   | | maintained
* +----------------->|-|---|-|---|-->|anyMethod|---|---|-|---|-|-------->
*                    | |   | |   |   |         |   |   | |   | |
*                    | |   | |   |   |         |   |   | |   | |
*                    | |   | |   |   |         |   |   | |   | |
*                    | +---+ +---+   +---------+   +---+ +---+ |
*                    |  initialize                    close    |
*                    +-----------------------------------------+
*

适用场景：

  • 在reconciliation之前或之后保存“输入选择范围“，在无法预计的错误发生时还原选择。
  • 在重排DOM，防止blur/focus时禁止事件触发，同时保证事件系统重新启动。
  • 在reconciliation发生后，将收集到的DOM变化的队列flush到主UI线程。
  • 在渲染新的内容之后，调用收集到的任何componentDidUpdate方法。

    Transactional插件API

    • 包含initialize方法的模块，该方法返回任意precomputation。
    • 还要包含close方法，该方法接受precomputation。该方法在wrappers方法进程完成或失败之后调用。

总结

所以这个模块就是定义了一个盒子，可以装入任何方法。根据源码来看，是作为原型注入到需要使用的模块中去，具体使用的模块定义了对应的wappers，定义是根据使用模块的功能而定，比如在ReactUpdates模块中，其定义了两个wappers，一个用于记录更新前脏组件集的状态（数量），并在close方法中检测脏组件数量的变化来决定批处理更新的组件；另一个用于控制回调方法，在更新前重置回调方法，更新后调用回调方法。