代码清除页面切换过渡现象
所谓的页面切换过渡现象,指的是假如我现在浏览了A页面,然后去浏览B页面,但是在B页面的被渲染的那一瞬间,上一个被浏览的A页面,会闪现一下,瞬间很短,只有仔细观察,才能看出,但是这个不解决,也不会影响用户体验。我个人感觉还是解决一下为好,这样可以让用户体验效果更好。下面是我的解决方案,放在一个例子里:
render() {
const { currentPromotionUser } = this.promoption;
// 如果用户与尚未加入推广计划,则默认展示协议界面
const children = ((isJoined) => {
/**
* isJoined是bool值,isJoined===true时,显示home页面,isJoined===false时,显示agreement页面。
* isJoined==null,是为了在即将渲染一个页面前,先渲染一个空页面,目的是不让上一个浏览的页面在当前页面刷新时出现闪现的过程。
*/
if (isJoined == null) {
return null;
} else if (isJoined === true) {
return this.props.children;
} else {
return <Agreement/>
}
})(_.get(currentPromotionUser, 'isJoined', null));
return (
<div className="page-group">
{children}
</div>
)
}
其实我个人更感觉if (isJoined == null) {return null;}这句代码,是做了一个假的数据清除,哈哈哈哈,因为它只是先渲染了一个空页面来遮挡着上一个被浏览过的页面