ArkUI Engine - UI重新绘制

本文为稀土掘金技术社区首发签约文章，30天内禁止转载，30天后未获授权禁止转载，侵权必究！

前文概要

通过前两篇文章，我们知道了一个@Component 修饰的TS类是如何生成UI的具体过程。在ArkUI中，每一个用ts编写的控件，都可以在C++中找到最终的Component映射。接下来我们将继续学习，ArkUI中，如果UI发生改变时，engine是如何完成Component与Element的刷新。学习完本篇，你将会了解到@State 装饰器修饰的变量如何触发UI的刷新，同时也能够了解到Element是如何驱动元素发生更新。

UI重新绘制

我们把前两章的Index例子做一个小改动，在这里我们添加一个isShow的State变量，当isShow为True时，会显示父布局为Column，Text内容为"Column"的一个文本。当isShow为false时，父布局为Row，Text内容为"Row"。同时我们也添加一个点击事情，当每次点击时，都会把当前isShow变量赋值为相反值，代码如下：

@Component
struct Index {
  @State isShow:Boolean = false
build() {
    Row() {
      if (this.isShow){
        Column() {
          Text("Column")
        }
      }else {
        Row(){
          Text("Row")
        }
      }
    }
    .height('100%')
    .onClick((event)=>{
      this.isShow = !this.isShow
    })
  }
}

这里例子非常简单，当触发UI刷新时，Text的内容与父容器都会发生改变，产生一次UI的刷新。对应的abc字节码反编译代码如下：

class Index extends ViewPU {
    //构造函数
    constructor(parent, params, __localStorage, elmtId = -1) {
        super(parent, __localStorage, elmtId);
        // 创建一个ObservedPropertyObjectPU对象，它是后面UI刷新的起点，其中创建了一个隐藏变量__isShow
        this.__isShow = new ObservedPropertyObjectPU(false, this, "isShow");
        this.setInitiallyProvidedValue(params);
    }
    // 初始化isShow的值为指定的默认值false
    setInitiallyProvidedValue(params) {
        if (params.isShow !== undefined) {
            this.isShow = params.isShow;
        }
    }
    updateStateVars(params) {
    }
    purgeVariableDependenciesOnElmtId(rmElmtId) {
        this.__isShow.purgeDependencyOnElmtId(rmElmtId);
    }
    aboutToBeDeleted() {
        this.__isShow.aboutToBeDeleted();
        SubscriberManager.Get().delete(this.id__());
        this.aboutToBeDeletedInternal();
    }
    get isShow() {
        return this.__isShow.get();
    }
    set isShow(newValue) {
        this.__isShow.set(newValue);
    }
    initialRender() {
        //observeComponentCreation 构造组件树
        this.observeComponentCreation((elmtId, isInitialRender) => {
            ViewStackProcessor.StartGetAccessRecordingFor(elmtId);
            Row.create();
            Row.height('100%');
            Row.onClick((event) => {
                // 发生改变时，调用set isShow(newValue) 方法
                this.isShow = !this.isShow;
            });
            if (!isInitialRender) {
                Row.pop();
            }
            ViewStackProcessor.StopGetAccessRecording();
        });
        this.observeComponentCreation((elmtId, isInitialRender) => {
            ViewStackProcessor.StartGetAccessRecordingFor(elmtId);
            If.create();
            if (this.isShow) {
                this.ifElseBranchUpdateFunction(0, () => {
                    this.observeComponentCreation((elmtId, isInitialRender) => {
                        ViewStackProcessor.StartGetAccessRecordingFor(elmtId);
                        Column.create();
                        if (!isInitialRender) {
                            Column.pop();
                        }
                        ViewStackProcessor.StopGetAccessRecording();
                    });
                    this.observeComponentCreation((elmtId, isInitialRender) => {
                        ViewStackProcessor.StartGetAccessRecordingFor(elmtId);
                        Text.create("Column");
                        if (!isInitialRender) {
                            Text.pop();
                        }
                        ViewStackProcessor.StopGetAccessRecording();
                    });
                    Text.pop();
                    Column.pop();
                });
            }
            else {
                this.ifElseBranchUpdateFunction(1, () => {
                    this.observeComponentCreation((elmtId, isInitialRender) => {
                        ViewStackProcessor.StartGetAccessRecordingFor(elmtId);
                        Row.create();
                        if (!isInitialRender) {
                            Row.pop();
                        }
                        ViewStackProcessor.StopGetAccessRecording();
                    });
                    this.observeComponentCreation((elmtId, isInitialRender) => {
                        ViewStackProcessor.StartGetAccessRecordingFor(elmtId);
                        Text.create("Row");
                        if (!isInitialRender) {
                            Text.pop();
                        }
                        ViewStackProcessor.StopGetAccessRecording();
                    });
                    Text.pop();
                    Row.pop();
                });
            }
            if (!isInitialRender) {
                If.pop();
            }
            ViewStackProcessor.StopGetAccessRecording();
        });
        If.pop();
        Row.pop();
    }
    rerender() {
        this.updateDirtyElements();
    }
}

