React-Native 源码分析二-JSX如何渲染成原生页面(下)
source link: http://xujinyang.github.io/2016/09/13/React-Native-jsx%20analyse2/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
React-Native 源码分析二-JSX如何渲染成原生页面(下)
2016-09-13
|
| 1291
前文/)中这次会反推JSX如何最终变化为原生控件的过程，上面这部分算是原生的绘制已经结束，下面开始到JS代码中找，JSX布局如何传达到原生的。
经验之谈：要凭借我的半吊子js和C水平要去扒拉React-Native js部分的代码，也是够吃力的，但是我找到了一个很好的工具-webStorm，之前使用sublime text，不能查看类直接的依赖，不能全局查找引用类的地方，在面对几百个类和他们直接错综复杂的关系的时候，着实心累。有了webStom可以直接跳转到引用的类中，如果要查一个类在什么地方用到，可以使用shift+command+F查找到所有的使用到这个字符串的地方,是在陌生领域探索的利器。还有就是在文件夹中全文搜索文件名，也是常用查找方式。
在查看JS代码之前首先要找到一个突破口，因为我的脑子里面一直有个疑问，就是React和React-Native是如何搭配工作的，我们就从这个问题入手开始分析。
先看一下一个很普通的RN页面
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View
} from 'react-native';
class TestReact extends Component {
render() {
return (
<View style={styles.container}>
<Text style={styles.welcome}>
Welcome to React Native!
</Text>
</View>
);
}
}
...
AppRegistry.registerComponent('TestReact', () => TestReact);
我们发现Component 是解构赋值于react,而Text 来自 react-native 那我们就到react.js中去看一下
node_modules/react/lib/React.js
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
'use strict';
var _assign = require('object-assign');
var ReactChildren = require('./ReactChildren');
var ReactComponent = require('./ReactComponent');
var ReactPureComponent = require('./ReactPureComponent');
var ReactClass = require('./ReactClass');
var ReactDOMFactories = require('./ReactDOMFactories');
var ReactElement = require('./ReactElement');
var ReactPropTypes = require('./ReactPropTypes');
var ReactVersion = require('./ReactVersion');
...
var React = {
// Modern
Children: {
map: ReactChildren.map,
forEach: ReactChildren.forEach,
count: ReactChildren.count,
toArray: ReactChildren.toArray,
only: onlyChild
},
Component: ReactComponent,
PureComponent: ReactPureComponent,
createElement: createElement,
cloneElement: cloneElement,
isValidElement: ReactElement.isValidElement,
// Classic
PropTypes: ReactPropTypes,
createClass: ReactClass.createClass,
createFactory: createFactory,
module.exports = React;
发现React只是引用了ReactComponent，ReactClass等类然后赋值给了自己的变量，想到老的写法中有React.createClass这样来创建组件的，那就到ReactClass中看下
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
var ReactClassInterface = {
mixins: SpecPolicy.DEFINE_MANY,
statics: SpecPolicy.DEFINE_MANY,
propTypes: SpecPolicy.DEFINE_MANY,
contextTypes: SpecPolicy.DEFINE_MANY,
childContextTypes: SpecPolicy.DEFINE_MANY,
getDefaultProps: SpecPolicy.DEFINE_MANY_MERGED,
getInitialState: SpecPolicy.DEFINE_MANY_MERGED,
getChildContext: SpecPolicy.DEFINE_MANY_MERGED,
render: SpecPolicy.DEFINE_ONCE,
componentWillMount: SpecPolicy.DEFINE_MANY,
componentDidMount: SpecPolicy.DEFINE_MANY,
componentWillReceiveProps: SpecPolicy.DEFINE_MANY,
shouldComponentUpdate: SpecPolicy.DEFINE_ONCE,
componentWillUpdate: SpecPolicy.DEFINE_MANY,
componentDidUpdate: SpecPolicy.DEFINE_MANY,
componentWillUnmount: SpecPolicy.DEFINE_MANY,
updateComponent: SpecPolicy.OVERRIDE_BASE
};
很熟悉是不是，这不就是RN的生命周期嘛，找到了生命周期，那么我就看也没有地方实现了这个接口并且调用render方法的，因为Rn是通过render方法来把数据传递到native，控制native渲染UI的。
在ReactClass.js中全局搜索render，并没有发现render的实现，再到ReactComponent.js中搜索也没有发现render的实现，这个时候感觉这样来查找好像大海捞针，我们还没有找到突破口，那我们换个思路，由大到小走不通，那我们就由小到大，由具体到抽象，从一个UI控件的实现来看看也没有什么收获。
随便找个控件RefreshControl
node_modules/react-native/Libraries/Components/RefreshControl/RefreshControl.js
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
96
'use strict';
const ColorPropType = require('ColorPropType');
const NativeMethodsMixin = require('react/lib/NativeMethodsMixin');
const Platform = require('Platform');
const React = require('React');
const View = require('View');
const requireNativeComponent = require('requireNativeComponent');
if (Platform.OS === 'android') {
var RefreshLayoutConsts = require('UIManager').AndroidSwipeRefreshLayout.Constants;
} else {
var RefreshLayoutConsts = {SIZE: {}};
}
const RefreshControl = React.createClass({
statics: {
SIZE: RefreshLayoutConsts.SIZE,
},
mixins: [NativeMethodsMixin],
propTypes: {
...View.propTypes,
onRefresh: React.PropTypes.func,
refreshing: React.PropTypes.bool.isRequired,
tintColor: ColorPropType,
titleColor: ColorPropType,
title: React.PropTypes.string,
enabled: React.PropTypes.bool,
colors: React.PropTypes.arrayOf(ColorPropType),
progressBackgroundColor: ColorPropType,
size: React.PropTypes.oneOf([RefreshLayoutConsts.SIZE.DEFAULT, RefreshLayoutConsts.SIZE.LARGE]),
progressViewOffset: React.PropTypes.number,
},
_nativeRef: (null: any),
_lastNativeRefreshing: false,
componentDidMount() {
this._lastNativeRefreshing = this.props.refreshing;
},
componentDidUpdate(prevProps: {refreshing: boolean}) {
if (this.props.refreshing !== prevProps.refreshing) {
this._lastNativeRefreshing = this.props.refreshing;
} else if (this.props.refreshing !== this._lastNativeRefreshing) {
this._nativeRef.setNativeProps({refreshing: this.props.refreshing});
this._lastNativeRefreshing = this.props.refreshing;
}
},
render() {
return (
<NativeRefreshControl
{...this.props}
ref={ref => this._nativeRef = ref}
onRefresh={this._onRefresh}
/>
);
},
_onRefresh() {
this._lastNativeRefreshing = true;
this.props.onRefresh && this.props.onRefresh();
this.forceUpdate();
},
});
if (Platform.OS === 'ios') {
var NativeRefreshControl = requireNativeComponent(
'RCTRefreshControl',
RefreshControl
);
} else if (Platform.OS === 'android') {
var NativeRefreshControl = requireNativeComponent(
'AndroidSwipeRefreshLayout',
RefreshControl
);
}
module.exports = RefreshControl;
跳过前面的属性定义，直接来看render是如何渲染控件的
1
2
3
4
5
6
7
8
9
render() {
return (
<NativeRefreshControl
{...this.props}
ref={ref => this._nativeRef = ref}
onRefresh={this._onRefresh}
/>
);
},
NativeRefreshControl是ios和Android平台通用的控件，所以有了下面区分平台的兼容代码
1
2
3
4
5
6
7
8
9
10
11
if (Platform.OS === 'ios') {
var NativeRefreshControl = requireNativeComponent(
'RCTRefreshControl',
RefreshControl
);
} else if (Platform.OS === 'android') {
var NativeRefreshControl = requireNativeComponent(
'AndroidSwipeRefreshLayout',
RefreshControl
);
}
我们的目光停在了requireNativeComponent这个方法上，在ios平台使用RCTRefreshControl，在Android平台使用AndroidSwipeRefreshLayout，看来就是他来兼容各平台的api。在文件夹内全局搜索
requireNativeComponent.js（这个类不在同级目录，所以不方便找，这个时候就全局搜索）
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
'use strict';
var ReactNativeStyleAttributes = require('ReactNativeStyleAttributes');
var UIManager = require('UIManager');
var UnimplementedView = require('UnimplementedView');
var createReactNativeComponentClass = require('react/lib/createReactNativeComponentClass');
...
import type { ComponentInterface } from 'verifyPropTypes';
function requireNativeComponent(
viewName: string,
componentInterface?: ?ComponentInterface,
extraConfig?: ?{nativeOnly?: Object},
): Function {
var viewConfig = UIManager[viewName];
if (!viewConfig || !viewConfig.NativeProps) {
warning(false, 'Native component for "%s" does not exist', viewName);
return UnimplementedView;
}
var nativeProps = {
...UIManager.RCTView.NativeProps,
...viewConfig.NativeProps,
};
viewConfig.uiViewClassName = viewName;
viewConfig.validAttributes = {};
viewConfig.propTypes = componentInterface && componentInterface.propTypes;
...
viewConfig.validAttributes.style = ReactNativeStyleAttributes;
return createReactNativeComponentClass(viewConfig);
}
requireNativeComponent根据前面传过来的viewname,extraConfig，生成了配置变量viewConfig,最后调用createReactNativeComponentClass(viewConfig)
var createReactNativeComponentClass = require('react/lib/createReactNativeComponentClass');
createReactNativeComponentClass来自react的lib目录下，看到了react有点欣喜，感觉这条路走对了，不废话，继续跟入
/node_modules/react/lib/createReactNativeComponentClass.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
'use strict';
var ReactNativeBaseComponent = require('./ReactNativeBaseComponent');
var createReactNativeComponentClass = function (viewConfig) {
var Constructor = function (element) {
this._currentElement = element;
this._topLevelWrapper = null;
this._hostParent = null;
this._hostContainerInfo = null;
this._rootNodeID = 0;
this._renderedChildren = null;
};
Constructor.displayName = viewConfig.uiViewClassName;
Constructor.viewConfig = viewConfig;
Constructor.propTypes = viewConfig.propTypes;
Constructor.prototype = new ReactNativeBaseComponent(viewConfig);
Constructor.prototype.constructor = Constructor;
return Constructor;
};
module.exports = createReactNativeComponentClass;
createReactNativeComponentClass方法很简单，返回了一个构造函数，但是我们传入的viewConfig被new 了一个new ReactNativeBaseComponent(viewConfig)
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
'use strict';
var _assign = require('object-assign');
var NativeMethodsMixin = require('./NativeMethodsMixin');
var ReactNativeAttributePayload = require('./ReactNativeAttributePayload');
var ReactNativeComponentTree = require('./ReactNativeComponentTree');
var ReactNativeEventEmitter = require('./ReactNativeEventEmitter');
var ReactNativeTagHandles = require('./ReactNativeTagHandles');
var ReactMultiChild = require('./ReactMultiChild');
var UIManager = require('react-native/lib/UIManager');
var ReactNativeBaseComponent = function (viewConfig) {
this.viewConfig = viewConfig;
};
ReactNativeBaseComponent.Mixin = {
getPublicInstance: function () {
// TODO: This should probably use a composite wrapper
return this;
},
unmountComponent: function () {
ReactNativeComponentTree.uncacheNode(this);
deleteAllListeners(this);
this.unmountChildren();
this._rootNodeID = 0;
},
mountComponent: function (transaction, hostParent, hostContainerInfo, context) {
var tag = ReactNativeTagHandles.allocateTag();
this._rootNodeID = tag;
this._hostParent = hostParent;
this._hostContainerInfo = hostContainerInfo;
if (process.env.NODE_ENV !== 'production') {
for (var key in this.viewConfig.validAttributes) {
if (this._currentElement.props.hasOwnProperty(key)) {
deepFreezeAndThrowOnMutationInDev(this._currentElement.props[key]);
}
}
}
var updatePayload = ReactNativeAttributePayload.create(this._currentElement.props, this.viewConfig.validAttributes);
var nativeTopRootTag = hostContainerInfo._tag;
UIManager.createView(tag, this.viewConfig.uiViewClassName, nativeTopRootTag, updatePayload);
ReactNativeComponentTree.precacheNode(this, tag);
this._registerListenersUponCreation(this._currentElement.props);
this.initializeChildren(this._currentElement.props.children, tag, transaction, context);
return tag;
}
};
_assign(ReactNativeBaseComponent.prototype, ReactMultiChild.Mixin, ReactNativeBaseComponent.Mixin, NativeMethodsMixin);
module.exports = ReactNativeBaseComponent;
进到ReactNativeBaseComponent 里面我们发现了俩个很重要的地方：
var UIManager = require(‘react-native/lib/UIManager’);UIManager是JS管理原生UI的的控制类，它的出现代表着这里有人要直接控制原生UI
mountComponent: function (transaction, hostParent, hostContainerInfo, context) 基本上就是render的意思,仔细研究一下这个方法
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
mountComponent: function (transaction, hostParent, hostContainerInfo, context) {
var tag = ReactNativeTagHandles.allocateTag();
this._rootNodeID = tag;
this._hostParent = hostParent;
this._hostContainerInfo = hostContainerInfo;
if (process.env.NODE_ENV !== 'production') {
for (var key in this.viewConfig.validAttributes) {
if (this._currentElement.props.hasOwnProperty(key)) {
deepFreezeAndThrowOnMutationInDev(this._currentElement.props[key]);
}
}
}
var updatePayload = ReactNativeAttributePayload.create(this._currentElement.props, this.viewConfig.validAttributes);
var nativeTopRootTag = hostContainerInfo._tag;
UIManager.createView(tag, this.viewConfig.uiViewClassName, nativeTopRootTag, updatePayload);
ReactNativeComponentTree.precacheNode(this, tag);
this._registerListenersUponCreation(this._currentElement.props);
this.initializeChildren(this._currentElement.props.children, tag, transaction, context);
return tag;
}
};
UIManager.createView(tag, this.viewConfig.uiViewClassName, nativeTopRootTag, updatePayload) 找到了这个方法，就是找到了突破口，刚刚一路跟过来，我们在RefreshControl render方法中发现是new 了一个ReactNativeBaseComponent()，现在发现ReactNativeBaseComponent的mountComponent方法直接就调用了UIManager.createView，这和我们上一篇中讲到的com/facebook/react/uimanager/UIManagerModule.java中的createView方法难道不谋而合？我们直接点UIManager.createView进去看看，发现跳转到了不是UIManager.js 而是react-native/Libraries/ReactNative/UIManagerStatTracker.js这个不知道又是JS什么奇葩的技能导致的。不管了，不懂的东西已经那么多了，不在乎再多一个，直接看
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
var UIManager = require('UIManager');
var installed = false;
var UIManagerStatTracker = {
install: function() {
if (installed) {
return;
}
installed = true;
var statLogHandle;
var stats = {};
function printStats() {
console.log({UIManagerStatTracker: stats});
statLogHandle = null;
}
function incStat(key: string, increment: number) {
stats[key] = (stats[key] || 0) + increment;
if (!statLogHandle) {
statLogHandle = setImmediate(printStats);
}
}
var createViewOrig = UIManager.createView;
UIManager.createView = function(tag, className, rootTag, props) {
incStat('createView', 1);
incStat('setProp', Object.keys(props || []).length);
createViewOrig(tag, className, rootTag, props);
};
var updateViewOrig = UIManager.updateView;
UIManager.updateView = function(tag, className, props) {
incStat('updateView', 1);
incStat('setProp', Object.keys(props || []).length);
updateViewOrig(tag, className, props);
};
var manageChildrenOrig = UIManager.manageChildren;
UIManager.manageChildren = function(tag, moveFrom, moveTo, addTags, addIndices, remove) {
incStat('manageChildren', 1);
incStat('move', Object.keys(moveFrom || []).length);
incStat('remove', Object.keys(remove || []).length);
manageChildrenOrig(tag, moveFrom, moveTo, addTags, addIndices, remove);
};
},
};
module.exports = UIManagerStatTracker;
有意思的东西出现了：
- UIManager.createView
- UIManager.updateView
- UIManager.manageChildren
这三个方法在UIManagerModule中也出现过
com/facebook/react/uimanager/UIManagerModule.java
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
public class UIManagerModule extends ReactContextBaseJavaModule implements
OnBatchCompleteListener, LifecycleEventListener {
...
@ReactMethod
public void removeRootView(int rootViewTag) {
mUIImplementation.removeRootView(rootViewTag);
}
@ReactMethod
public void createView(int tag, String className, int rootViewTag, ReadableMap props) {
if (DEBUG) {
FLog.d(
ReactConstants.TAG,
"(UIManager.createView) tag: " + tag + ", class: " + className + ", props: " + props);
}
mUIImplementation.createView(tag, className, rootViewTag, props);
}
@ReactMethod
public void updateView(int tag, String className, ReadableMap props) {
if (DEBUG) {
FLog.d(
ReactConstants.TAG,
"(UIManager.updateView) tag: " + tag + ", class: " + className + ", props: " + props);
}
mUIImplementation.updateView(tag, className, props);
}
@ReactMethod
public void manageChildren(
int viewTag,
@Nullable ReadableArray moveFrom,
@Nullable ReadableArray moveTo,
@Nullable ReadableArray addChildTags,
@Nullable ReadableArray addAtIndices,
@Nullable ReadableArray removeFrom) {
if (DEBUG) {
FLog.d(
ReactConstants.TAG,
"(UIManager.manageChildren) tag: " + viewTag +
", moveFrom: " + moveFrom +
", moveTo: " + moveTo +
", addTags: " + addChildTags +
", atIndices: " + addAtIndices +
", removeFrom: " + removeFrom);
}
mUIImplementation.manageChildren(
viewTag,
moveFrom,
moveTo,
addChildTags,
addAtIndices,
removeFrom);
}
...
}
这时候我们可以认为这个地方就是在调用原生的方法在createView或者是创建了createView的配置信息。
分析到这里我们已经有点眉目了，原来Rn和原生一样，也是先渲染内部子控件，然后再渲染外部控件。所以Component来自React的，但是UI控件是React-Native的，在render生命周期执行的时候会执行子控件的render方法，子控件会调用UIManager来把信息传递到原始的UIManagerModule，UIManagerModule根据传过来的Tag找到对应的UIManager，最后生成一个Operation添加到UI处理队列中，当mDispatchUIRunnables执行runable的时候调用Operation.execute抽象方法，其实就是调用UIManager.createViewInstance来真正生成View，然后调用viewManager.updateProperties 设置View的属性。这样一个控件就创建出来了。
最后附上The Life-Cycle of a Composite Component
react/lib/ReactCompositeComponent.js
/**
* ------------------ The Life-Cycle of a Composite Component ------------------
*
* - constructor: Initialization of state. The instance is now retained.
* - componentWillMount
* - render
* - [children's constructors]
* - [children's componentWillMount and render]
* - [children's componentDidMount]
* - componentDidMount
*
* Update Phases:
* - componentWillReceiveProps (only called if parent updated)
* - shouldComponentUpdate
* - componentWillUpdate
* - render
* - [children's constructors or receive props phases]
* - componentDidUpdate
*
* - componentWillUnmount
* - [children's componentWillUnmount]
* - [children destroyed]
* - (destroyed): The instance is now blank, released by React and ready for GC.
*
* -----------------------------------------------------------------------------
*/
Recommend
-
67
如何实现 React Native 里的页面导航系统
-
85
-
92
-
7
背景 「让每一个用户在最短的时间内看到页面上重要的内容」一直以来都是前端工程师们精益求精的方向。对于一个H5的源码页面，我们已经有了很多缩短首屏渲染时间的方法，比如...
-
11
⚡️ React Native 启动速度优化——Native 篇（内含源码分析）发布于 4 月 9 日Web 开发有一个经典问题：「浏览器中从输入 URL 到页面渲染的这个过程中都发生了什么？
-
6
AE渲染成视频第一句语音渲染变声问题 frontend 2020-06-30 16:01:31 最近在玩AE做动画，导到ME,然后渲染生成视频, 视频有配音是AI合成的。...
-
4
本文是深入浅出 ahooks 源码系列文章的第七篇，该系列已整理成文档-地址。觉得还不错，给个 star 支持一...
-
2
页面是如何渲染的？通常会得到“解析 HTML、css 合成 Render Tree，就可以渲染了”的回答。但是具体都做了些什么，却很少有人细说，我们今天就从 Chrome 的性能工具开始，具体看看一个页面是如何进行渲染的，以及进行页面优化时需要关注哪些指标。 以“老二次元”...
-
8
APP中RN页面渲染流程-ReactNative源码分析 在APP...
-
8
继续讨论 https://github.com/0xPolygonID/polygonid-flutter-sdk ，其中使用了c-polygonid / witnesscalc / rapidsnark / babyjubjub 这4个外部lib库，有c，golang，rust等编...
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK