深刻Weex系列（五）之Component组件源码解析

一、前言

在上一篇文章《深刻Weex系列（四）之Module组件源码解析》中咱们结合源码学习了Module的注册、调用、回调等流程，而且分析一个Weex自带Module的实现。

那么本篇文章咱们开始分析Weex的另外一个重要组件Component，关于Component的注册、调用等分析本文为你娓娓道来。

二、初始Component

2.1 Component的定位

在《Android 扩展》中咱们能够看到Component的定位：

Component 扩展 实现特别功能的Native控件。例如：RichTextview，RefreshListview 等。

你们知道Android的四大组件中用户惟一有感知的就是Activity，而在Weex的这些组件中用户惟一有感知的也就是Component。实际上它就是Weex里的Widget，好比咱们在WeexList中开发的Js代码中写的那些控件，最终在Native都是一个个的Component。

2.2 Component的使用

2.2.1 内置Component

对于普通的界面开发，咱们通常不会见到Component的踪影，由于Weex已经提供了一套基础的Component组件与基础Html标签的对应，例如基础Component组件的注册：

registerComponent(
        new SimpleComponentHolder(
            WXImage.class,
            new WXImage.Ceator()
        ),false,WXBasicComponentType.IMAGE,WXBasicComponentType.IMG
    );
    registerComponent(WXBasicComponentType.CELL, WXCell.class, true);
    registerComponent(WXBasicComponentType.INDICATOR, WXIndicator.class, true);
    registerComponent(WXBasicComponentType.VIDEO, WXVideo.class, false);
    registerComponent(WXBasicComponentType.INPUT, WXInput.class, false);
    registerComponent(WXBasicComponentType.TEXTAREA, Textarea.class,false);
    registerComponent(WXBasicComponentType.SWITCH, WXSwitch.class, false);
复制代码

2.2.2 自定义Component

项目中总有些效果是内置的Component没法实现的，**此时咱们就要像自定义控件同样自定义Component，具体实例能够参考WeexList中的CircleImageView与RefreshView两个自定义Component。**下面主要说下注意事项：

• 自定义Component须要提供的方法上加上注解WXComponentProp，并加上name，做为Js端调用的方法名；

@WXComponentProp(name = "setSrc")
    public void setImage(String url) {
        
    }
复制代码

• Weex初始化的时候注册这个Component；

WXSDKEngine.registerComponent("circleImageView", CircleImageView.class);
复制代码

• Js端的使用；

<circleImageView :setSrc="item.bphoto" style="width:100;height:100"></circleImageView>
复制代码

注意这个 :setSrc 就是上面注解上的name；

三、Component源码分析

3.1 Component注册

Component的注册和Module很像，你们从时序图上能够看出有几个很熟悉的类；Component一样分为本地注册与Js注册；

• 本地注册

  • 一样由WXSDKEngine发起，须要注意IFComponentHolder中的loadIfNonLazy，会判断Component是否是lazy（为提高初始化效率），不是lazy的话则直接解析这个Component，获取其Method信息保存；是Lazy的话则在第一次使用的时候解析、保存；能够类比Module是否是global；
  • 实际上仍是保存了本地Component与Js端的一个对应；

• Js注册

  • Js注册更和Module的Js注册没有区别，一样最终也是经过WXBridge执行的与Js交互；

3.2 Component调用

以自定义Component的方法调用为例，Component的调用相对比较复杂，咱们拆分红两步来看，调用准备和调用执行；

调用准备说明：

• 照例Js的调用由WXBridge开始；
• 将Js调用的任务封装成一个DOMAction；
• 而后由WXDomHandler将任务切换到Dom线程也就是主线程执行；
• 接下来的步骤就是在DOMActionContextImpl的任务注册了；

@Override
    public void postRenderTask(RenderAction action) {
        mNormalTasks.add(new RenderActionTask(action, mWXRenderManager.getRenderContext(mInstanceId)));
        mDirty = true;
    }
复制代码

调用执行说明：

• 执行由WXDomHandler发起，触发绘制；
• 而后到了DOMActionContextImpl中的layout方法————》其中有一个consumeRenderTasks方法，从名字咱们就能够看出是消费RenderTask的（备注：此处对应了保存任务的mNormalTasks）；
• 而后RenderActionTask调用executeRender方法，开始触发执行；
• 最终是在WXComponent中包装成MethodInvoker，反射调用执行；

3.3 Component源码盘点

经过上述对Component注册、调用等的源码分析，咱们能够看到Component相比较Module仍是比较复杂的。若是你们仔细跟Component源码的话会发现一个问题：第一步调用准备和第二步调用执行是如何串起来的？

在第一步调用准备结束以后，只是将任务加到了mNormalTasks保存，并无任何执行任务的代码，那第二步调用执行是如何被调用的？ 这个问题也困扰了我若干分钟。

下面说说我对这块的探索：Weex的绘制逻辑和Android原生很相似，Android会每隔16毫秒发出一次VSYNC信号触发对UI进行渲染，而Weex也会每隔16毫秒发出一个消息触发绘制，具体的逻辑在WXDomHandler中的WX_DOM_BATCH类型消息中；

public class WXDomHandler implements Handler.Callback {
    
  @Override
  public boolean handleMessage(Message msg) {
        if (!mHasBatch) {
            mHasBatch = true;
            mWXDomManager.sendEmptyMessageDelayed(WXDomHandler.MsgType.WX_DOM_BATCH, DELAY_TIME);
        }
        case MsgType.WX_DOM_BATCH:
            mWXDomManager.batch();
            mHasBatch = false;
            break;
  }
}
复制代码

从mWXDomManager.batch()开始后续的逻辑就串起来了，DOMActionContextImpl中的consumeRenderTasks方法对RenderTask进行消费也就是第一步调用准备Task的执行；

四、内置组件

Weex对经常使用控件都进行了封装具体在com.taobao.weex.ui.component下能够找到，一些文档上没写的属性之类的能够在源码中查找，毕竟源码面前，了无秘密。

下面咱们简单看一个经常使用的控件：列表控件，Weex里内置了WXListComponent来支持列表控件；

@Component(lazyload = false)
public class WXListComponent extends BasicListComponent<BounceRecyclerView> {
    ......
    
    @WXComponentProp(name = Constants.Name.COLUMN_GAP)
    public void setColumnGap(float columnGap) throws InterruptedException {
        if(mRecyclerDom != null && mRecyclerDom.getColumnGap() != mColumnGap) {
            markComponentUsable();
            updateRecyclerAttr();
            WXRecyclerView wxRecyclerView = getHostView().getInnerView();
            wxRecyclerView.initView(getContext(), mLayoutType, mColumnCount, mColumnGap, getOrientation());
        }
    }
    
    ......
}
复制代码

能够看出：

• WXListComponent基于RecycleView，这样View的复用是有保障的；
• lazyload为false，也就是注册即解析（重量级组件优先级就是高）；
• 提供了类如setColumnGap来设置列间隔等方法；

对于咱们自定义的Component均可以参照这个思路，具体实例能够参考WeexList。

五、Component总结

• Component的定位是实现特别功能的Native控件；
• Component的源码实现相较于Module更加复杂，尤为是从调用准备到调用执行这个断点的连接；
  • 调用准备是包装成RenderTask，而后加到集合保存；
  • 调用执行是RenderTask的执行过程，最终是方法的反射调用；
  • 两步之间的断点连接是由Weex的渲染机制保证的；

欢迎持续关注Weex源码分析项目：Weex-Analysis-Project

欢迎关注微信公众号：按期分享Java、Android干货！