学习完上一章后，我们对以上代码一定不陌生。当定义了一个@State 装饰器修饰的变量时，其实会在对应的js类中，同步生成一个状态属性，比如Link还是其他的装饰器也一样，这里State生成的是ObservedPropertyObjectPU类型的变量，同时也会根据@State修饰的变量名添加"__"作为ObservedPropertyObjectPU对象的名称。当isShow变量改变时，最终会驱动ObservedPropertyObjectPU对象触发UI刷新，这里的关键就是ObservedPropertyObjectPU持有了当前Index类的this指针。

ObservedPropertyObjectPU 类继承于ObservedPropertyPU，关键的刷新方法都在ObservedPropertyPU中

// class definitions for backward compatibility
class ObservedPropertyObjectPU<T> extends ObservedPropertyPU<T> {

}

class ObservedPropertyPU<T> extends ObservedPropertyAbstractPU<T>
  implements PeerChangeEventReceiverPU<T>, ObservedObjectEventsPUReceiver<T> {

  private wrappedValue_: T;
  
  constructor(localInitValue: T, owningView: IPropertySubscriber, propertyName: PropertyInfo) {
    super(owningView, propertyName);
   
    this.setValueInternal(localInitValue);
  }

本质上，ObservedPropertyPU持有了owningView的指针，当属性发生改变时，其实会通过监听变化，触发一系列的回调，比如当属性值发生改变时，会触发notifyPropertyHasChangedPU方法

  protected notifyPropertyHasChangedPU() {
    stateMgmtProfiler.begin("ObservedPropertyAbstractPU.notifyPropertyHasChangedPU");
    stateMgmtConsole.debug(`${this.debugInfo()}: notifyPropertyHasChangedPU.`)
    if (this.owningView_) {
      if (this.delayedNotification_ == ObservedPropertyAbstractPU.DelayedNotifyChangesEnum.do_not_delay) {
        // send viewPropertyHasChanged right away
        //这里的owningView_就是传入的this
        this.owningView_.viewPropertyHasChanged(this.info_, this.dependentElmtIdsByProperty_.getAllPropertyDependencies());
      } else {
        // mark this @StorageLink/Prop or @LocalStorageLink/Prop variable has having changed and notification of viewPropertyHasChanged delivery pending
        this.delayedNotification_ = ObservedPropertyAbstractPU.DelayedNotifyChangesEnum.delay_notification_pending;
      }
    }

通过持有owningView_，当属性发生改变的时候，就可以让owningView_触发UI重新绘制，viewPropertyHasChanged调用如下：

viewPropertyHasChanged(varName: PropertyInfo, dependentElmtIds: Set<number>): void {
      省略前面无关代码

      if (dependentElmtIds.size && !this.isFirstRender()) {
        if (!this.dirtDescendantElementIds_.size && !this.runReuse_) {
          // mark ComposedElement dirty when first elmtIds are added
          // do not need to do this every time
          this.markNeedUpdate();
        }

最终，调用的是markNeedUpdate 方法。markNeedUpdate方法我们在导读篇有介绍，它是整个ArkUI更新模型NativeViewPartialUpdate中的一个基类方法，内容实现是在C++层中

declare class NativeViewPartialUpdate {
  constructor(    );
  markNeedUpdate(): void;
  findChildById(compilerAssignedUniqueChildId: string): View;
  syncInstanceId(): void;
  isFirstRender(): boolean;
  restoreInstanceId(): void;
  static create(newView: NativeViewPartialUpdate): void;
  finishUpdateFunc(elmtId: number): void;
  isLazyItemRender(elmtId : number) : boolean;
  setCardId(cardId: number): void;
  getCardId(): number;
  resetRecycleCustomNode(): void;
}

对应的C++实现为

void JSViewPartialUpdate::JSBind(BindingTarget object)
{
    JSClass<JSViewPartialUpdate>::Declare("NativeViewPartialUpdate");
    MethodOptions opt = MethodOptions::NONE;

    JSClass<JSViewPartialUpdate>::StaticMethod("create", &JSViewPartialUpdate::Create, opt);
    JSClass<JSViewPartialUpdate>::StaticMethod("createRecycle", &JSViewPartialUpdate::CreateRecycle, opt);
    JSClass<JSViewPartialUpdate>::Method("markNeedUpdate", &JSViewPartialUpdate::MarkNeedUpdate);
    JSClass<JSViewPartialUpdate>::Method("syncInstanceId", &JSViewPartialUpdate::SyncInstanceId);
    JSClass<JSViewPartialUpdate>::Method("restoreInstanceId", &JSViewPartialUpdate::RestoreInstanceId);
    JSClass<JSViewPartialUpdate>::CustomMethod("getInstanceId", &JSViewPartialUpdate::GetInstanceId);
    JSClass<JSViewPartialUpdate>::Method("markStatic", &JSViewPartialUpdate::MarkStatic);
    JSClass<JSViewPartialUpdate>::Method("finishUpdateFunc", &JSViewPartialUpdate::JsFinishUpdateFunc);
    JSClass<JSViewPartialUpdate>::Method("setCardId", &JSViewPartialUpdate::JsSetCardId);
    JSClass<JSViewPartialUpdate>::CustomMethod("getCardId", &JSViewPartialUpdate::JsGetCardId);
    JSClass<JSViewPartialUpdate>::Method("elmtIdExists", &JSViewPartialUpdate::JsElementIdExists);
    JSClass<JSViewPartialUpdate>::CustomMethod("isLazyItemRender", &JSViewPartialUpdate::JSGetProxiedItemRenderState);
    JSClass<JSViewPartialUpdate>::CustomMethod("isFirstRender", &JSViewPartialUpdate::IsFirstRender);
    JSClass<JSViewPartialUpdate>::CustomMethod(
        "findChildByIdForPreview", &JSViewPartialUpdate::FindChildByIdForPreview);
    JSClass<JSViewPartialUpdate>::CustomMethod(
        "resetRecycleCustomNode", &JSViewPartialUpdate::JSResetRecycleCustomNode);
    JSClass<JSViewPartialUpdate>::CustomMethod(
        "queryNavDestinationInfo", &JSViewPartialUpdate::JSGetNavDestinationInfo);
    JSClass<JSViewPartialUpdate>::CustomMethod("getUIContext", &JSViewPartialUpdate::JSGetUIContext);
    JSClass<JSViewPartialUpdate>::InheritAndBind<JSViewAbstract>(object, ConstructorCallback, DestructorCallback);
}

markNeedUpdate

当UI需要重新绘制的时候，就会调用markNeedUpdate进行标记，

void JSViewPartialUpdate::MarkNeedUpdate()
{
    needsUpdate_ = ViewPartialUpdateModel::GetInstance()->MarkNeedUpdate(viewNode_);
}

ViewPartialUpdateModel的实现有几种，默认模型为ViewPartialUpdateModelImpl

bool ViewPartialUpdateModelImpl::MarkNeedUpdate(const WeakPtr<AceType>& node)
{
    ACE_SCOPED_TRACE("JSView::MarkNeedUpdate");
    auto weakElement = AceType::DynamicCast<ComposedElement>(node);
    if (weakElement.Invalid()) {
        LOGE("Invalid Element weak ref, internal error");
        return false;
    }
    //走到这里返回值就永远是true了
    auto element = weakElement.Upgrade();
    if (element) {
        element->MarkDirty();
    }
    return true;
}

首先是拿到当前元素的element，如果它是ComposedElement的话，就可以调用当前element的MarkDirty方法。这里需要注意的是，element是ComposedElement才需要标记为dirty。

element 的类型取决于对应的Component，我们在JSView 与C++这篇说过，Component会通过CreateElement 创建对应的Element，这两者的关系将贯穿整个ArkUI中。

这里有一个细节需要我们注意，这里的element它并不一定是ComposedElement，但是无论是与否返回结果都是true，都需要更新。

如果需要更新，会在每个jsview进行刷新时调用ExecuteRerender方法，触发rerender过程。

    auto updateFunction = [weak = AceType::WeakClaim(this)]() -> void {
        auto jsView = weak.Upgrade();
        CHECK_NULL_VOID(jsView);
        ContainerScope scope(jsView->GetInstanceId());
        if (!jsView->needsUpdate_) {
            return;
        }
        jsView->needsUpdate_ = false;
        {
            ACE_SCOPED_TRACE("JSView: ExecuteRerender");
            jsView->jsViewFunction_->ExecuteRerender();
        }
        for (const UpdateTask& updateTask : jsView->pendingUpdateTasks_) {
            ViewPartialUpdateModel::GetInstance()->FlushUpdateTask(updateTask);
        }
        jsView->pendingUpdateTasks_.clear();
    };

这里的rerender 对应着上文反编译的rerender函数，由C++发起到js的调用。rerender方法通常是由arkcomplier自动生成，不对开发者暴露，方便后续的绘制调整

    生成类中
    rerender() {
        this.updateDirtyElements();
    }

rerender过程还是比较简单的，同时与MarkNeedUpdate之后的流程有相交关系，读者可以自行阅读，这里先回到我们的MarkNeedUpdate主线。

ComposedElement对应的是ComposedComponent，它并不具备渲染能力，但是具备子控件的逻辑处理能力。

// ComposedElement just maintain a child element may have render node.
class ACE_EXPORT ComposedElement : public Element {
    DECLARE_ACE_TYPE(ComposedElement, Element);

相反，具备渲染能力的是RenderElement

// RenderElement will have a RenderNode and displays in the screen.
class ACE_EXPORT RenderElement : public Element {
    DECLARE_ACE_TYPE(RenderElement, Element);

这里的MarkDirty会把当前加入element加入dirty列表，并标记需要Rebuild

void Element::MarkDirty()
{
    RefPtr<PipelineContext> context = context_.Upgrade();
    if (context) {
        context->AddDirtyElement(AceType::Claim(this));
        MarkNeedRebuild();
    }
}

我们最外层的这个Index，其实就是组合了所有可渲染的Row，Column等RenderElement，因此接下来就是等engine进行rebuild

Rebuild

Rebuild过程中，有着最关键的3步

void Element::Rebuild()
{ 
    //判断是否需要被rebuild
    if (!needRebuild_) {
        return;
    }

    needRebuild_ = false;

    // When rebuild comes, newComponent_ should not be null, and will go to these 3 steps:
    // 1. Update self using new component
    // 2. PerformBuild will build and update child recursively
    // 3. Finish update and release the new component
    Update();
    PerformBuild();
    SetNewComponent(nullptr);
}

1. 通过Update方法，使用newComponent_这个变量去进行调整，我们还是以ComposedElement举例子，通过当前最新的component_，去更新整个element树，同时清除MarkNeedUpdate函数中的needupdate标记。

void ComposedElement::Update()
{
    const RefPtr<ComposedComponent> compose = AceType::DynamicCast<ComposedComponent>(component_);
    if (compose != nullptr) {
        name_ = compose->GetName();
        SetElementId(compose->GetElementId());
        if (id_ != compose->GetId()) {
            auto context = context_.Upgrade();
            if (addedToMap_ && context != nullptr) {
                context->RemoveComposedElement(id_, AceType::Claim(this));
                context->AddComposedElement(compose->GetId(), AceType::Claim(this));
            }
            id_ = compose->GetId();
        }
        compose->ClearNeedUpdate();
    }
    if (HasPageTransitionFunction()) {
        auto pageElement = GetPageElement();
        if (pageElement) {
            pageElement->SetPageTransitionFunction(std::move(pageTransitionFunction_));
        }
    }
}

2. 通过PerformBuild方法，进行当前范围内的子控件重建，ComposedComponent为例子就是需要通知子控件进行更新

void ComposedElement::PerformBuild()
{
    auto context = context_.Upgrade();
    .... 
    auto child = children_.empty() ? nullptr : children_.front();
    auto composedComponent = AceType::DynamicCast<ComposedComponent>(component_);
    if (composedComponent) {
        auto composedChild = composedComponent->GetChild();
        if (HasRenderFunction() && composedComponent->GetNeedReserveChild()) {
            auto flexItem = AceType::DynamicCast<SoleChildComponent>(composedChild);
            if (flexItem) {
                flexItem->SetChild(component);
                UpdateChild(child, flexItem);
                return;
            }
        }
    }

    UpdateChild(child, component);
}

UpdateChild最终调用UpdateChildWithSlot 方法进行重建，这里面的逻辑也比较有意思，判断UI是更新还是删除还是新建，其实都是根据child 与当前newComponent决定的，下面是4种case:分别对应着：空状态，新增，删除，更新流程，从而改变整个element树

RefPtr<Element> Element::UpdateChildWithSlot(
    const RefPtr<Element>& child, const RefPtr<Component>& newComponent, int32_t slot, int32_t renderSlot)
{
    // Considering 4 cases:
    // 1. child == null && newComponent == null  -->  do nothing
    如果Element 为 null 并且 Component为null，则什么也不做
    if (!child && !newComponent) {
        return nullptr;
    }

    // 2. child == null && newComponent != null  -->  create new child configured with newComponent
    新增：child == null && newComponent != null：通过Component建立对应的element
    if (!child) {
        auto newChild = InflateComponent(newComponent, slot, renderSlot);
        ElementRegister::GetInstance()->AddElement(newChild);
        return newChild;
    }

    // 3. child != null && newComponent == null  -->  remove old child
   删除：child != null && newComponent == null：移除elemnt
    if (!newComponent) {
        ElementRegister::GetInstance()->RemoveItemSilently(child->GetElementId());
        DeactivateChild(child);
        return nullptr;
    }

    // 4. child != null && newComponent != null  -->  update old child with new configuration if possible(determined by
    //    [Element::CanUpdate]), or remove the old child and create new one configured with newComponent.
    更新：child != null && newComponent != null
    auto context = context_.Upgrade();
    不支持更新，那么删除旧的element，添加新的element
    if (!child->CanUpdate(newComponent)) {
        // Can not update
        auto needRebuildFocusElement = AceType::DynamicCast<Element>(GetFocusScope());
        if (context && needRebuildFocusElement) {
            context->AddNeedRebuildFocusElement(needRebuildFocusElement);
        }
        ElementRegister::GetInstance()->RemoveItemSilently(child->GetElementId());
        DeactivateChild(child);
        auto newChild = InflateComponent(newComponent, slot, renderSlot);
        ElementRegister::GetInstance()->AddElement(newChild);
        return newChild;
    }
    
    .....
    能够更新
     auto newChild = DoUpdateChildWithNewComponent(child, newComponent, slot, renderSlot);
    if (newChild != nullptr) {
        newChild->SetElementId(newComponent->GetElementId());
        ElementRegister::GetInstance()->AddElement(newChild);
    }
    return newChild;

    ..... 
    return newChild;
}

值得注意的是更新流程，更新流程取决于element的CanUpdate方法，分为不可更新与能够更新两种情况。

不可更新	可更新
删除当前element树的旧element，然后通过Component生成一个新的element再加入	通过新的Component配置去更新element

这里的CanUpdate取决于具体Element，我们拿ifelse来说

如果isShow都是true，那么branchId就是同一个，就可以直接走更新流程，提高效率，而不是删除旧的element再添加

Row() {
      if (this.isShow){
        Column() {
          Text("Column")
        }
      }else {
        Row(){
          Text("Row")
        }
      }
    }

3. SetNewComponent：把需要更新的Compoent设置为null，component_就为null，不会再次发起rebuild

    virtual void SetNewComponent(const RefPtr<Component>& newComponent)
    {
        component_ = newComponent;
        if (newComponent) {
            retakeId_ = newComponent->GetRetakeId();
            componentTypeId_ = AceType::TypeId(component_);
            ignoreInspector_ = newComponent->IsIgnoreInspector();
            SetElementId(newComponent->GetElementId());
            MarkNeedRebuild();
        }
    }

总结

通过以一个@State装饰器例子出发，我们能够学习到ArkUI绘制链路的一个全过程，通过学习这个链路，读者应该能更加明白Componet与 Element的联系。对于想要接下来学习任何ArkUI的控件源码，我们都可以通过这个思路，从js到c++整个链路走下去。