新版react nativee渲染太久了

 
 
 
 
  • Nginx简介    Nginx一是一款轻量级的.高性能的HTTP囷反向代理服务器, 具有很高的稳定性和支持热部署.模块扩展也很容易.当遇到访问的峰值,或者有人恶意发起慢速连接时,也很可能会导致服务器 ...

  •  
  • 1.必须要谈的一点,就是我们学习自动测试不是用来炫耀的,而是用来提升自身能力的. 2.这个框架不是通用框架,只是在这里灌输这个框架的思想,讓每个人写框架都易如反掌 3.如果没有python基础的同学, ...

  •  
     
     
    

前些时间和大家分享了一系列关於 Native For 的文章这两天又对 Native增量热更新的博客进行了填充,增加了图片增量更新的实现方案和过程有兴趣的朋友可以去浏览详细内容。为了方便我将前几篇的博客链接贴出来供大家参考:


本篇博客同样和大家分享关于新版react nativee的内容。想必大家在撸码中都发现了一个问题:从Android原苼界面第一次跳转到新版react nativee界面时会有短暂的白屏过程,然后才会加载出界面下次再跳转就不会出现类似问题。并且当我们杀死应用偅新启动App从Android Activity跳转到RN界面,依然会出现短暂白屏

为什么第一次加载界面会出现短暂白屏呢?大家别忘了的渲染机制是对于JsBundle的加载。项目Φ所有的文件最终会被打包成一个JsBundle文件环境下Bundle文件为:‘index.android.bundle’。系统在第一次渲染界面时会首先加载JsBundle文件。那么问题肯定出现在加载JsBundle这個过程即出现白屏可能是因为JsBundle正在加载。发现了原因我们继续查看源码,看看是否能从源码中得知一二


从源码可以看到,最终调用叻loadApp方法继续跟踪loadApp方法:

既然是createRootView和startReactApplication执行了耗时操作的问题,那么我们只需要将其提前执行创建出ReactRootView并缓存下来。当跳转到新版react nativee界面时直接设置到ContentView即可。有了解决思路又该到我们甩起袖子撸码了。


上述代码很简单包含了三个方法:

从源码分析部分我们知道,集成React

代码很長重点在onCreate方法:

(2)缓存中不存在ReactRootView,直接创建此时和系统帮我们创建ReactRootView没有区别

很明显,我们让加载流程先经过缓存如果缓存中已经存在了RootView,那么就可以直接设置到Activity布局如果缓存中不存在,再去执行创建过程

Ok,到此想必大家都想撸起袖子体验一下了那就开始吧~~ 源碼已分享到Github,别忘了给颗star哦~


将组件放入到一个数组里面然後在渲染的时候,将数组作为参数

就是这个playList的数组如何写?新的组件在哪渲染的 求助各位大神。

我要回帖

更多关于 新版react native 的文章

 

随机推荐