参考1:https://www.cnblogs.com/zhang740/p/5978323.html
参考2:http://lib.csdn.net/article/reactnative/57263?knId=1440
react native 管理UI所需要的类
来源于网络
对与react native来说，主要就是创建View ，布局View，更新View和移除View(不包含动画)。React Native有一套自己的封装来管理这些操作，这个和Android SDK中管理View的方式有很大很大的区别。
render() {
const { dispatch, router } = this.props
return (
<View style={styles.container}>
<Image
style = {{backgroundColor:"red" , width:100 , height:100}}
source={require('./images/logo-lecture.png')}/>
</View>
)
}
运行的结果：
运行的结果
以RN创建一个<Image/>为例，这个过程怎么实现的？
首先有react解析Image节点，最终将解析出来的dom通过ReactNativeBaseComponent.js来与原生交互。例如mountComponent在组件挂载的时候调用，这里又回调用UIManager.createView，向原生发送一个创建View的消息。这里主要学习一下Android部分的原理，所以入口就从UIManagerModule开始。
在这之前先必须看一下ViewManger这个类的结构。
20170105112230972.png
ViewManger是为了RN和原生View交互设计的。 JS中所有的View相关的标签都有对应的ViewManager和具体的不同实现。<Image/>对应的就是ReactImageManager。他们通过getName()方法返回的字符串绑定在一起的。所有的ViewManger都会在程序启动的时候都会加载。
UIManagerModule.java
这个主要对接RN的接口，具体的实现在UIImplementation
其中createView方法这样的：
@ReactMethod
public void createView(int tag, String className, int rootViewTag, ReadableMap props) {
.....
mUIImplementation.createView(tag, className, rootViewTag, props);
}
UIImplementation.java
这个类是真正干活的类，功能很多，createView，updateView，measureLayout，dispatchViewUpdates等，其中createView如下：
public void createView(int tag, String className, int rootViewTag, ReadableMap props) {
ReactShadowNode cssNode = createShadowNode(className);
ReactShadowNode rootNode = mShadowNodeRegistry.getNode(rootViewTag);
cssNode.setReactTag(tag);
cssNode.setViewClassName(className);
cssNode.setRootNode(rootNode);
cssNode.setThemedContext(rootNode.getThemedContext());
mShadowNodeRegistry.addNode(cssNode);
ReactStylesDiffMap styles = null;
if (props != null) {
styles = new ReactStylesDiffMap(props);
cssNode.updateProperties(styles);
}
handleCreateView(cssNode, rootViewTag, styles);
}
protected void handleUpdateView(
ReactShadowNode cssNode,
String className,
ReactStylesDiffMap styles) {
if (!cssNode.isVirtual()) {
mNativeViewHierarchyOptimizer.handleUpdateView(cssNode, className, styles);
}
}
在UIImplementation的createView中，先根据className来获取对应ViewaManger，然后通过ViewaManger来创建的节点，更具rootViewTag来获取父节点。然后调用NativeViewHierarchyOptimizer的handleUpdateView方法，将创建的节点传入来创建具体的View。
ReactShadowNode是RN对view的一个特殊封装。RN将每一个View看作一个节点，节点包含哪一个View(className),父节点，子节点，布局信息等。Android中我们常说View树，那么在RN中可能就是节点树来。JS的Image标签就是创建一个LayoutShadowNode类型的节点。
NativeViewHierarchyOptimizer
public void handleCreateView(
ReactShadowNode node,
ThemedReactContext themedContext,
@Nullable ReactStylesDiffMap initialProps) {
....
mUIViewOperationQueue.enqueueCreateView(
themedContext,
node.getReactTag(),
node.getViewClass(),
initialProps);
....
}
字面意思就是view层级优化。这个类其实什么也没做，它处在UIImplementation和UIViewOperationQueue中间，将UIImplementation对因的操作转化成代码上的具体操作并入队。
复制的一段话，说的很好
负责优化本地视图层次结构，同时仍然遵循JS指定的最终UI样式。 基本上，JS向我们发送了一个节点层次结构，虽然在JS中容易理解，但是直接转换为本地视图效率很低。 这个类位于UIManagerModule（直接接收来自JS的视图命令）和UIViewOperationQueue之间，它使本地视图层次上的实际操作入队。它能够从UIManagerModule获取指令，并将输出指令传递到本地视图层次结构，使用较少的视图，实现相同的效果。
UIViewOperationQueue
public void enqueueCreateView(
ThemedReactContext themedContext,
int viewReactTag,
String viewClassName,
@Nullable ReactStylesDiffMap initialProps) {
synchronized (mNonBatchedOperationsLock) {
mNonBatchedOperations.addLast(
new CreateViewOperation(
themedContext,
viewReactTag,
viewClassName,
initialProps));
}
}
JS对用的View操作都会转化程一个UIOperation，加入到队列中。加入队列后什么时候执行呢？UIViewOperationQueue.dispatchViewUpdates方法会遍历左右的UIOperation逐一执行，执行完后就清空队列了。
而createView被当作一个CreateViewOperation加入到队列当作。所以下一步直接转到CreateViewOperation的execute()方法，这里只有调用mNativeViewHierarchyManager.createView一行代码。
一些内置的操作：
ViewOperation：根据Tag，指定原生View去操作；
RemoveRootViewOperation：删除TootView的操作；
UpdatePropertiesOperation：更新属性操作；
UpdateLayoutOperation：更新Native View的位置和大小的操作；
ManageChildrenOperation：管理子视图操作；
RegisterAnimationOperation：注册动画的操作；
AddAnimationOperation ： 增加动画的操作；
SetLayoutAnimationEnabledOperation：设置布局动画是否可用的操作
MeasureOperation：测量操作
NativeViewHierarchyManager
字面意思是View层级管理者。它就是用来管理View的层级关系的。添加子View，移除View，View布局具体的实现都在这里。
public void createView(
ThemedReactContext themedContext,
int tag,
String className,
@Nullable ReactStylesDiffMap initialProps) {
·····
try {
ViewManager viewManager = mViewManagers.get(className);
View view = viewManager.createView(themedContext, mJSResponderHandler);
mTagsToViews.put(tag, view);
mTagsToViewManagers.put(tag, viewManager);
view.setId(tag);
if (initialProps != null) {
viewManager.updateProperties(view, initialProps);
}
} finally {
Systrace.endSection(Systrace.TRACE_TAG_REACT_VIEW);
}
·····
}
craeteView将View加入到NativeViewHierarchyManager的管理当中，此时的View只是一个View,节点树已经有了，但是没有加入到View树当中。RN还有ManageChildrenOperation，执行这个操作的时候才会调用NativeViewHierarchyManager.manageChildren()，才会真正的加入到View树当中。
最后经过一个UpdateLayoutOperation计算一下View的宽高和位置，这样View的位置和宽高就有了。然后交给Android系统去绘制，这样View就出来了。
网友评论