@bytedance/byte_global_viewpool

ohpm install @bytedance/byte_global_viewpool

// 启动阶段
let config = new ViewPoolConfig()
this.initConifg(config)
ViewPoolManager.getInstance().initViewPoolConfig(config) // 设置配置
ViewPoolManager.getInstance().initContext(this.context) // 设置Context
ViewPoolManager.getInstance().setEnable(true) // 全局控制组件全局复用池的开关，true为打开。

function initConfig(config: ViewPoolConfig) {
    config.enablePreCreateWhenEmpty = true // 当复用池最后一个节点使用完时，是否使用闲时预创建该类型节点
    /*
        export function getAuthorInfoSliceParams(): ESObject
        {
              return {vm : new AuthorInfoSliceViewModel()}
        }        
    */
    // preCreateDataFuncMap要配合enablePreCreateWhenEmpty使用，只有设置了数据生成function的类型才能走闲时创建
    config.preCreateDataFuncMap.set("type", getAuthorInfoSliceParams)
    config.preCreateCountWhenEmpty = 2 // 目前没有在使用
    config.nodeMaxCount = 20 // 每个节点最大缓存数量
}

  onWindowStageCreate(windowStage: window.WindowStage): void {
    windowStage.loadContent('pages/Index', (err) => {
      ViewPoolManager.getInstance().setUIContext(windowStage.getMainWindowSync().getUIContext())
    });
  }

// 第一步：业务组件提供全局创建Builder，并用WrapperBuilder封装
export const gContentSliceWrapper: WrappedBuilder<ESObject> = wrapBuilder<ESObject>(ContentSliceBuilder)

@Builder
export function ContentSliceBuilder($$: ESObject) {
  ContentSlice({
    mText: $$.mText
  })
}

// 第二步：使用Module接入xxx
  "dependencies": {
    "byte_global_viewpool": "file:../byte_global_viewpool"
  }
  
// 第三步：接入位置使用ViewPoolContainer容器封装即可
type：复用类型，一般为组件名
params：即传参
builder：组件全局WrapperBuilder
ViewPoolContainer({
    type: ViewPoolTypeConstants.CONTENT_SLICE,
    params: {
        mText: "我是复用池Text"
    },
    builder: gContentSliceWrapper
})

第一步：业务组件提供全局创建Builder，同时提供获取预创建数据的function，这里一般都是空model
export const gContentSliceWrapper: WrappedBuilder<ESObject> = wrapBuilder<ESObject>(ContentSliceBuilder)

// 这个函数用于获取预创建数据，要保证数据每次获取引用不一致
export function getContentSliceParams(): ESObject
{
  return {mText : "预创建组件"}
}

@Builder
export function ContentSliceBuilder($$: ESObject) {
  ContentSlice({
    mText: $$.mText
  })
}

第二步：使用ViewPoolManager preCreateBuilderOnIdleFrame通过vsync周期内的OnIdle时机预创建
/*
* @description 通过UIContext的OnIdle时机预创建组件节点，下次使用快速复用。
* @param uiContext 组件的上下文，与WindowStage绑定，即窗口。
* @param builder 组件全局创建Builder入口
* @param data 这个需要重点关注，需要构建一个空的ViewModel对象，否则会崩溃
* @param type 复用的类型
* @param timeout(ns) onIdle剩余时间阈值，大于这个阈值才会预创建
* @param count 预创建的数量，默认为1
* @param isMeasure 是否主动调用framnode.measure，默认为false。主要为lynx卡片预创建使用
* */
  preCreateBuilderOnIdleFrame(uiContext: UIContext, builder: WrappedBuilder<ESObject>, data: ESObject, type: string, timeout: number, count: number = 1, isMeasure: boolean = false) {
      ...
  }
  
  // 注意这里走的vsync OnIlde的时机预创建，当vysnc剩余时间大于timeout(这里设置的是4ms)才会预创建
  // 因此预创建的组件要保证4ms能渲染出来，否则可能会掉帧
 ViewPoolManager.getInstance().preCreateBuilderOnIdleFrame(uiContext, gAuthorInfoSliceWrapper, getAuthorInfoSliceParams(),
      ViewPoolTypeConstants.UGC_POSTCARD_AUTHOR_INFO_SLICE, 4000000, 4)

启动APP，进入Index页面
ContentSliceTAG aboutToAppear 我不是复用池Text // 非复用池组件走正常生命周期
ContentSliceTAG aboutToAppear 我是复用池Text // 复用池组件，由于没有预创建的组件进入池子，因此走正常的生命周期
// 预创建4个ContentSlice组件，生命周期先创建再回收，符合预期
ContentSliceTAG aboutToAppear 预创建组件
ContentSliceTAG aboutToRecycle 预创建组件
ContentSliceTAG aboutToAppear 预创建组件
ContentSliceTAG aboutToRecycle 预创建组件
ContentSliceTAG aboutToAppear 预创建组件
ContentSliceTAG aboutToRecycle 预创建组件
ContentSliceTAG aboutToAppear 预创建组件
ContentSliceTAG aboutToRecycle 预创建组件

跳转进入Index1页面
ContentSliceTAG aboutToAppear 我不是复用池Text // 非复用池组件走正常生命周期
ContentSliceTAG aboutToReuse 我是复用池Text // 复用池组件，复用池有缓存直接走aboutToReuse，不需要走重新创建

返回Index页面
ContentSliceTAG aboutToRecycle 我是复用池Text // 复用池组件回收到复用池

Copyright (2024) Bytedance Ltd. and/or its affiliates

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

   http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.