ReactNative项目实战优化之路

ReactNative实战优化之路1.关于ReactNativeWhatReactNativeReactNative让开发者使用JavaScript和React编写应用，利用相同的核心代码就可以创建基于Web，iOS和Android平台的原生应用。Facebook在2015.9.15发布了ReactNativeforAndroid，把JavaScript开发技术扩展到了Android平台，至此已覆盖当流主流平台。ReactNativeAFRAMEWORKFORBUILDINGNATIVEAPPSUSINGREACTLearnOnce,WriteAnywhere11/9/1411/7/2611/6/611/4/1711/11/312/2/1111/12/23VersionofReactNative12/7/1012/5/2112/4/11112131415161718192021222324252627QzoneQQ两个版本/月QzoneWhoUseReactNativeWhoUseReactNativeInside情侣空间话题圈留言板消息流资料卡K歌大赛页ReactNative优劣对比优势劣势原生控件的体验Web的版本节奏Web的开发效率跨平台版本支持度Android4.1(API16)&iOS7.0项目尚不成熟，容易Crash，部分机器存在兼容性问题性能，在高低端机呈现两极Android仅基于Gradle，目前业界较多大平台项目均基于Ant，如Qzone，手Q等ReactNative整体流程JsBundle1APPJsBundle2SVRLaunchFile?Data/FileJSCRenderHttpHeaderJsBundle1JsBundle2NativeUI展示解析JS，桥接JSJava业务逻辑ReactNative原理哈哈JSCApplicationCodeJSEmojText/ReactCoreC++ReactNativeForAndroid架构JavaJsFrescoOkHttpSupportUtilsJSCBridgeJSLoaderUtilsComponentLifecycleDataLayout{moduleID,methodID,args}{moduleID,methodID,args}{moduleID,methodID,args}{moduleID,methodID,args}ReactNative通信VideoPicShareAppRegistryEventEmitter…VideoPicShareAppRegistryEventEmitter…__fbBatchedBridgeConfig.Java|.mJavaRegistry+JSRegistry.JsJavaRegistry+JSRegistryCatalystInstanceImplJavaScriptModuleJavaScriptModuleJavaScriptModuleJavaScriptModuleInvocationHandlerReactBridgeBridge.cppJSCExecutor.cppMessageQueue.jsModule.jsModule.jsModule.jsModule.jsReactNativeForAndroid通信Java-Js1getJSModuleJavaScriptModuleRegistrycallFunction3JSCHelper.cpp5evaluateScript4callFunctionOnLoad.cppinvoke2ReactNativeForAndroidLaunchReactNativeForAndroid通信Js-JavaModule1.jsModule2.jsModule3.jsModule4.jsCALL4CALL3CALL2CALL1ModuleIDMethodIDArgumentsModule2.javaModule3.javaModule4.javaMessageQueue.js1PUSH2EVENT3FLUSH4JavaRegistry5CALLModule1.javaQzTextViewManagerprocessPackageReactPackage3CreateReactContext4CreateNativeModuleattachMeasuredRootViewToInstance5UIManagerModuleCreateAllViewManagers2从QzText到QzTextViewQzTextViewShadowNodeQzTextViewreturn1213addView11createViewInstance10createViewUIManagerQzTextrequireNativeComponent78ReactcreateElementcomponentrender9BatchBridgesetGlobalVariable6add1CatalystInstanceReactInstanceManager2.从QQ空间到手机QQ包大小稳定性安全性兼容性性能业界尚未有真实外网数据，仅靠实验室有限数据支撑PreAccesstoReactNativeAndroidHelloWorld工程约7mAndroid4.1(API16)&iOS7.0Jsbundle与Native版本兼容支持版本对机型兼容Jsbundle可能发生被拦截等情况，容易导致NativeCrash业界尚未有真实外网数据，内部仅能通过大量机器进行稳定性测试，但未能覆盖所有机型5?445PluginQzone情侣空间RN改造点击情侣空间Qzone切后台点击我的空间APK需要更新bundle需要更新VersionHeader本地下载更新安装本地下载更新bundle是是WNS开关PlatformapkAPK预处理Bundle预处理jsbundleRUNRNAPP插件化＋＋云开关独立进程情侣空间开发流程2015.10.162015.10.302015.11.13RN情侣空间性能瓶颈·首屏插件及进程启动RN上下文启动首屏数据Render插件及进程启动2.1sRN上下文启动1.1s首屏数据2s＋＋Render0.9s＋=6.1s主观上没明显卡顿，中低端机对比老版本下降明显RN情侣空间性能瓶颈·FPSRN话题圈业务开发·模块梳理AntorGradle结论：使用Ant来构建ReactNative8-14Dgradle资源编译问题gradle分包问题资源混淆问题补丁包代码插桩，资源插桩等未接入debug模式下某些变量的修改也需要加上签名，checksum及其他还没想到的问题包精简首屏加速FPS内存模块梳理API制定开发联调业务体验bugfix性能优化aar文件拆jar包jar包&so迁移projectrebuildfixcompileexceptionfixruntimeexceptionjar包&so迁移projectrebuildfixcompileexceptionfixruntimeexceptionso精简Ant编译RNA12.7集成入Qzone12.15业务开发12.28RN话题圈开发流程Ant编译RNACompileExceptionError:AndroidDex:[react_native]Uncaughttranslationerror:java.lang.IllegalArgumentException:alreadyadded:Lcom/facebook/react/BuildConfig;解决方案：1.gen生成的BuildConfig与React本身jar包的BuildConfig冲突2.将各模块改为lib模式3.干掉各个个jar包中的BuildConfigdraweefbcorefrescoimagepipelineimagepipelie-okhttpreact，以上6个module的重复的cls均需要移除，移聊后重新构建jar包。Error:Causedby:java.lang.VerifyError:com/facebook/react/views/drawer/ReactDrawerLayoutManager解决方案：将appcompat中的supportv4包以lib工程的方式添加到工程中RuntimeException模块接口名接口参数及返回iOSAndroidQzMaingetUserInfo获取用户信息@param{Object}params{Object}callback：回调QzMain.getUserInfo({callback:{code:0,msg:”SUCCESS”,data:{nickName:”xxx”}}});6.36.2getQua获取QUA@param{Object}params{Object}callback：回调QzMain.getQua({callback:{code:0,msg:”SUCCESS”,data:{qua:”xxx”}}});6.36.2QzShareshowShareMenu调用分享弹框@param{Object}params{Json}extra:预留参数，目前可为空QzShare.showShareMenu({});6.36.2RN话题圈业务开发·接口制定启动Qzonefeeds渲染完毕预初始化React上下文Header带上本地上一次下载jsbundle的last-modify-sinceCDNSVRCGISVRjsbundle带上登录态，客户端预拉首屏数据优先使用SDCard,不存在用Assets点击发现WNSConfigPlatformCPURUNRNrenderRN话题圈业务开发·整体流程预加载优化后RN话题圈性能优化·FPS137上AppRegistr0.48sy＋＋=Render0.9s3.38sReactContextInitAsyncTaskReactPackageCatalystInstanceReactBridgeJSBundleLoaderReactApplicationContextinitializeWithInstanceReactRootViewstartReactApplicationReactNativeForAndroid启动JavaScriptExecutorJSBundleLoaderReactInstanceManagercreateReactContextdoInBackgroundonPostExecutesetupReactContextrunApplicationCatalystInstanceUIManagerModuleattachMeasuredRootViewAppRegistryJavaScriptModuleConfigCoreModulePackageNativeModuleRegistryNativeModuleJsModule……32210950189291插件及进程启动UIManagerModule0ssetGlobalVariableloadScript首屏数据2s＋CacheDataCacheContext优化后RN话题圈性能优化·首屏数据加速优化前前端发起ClickTabWebCXTHTTPREQHTTPRSPRenderNativeCXTFeedsRenderedPreInitNativeCXT终端发起ClickTabNativeWNSREQNativeWNSRSPNativeCXTWEBCXTHTTPRSPHTTPREQDataModuleCallbackRenderUI减少View层级嵌套合理设置背景色透明JSJS层使Listview控件渲染数据，废弃使用ScrollView控件避免滑动做过多事情，减少JS线程掉帧RN话题圈性能优化·FPS高低端手机上差异明显，RN有明显的劣势高低