Skip to content

Commit

Permalink
feat(wx-react): 首次渲染之后替换R， 防止页面闪动
Browse files Browse the repository at this point in the history
  • Loading branch information
@ykforerlang
ykforerlang committed Aug 6, 2019
1 parent 4c19656 commit 648deae
Show file tree
Hide file tree
Showing 2 changed files with 56 additions and 44 deletions.
98 changes: 56 additions & 42 deletions packages/wx-react/miniprogram_dist/AllComponent.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,33 +14,6 @@ import reactUpdate from './ReactUpdate'
import shallowEqual from './shallowEqual'
import getObjSubData from './getObjSubData'


function getRAllList(inst) {
const descendantList = []
recursionCollectChild(inst, descendantList)
return descendantList
}

function recursionCollectChild(inst, descendantList) {
const children = inst._c
for (let i = 0; i < children.length; i++) {
const childUuid = children[i]
const child = instanceManager.getCompInstByUUID(childUuid)

recursionCollectChild(child, descendantList)
}

if (inst instanceof HocComponent) {
return
}

if (Object.keys(inst._r).length === 0) {
return
}

descendantList.push(inst)
}

const P_R = Promise.resolve()

/**
Expand Down Expand Up @@ -112,26 +85,24 @@ export class BaseComponent {
const allData = getObjSubData(this._r)
const wxInst = instanceManager.getWxInstByUUID(diuu)

console.log('first wow:', allData, this)
if (Object.keys(allData).length === 0) {
recursionMount(this)
} else {
const start = Date.now()
wxInst.setData({_r: allData}, () => {
const firstReplaceRAllList = getRAllList(this)
console.log('first duration:', Date.now() - start)
const firstReplaceRAllList = getRAllList(this, false)

// 会把this 也收集进来，所以至少要2个
if (firstReplaceRAllList.length > 1) {
console.log('first replace R:', firstReplaceRAllList)
if (firstReplaceRAllList.length > 0) {
const start = Date.now()
wxInst.groupSetData(() => {
for(let i = 0; i < firstReplaceRAllList.length; i ++ ) {
const inst = firstReplaceRAllList[i]
if (inst === this) {
continue
}

const wxItem = inst.getWxInst()
if (i === 0) {
wxItem.setData({_r: inst._r}, () => {
console.log('first replace duration:', Date.now() - start)
recursionMount(this)
})
} else {
Expand Down Expand Up @@ -177,18 +148,24 @@ export class BaseComponent {
return
}
/// groupSetData 来优化多次setData

const topWX = styleUpdater ? styleUpdater.inst : this.getWxInst()

if (firstReplaceRList.length > 0) {
groupPromise.then(() => {
const start = Date.now()
console.log('update Replace R:', firstReplaceRList)
topWX.groupSetData(() => {
for(let i = 0; i < firstReplaceRList.length; i ++ ) {
const inst = firstReplaceRList[i]

const wxItem = inst.getWxInst()

if (i === 0) {
wxItem.setData({_r: inst._r}, frp)
wxItem.setData({_r: inst._r}, () => {
console.log('update Replace duration:', Date.now() - start)
frp()
})
} else {
wxItem.setData({_r: inst._r})
}
Expand All @@ -201,10 +178,14 @@ export class BaseComponent {

topWX.groupSetData(() => {
console.log('update wow:', updaterList)
const start = Date.now()
for(let i = 0; i < updaterList.length; i ++ ) {
const {inst, data} = updaterList[i]
if (i === 0) {
inst.setData(data, gpr)
inst.setData(data, () => {
console.log('update duration:', Date.now() - start)
gpr()
})
} else {
inst.setData(data)
}
Expand All @@ -214,9 +195,9 @@ export class BaseComponent {

/**
* 递归程序。 主要做两个事情
* 1. 构建出updaterList， 包含所以需要更新的微信实例/数据
* 2. 构建出组件完成渲染的Promise 回调关系，方便didUpdate/didMount 生命周期的正确执行
* 3. 构建出firstReplaceRList，包含所以新节点，这些节点需要使用_r 替换R，以免闪屏
* 1. 构建出updaterList， 包含所有此次需要更新的微信实例 + 数据
* 2. 构建出组件完成渲染的Promise 回调关系，方便didUpdate/didMount 等生命周期的正确执行
* 3. 构建出firstReplaceRList，包含所有新节点，这些节点需要使用_r 替换R，以免闪屏
*
* @param doneCb
* @param updaterList
Expand Down Expand Up @@ -248,7 +229,7 @@ export class BaseComponent {
}
})

firstReplaceRList.push(...getRAllList(child))
firstReplaceRList.push(...getRAllList(child, false))
firstReplacePromise.then(() => {
recursionMount(child)
})
Expand All @@ -258,7 +239,7 @@ export class BaseComponent {
} else if (child.firstRender !== FR_DONE && !child.hocWrapped) {
updateObj[`${child._keyPath}R`] = getObjSubData(child._r)

firstReplaceRList.push(...getRAllList(child))
firstReplaceRList.push(...getRAllList(child, true))
firstReplacePromise.then(() => {
recursionMount(child)
})
Expand Down Expand Up @@ -530,3 +511,36 @@ export class HocComponent extends Component {

export class RNBaseComponent {
}


function getRAllList(inst, include) {
const descendantList = []
recursionCollectChild(inst, descendantList)

if (!include) {
descendantList.pop()
}

return descendantList
}

function recursionCollectChild(inst, descendantList) {
const children = inst._c
for (let i = 0; i < children.length; i++) {
const childUuid = children[i]
const child = instanceManager.getCompInstByUUID(childUuid)

recursionCollectChild(child, descendantList)
}

if (inst instanceof HocComponent) {
return
}

if (Object.keys(inst._r).length === 0) {
return
}

descendantList.push(inst)
}

2 changes: 0 additions & 2 deletions packages/wx-react/miniprogram_dist/util.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -122,8 +122,6 @@ export function recursionMount(comp) {
if (comp.isPageComp && !comp.hocWrapped && comp.componentDidFocus) {
comp.componentDidFocus()
}

comp.firstRenderRes && comp.firstRenderRes()
}

export const ReactWxEventMap = {
Expand Down

0 comments on commit 648deae

Please sign in to comment.