记录一次 react/taro 页面加载百分比

最近接手一个需求，写一个h5页面，taro技术栈，语法和react很像，奈何本人对react不熟，但也只能硬接上去。页面内很多内容显示，写成不同的组建，把组建放在一个数组中，再根据字段变化调用不同的组建显示，类似：

// 存放text 组建
 let showTemplate = {
       text1, text2, text3
 }
// 调用
<View>
   {showTemplate[this.state.type]}
</view>

然后这样有个弊端，打开控制台，可以发现，这样每切换一个组建，就会加载组建里面的静态资源，如果文件太大，那么整一个h5页面的过渡效果十分不好，必须做成一个非按需加载的页面。对比vue，这不就是v-show吗，v-if不会进行vue实例的创建，而v-show则只是css的display：none而已，说干就干，代码简单改写，类似：

 <View  style={{display:this.state.type === 'text'?'block':'none'}}>{text}</View>
 <View  style={{display:this.state.type === 'text1'?'block':'none'}}>{text1}</View>
 <View  style={{display:this.state.type === 'text2'?'block':'none'}}>{text2}</View>

问题解决，然而又出现一个问题，由于一次加载所有静态资源，所以加载时间过长，开场动画需要一段时间才能加载完毕，打开控制台，资源主要以图片png和gif的为主，那么，只要监听到所有img标签都加载完成不就可以了？说干就干，代码简单改写，类似：

componentDidMount() {
    const imgs = document.getElementsByTagName("img");
    const len = 0;
    for(let i = 0; i < imgs.length; i++){
          imgs[i].onload = function() {
          len ++;
          const percess = Math.round(len * 100 / imgs.length) // 加载百分比
          if (percess == 100) {
              // 加载完成
          }
        }
      
    }
}

问题解决（方法一定要放在节点都生成后的生命周期）