React源码分析(一)-调用ReactDOM.render后发生了什么

1
2
3
4
5
6
7
8
9
10

// src 部分目录├── ReactVersion.js    # React版本号
├── addons             # 插件
├── isomorphic		   # 同构代码,作为react-core, 提供顶级API
├── node_modules
├── package.json
├── renderers          # 渲染器, 包括DOM,Native,art,test等
├── shared             # 子目录之间需要共享的代码,提到父级目录shared
├── test			   # 测试代码

1
2
3
4
5
6
7
8
9
10
11

// jsx
ReactDOM.render(<C />,document.getElementById('app')
)// 转义后
ReactDOM.render(React.createElement(C, null), document.getElementById('app')
);

1
2
3
4
5
6
7
8
9
10
11

{$$typeof: Symbol(react.element)key: nullprops: {}        // props有child属性, 描述子组件, 同样是元素ref: nulltype: class C    // type可以是类(自定义组件)、函数(wrapper)、string(DOM节点)_owner: null_store: {validated: false}_self: null_source: null
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

// jsx
return (<div className='container'>"dscsdcsd"<i onClick={(e) => console.log(e)}>{this.state.val}</i><Children val={this.state.val}/></div>
)// bable 转义后
// createElement(type, props, children)
return React.createElement('div', { className: 'container' }, '"dscsdcsd"',React.createElement('i', { onClick: e => console.log(e) }, this.state.val),React.createElement(Children, { val: this.state.val })
);// 对应的元素树
{$$typeof: Symbol(react.element)key: nullprops: {  // props有children属性, 描述子组件, 同样是元素children: [""dscsdcsd"",// 子元素{$$typeof: Symbol(react.element), type: "i", key: null, ref: null, props: {…}, …},{$$typeof: Symbol(react.element), type: class Children, props: {…}, …}]className: 'container'}  ref: nulltype: 'div'_owner: null_store: {validated: false}_self: null_source: null
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

/*** Given a ReactNode, create an instance that will actually be mounted.*/
function instantiateReactComponent(node(这里node指element), shouldHaveDebugID) {...// 如果element为空if (node === null || node === false) {// 创建空componentinstance = 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 { // 否则就实例化ReactCompositeComponentinstance = new ReactCompositeComponentWrapper(element);}// 如果element是string或number} else if (typeof node === 'string' || typeof node === 'number') {// 实例化ReactDOMTextComponentinstance = ReactHostComponent.createInstanceForText(node);} else {invariant(false, 'Encountered invalid React node of type %s', typeof node);}...return instance;
}

1
2
3
4
5
6
7
8
9

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

1

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95

// 事务的抽象实现, 作为基类
var TransactionImpl = {// 初始化/重置实例属性, 给实例添加/重置几个属性, 实例化事务时会调用reinitializeTransaction: function () {this.transactionWrappers = this.getTransactionWrappers();if (this.wrapperInitData) {this.wrapperInitData.length = 0;} else {this.wrapperInitData = [];}this._isInTransaction = false;},_isInTransaction: false,// 这个函数会交给具体的事务实例化时定义, 初始设为nullgetTransactionWrappers: null,// 判断是否已经在这个事务中, 保证当前的Transaction正在perform的同时不会再次被performisInTransaction: function () {return !!this._isInTransaction;},// 顶级API, 事务的主要实现, 用来在安全的窗口下执行函数perform: function (method, scope, a, b, c, d, e, f) {var ret;var errorThrown;try {this._isInTransaction = true;errorThrown = true;this.initializeAll(0);  // 调用所有wrapper的initialize方法ret = method.call(scope, a, b, c, d, e, f); // 调用要执行的函数errorThrown = false;} finally {// 调用所有wrapper的close方法, 利用errorThrown标志位保证只捕获函数执行时的错误, 对initialize	  // 和close抛出的错误不做处理try {if (errorThrown) {try {this.closeAll(0);} catch (err) {}} else {this.closeAll(0);}} finally {this._isInTransaction = false;}}return ret;},// 调用所有wrapper的initialize方法的函数定义initializeAll: function (startIndex) {var transactionWrappers = this.transactionWrappers; // 得到wrapper// 遍历依次调用for (var i = startIndex; i < transactionWrappers.length; i++) {var wrapper = transactionWrappers[i];try {...this.wrapperInitData[i] = wrapper.initialize ? wrapper.initialize.call(this):null;} finally {if (this.wrapperInitData[i] === OBSERVED_ERROR) {try {this.initializeAll(i + 1);} catch (err) {}}}}},// 调用所有wrapper的close方法的函数定义closeAll: function (startIndex) {...var transactionWrappers = this.transactionWrappers; // 拿到wrapper// 遍历依次调用for (var i = startIndex; i < transactionWrappers.length; i++) {var wrapper = transactionWrappers[i];var initData = this.wrapperInitData[i];var errorThrown;try {...if (initData !== OBSERVED_ERROR && wrapper.close) {wrapper.close.call(this, initData);}errorThrown = false;} finally {if (errorThrown) {...try {this.closeAll(i + 1);} catch (e) {}}}}this.wrapperInitData.length = 0;}
};

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51

...
var Transaction = require('Transaction');// 引入事务
...var RESET_BATCHED_UPDATES = {   // 重置的 wrapperinitialize: emptyFunction,close: function() {ReactDefaultBatchingStrategy.isBatchingUpdates = false;  // 事务结束即一次batch结束},
};var FLUSH_BATCHED_UPDATES = {  // 批处理的 wrapperinitialize: emptyFunction,close: ReactUpdates.flushBatchedUpdates.bind(ReactUpdates),
};// 组合成 ReactDefaultBatchingStrategyTransaction 事务的wrapper
var TRANSACTION_WRAPPERS = [FLUSH_BATCHED_UPDATES, RESET_BATCHED_UPDATES]; // 调用 reinitializeTransaction 初始化
function ReactDefaultBatchingStrategyTransaction() {this.reinitializeTransaction();
}// 参数中依赖了事务
Object.assign(ReactDefaultBatchingStrategyTransaction.prototype, Transaction, {getTransactionWrappers: function() {return TRANSACTION_WRAPPERS;},
});var transaction = new ReactDefaultBatchingStrategyTransaction(); // 实例化这类事务// 批处理策略
var ReactDefaultBatchingStrategy = {isBatchingUpdates: false, // 是否处在一次BatchingUpdates标志位// 批量更新策略调用的就是这个方法batchedUpdates: function(callback, a, b, c, d, e) {var alreadyBatchingUpdates = ReactDefaultBatchingStrategy.isBatchingUpdates;// 一旦调用批处理, 重置isBatchingUpdates标志位, 表示正处在一次BatchingUpdates中ReactDefaultBatchingStrategy.isBatchingUpdates = true;// 避免重复分配事务if (alreadyBatchingUpdates) {return callback(a, b, c, d, e);} else {return transaction.perform(callback, null, a, b, c, d, e);  // 将callback放进事务里执行}},
};

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

var ON_DOM_READY_QUEUEING = {/*** Initializes the internal `onDOMReady` queue.*/initialize: function() {this.reactMountReady.reset();},/*** After DOM is flushed, invoke all registered `onDOMReady` callbacks.*/close: function() {this.reactMountReady.notifyAll();},
};

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

/** Initializes the component, renders markup, and registers event listeners.
*/mountComponent: function(transaction,hostParent,hostContainerInfo,context,) {...if (inst.componentDidMount) {if (__DEV__) {transaction.getReactMountReady().enqueue(() => { // 将要调用的callback存起来measureLifeCyclePerf(() => inst.componentDidMount(),this._debugID,'componentDidMount',);});} else {transaction.getReactMountReady().enqueue(inst.componentDidMount, inst);}}...}

1
2
3
4
5
6
7
8
9
10
11
12
13
14

/*** Invokes all enqueued callbacks and clears the queue. This is invoked after* the DOM representation of a component has been created or updated.*/notifyAll() {...// 遍历调用存储的callbackfor (var i = 0; i < callbacks.length; i++) {callbacks[i].call(contexts[i], arg);}callbacks.length = 0;contexts.length = 0;}}