深刻Weex系列（六）之Weex渲染流程分析

時間 2019-11-30

標籤深刻 weex 系列渲染流程分析简体版

原文原文鏈接

一、前言

在前兩篇文章中咱們結合源碼學習了Module、Component的註冊、調用、回調等流程，相信你們必定收穫頗多，對Weex的理解也必定越發深刻。git

那麼本篇文章咱們分析Weex的渲染流程，來看一看咱們寫的Js文件是如何在Native端變成Android裏View的。github

二、Weex渲染過程

2.1 渲染觸發點

在Activity中咱們開個某個Weex頁面使用的是WXSDKInstance中的render方法，最終也是按照常規套路經過WXBridge調用Js繼續處理。bash

備註：Js引擎處理後回調Native這一部分要複雜的多，咱們拆分紅幾步來看。微信

2.2 渲染準備

備註：這是渲染準備階段，實際上和上一篇分析Component的調用準備是同樣的；都是加一個任務保存到mNormalTasks。

2.2 渲染流程分析

從上咱們能夠看出真實的渲染過程由WXDomHandler發起，關鍵方法在DOMActionContextImpl和WXComponent中（標出關鍵方法的地方）；也經歷了測量、佈局、繪製、處理事件、設置數據等流程。app

渲染流程很是重要，裏面有不少關鍵步驟，下面咱們一一分析；dom

2.3 calculateLayout

calculateLayout分析：源碼分析

DOMActionContextImpl.calculateLayout()開始，執行到LayoutEngine.layoutNodeImpl()，這步是真實的解析、保存Js中儲存的佈局；layoutNodeImpl()方法長達720行，解析FlexBox佈局，而且保存結果到CSSLayout中。

2.4 createView

/**
    * create view
    */
    public final void createView() {
        mHost = initComponentHostView(mContext);
        if (mHost == null && !isVirtualComponent()) {
            //compatible
            initView();
        }
        if(mHost != null){
            mHost.setId(WXViewUtils.generateViewId());
            ComponentObserver observer;
            if ((observer = getInstance().getComponentObserver()) != null) {
              observer.onViewCreated(this, mHost);
            }
        }
        onHostViewInitialized(mHost);
  }
複製代碼

createView分析：佈局

建立目標Component對象，跟進去能夠看到initComponentHostView方法，就是咱們自定義Component必須重載的方法；

2.5 setLayout

/**
   * layout view
   */
    public final void setLayout(ImmutableDomObject domObject) {
    
        ......
        Spacing parentPadding = (nullParent?new Spacing():mParent.getDomObject().getPadding());
        Spacing parentBorder = (nullParent?new Spacing():mParent.getDomObject().getBorder());
        Spacing margin = mDomObj.getMargin();
        int realWidth = (int) mDomObj.getLayoutWidth();
        int realHeight = (int) mDomObj.getLayoutHeight();
        int realLeft = (int) (mDomObj.getLayoutX() - parentPadding.get(Spacing.LEFT) -
                              parentBorder.get(Spacing.LEFT));
        int realTop = (int) (mDomObj.getLayoutY() - parentPadding.get(Spacing.TOP) -
                             parentBorder.get(Spacing.TOP)) + siblingOffset;
        int realRight = (int) margin.get(Spacing.RIGHT);
        int realBottom = (int) margin.get(Spacing.BOTTOM);
        ......
        mAbsoluteY = (int) (nullParent?0:mParent.getAbsoluteY() + mDomObj.getLayoutY());
        mAbsoluteX = (int) (nullParent?0:mParent.getAbsoluteX() + mDomObj.getLayoutX());
        ......
        setComponentLayoutParams(realWidth, realHeight, realLeft, realTop, realRight, realBottom, rawOffset);
        ......
        
    }
複製代碼

setLayout分析：學習

setLayout()獲取真實的寬高及四個頂點的位置，類比原生Android中的Measure與Layout過程；
setComponentLayoutParams()中轉換原生識別的LayoutParams，而且會調用setLayoutParams()，咱們知道這個方法會調用走原生View的Measure、Layout、Draw等流程；

2.5 addEvents

public void addEvent(String type) {

        ......
        View view = getRealView();
        if (type.equals(Constants.Event.CLICK) && view != null) {
            addClickListener(mClickEventListener);
        } else if ((type.equals(Constants.Event.FOCUS) || type.equals(Constants.Event.BLUR))) {
            addFocusChangeListener(new WXComponent.OnFocusChangeListener() {
                public void onFocusChange(boolean hasFocus) {
                    Map<String, Object> params = new HashMap<>();
                    params.put("timeStamp", System.currentTimeMillis());
                    fireEvent(hasFocus ? Constants.Event.FOCUS : Constants.Event.BLUR, params);
                }
            });
        } else if (view != null &&
                needGestureDetector(type)) {
            if (view instanceof WXGestureObservable) {
                if (mGesture == null) {
                    mGesture = new WXGesture(this, mContext);
                    boolean isPreventMove = WXUtils.getBoolean(getDomObject().getAttrs().get(Constants.Name.PREVENT_MOVE_EVENT), false);
                    mGesture.setPreventMoveEvent(isPreventMove);
                }
                mGestureType.add(type);
                ((WXGestureObservable) view).registerGestureListener(mGesture);
            } else {
                WXLogUtils.e(view.getClass().getSimpleName() + " don't implement " +
                        "WXGestureObservable, so no gesture is supported.");
            }
        } else {
            Scrollable scroller = getParentScroller();
            if (type.equals(Constants.Event.APPEAR) && scroller != null) {
                scroller.bindAppearEvent(this);
            }
            if (type.equals(Constants.Event.DISAPPEAR) && scroller != null) {
                scroller.bindDisappearEvent(this);
            }
        }
    }
複製代碼