React Native项目实战优化之路

2020-02-27 552浏览

  • 1.ReactNative实战优化之路 腾讯QQ空间 王少鸣
  • 2.
  • 3.ReactNative Android Developer mangosmwang(王少鸣) QQ空间
  • 4.About me 15年 至今［Qzone］移动终端开发 负责 Qzone 玩吧业务，专注Hybrid开发，[QQ Js SDK] 研发负责人，专注 ReactNative在Qzone与手Q的应用和推广。 14年 正式跨界移动端 负责碰一碰模块，后续带领团队完成语音广场的开发及微群组2.0上架 13年 加入腾讯 Web前端开发，负责QQ空间Web前端研发工作，参与研发［Qzone V8］ ，经历了用户的井喷和Web技术的快速变革，主要完成V8升级引导过程。 智能终端［Qrobot］开发，负责机器内置帐号登录及监控视频上传，后续 单人负责整个项目维护及上架。 mango(王少鸣)
  • 5.1.关于ReactNative
  • 6.What ReactNative ReactNative 让开发者使用 JavaScript 和 React 编写应用，利用相同的核心代码 就可以创建 基于Web，iOS 和 Android 平台的原生应用。Facebook 在 2015.9.15发布了 ReactNative for Android，把JavaScript 开发技术扩展到了 Android平台，至此已覆盖当流主流平台。 React Native A FRAMEWORK FOR BUILDING NATIVE APPS USING REACT Learn Once , Write Anywhere
  • 7.Version of ReactNative 12/7/10 12/5/21 12/4/1 Qzone 12/2/11 11/12/23 QQ 11/11/3 Qzone 11/9/14 11/7/26 11/6/6 11/4/17 11 12 13 14 15 16 17 18 19 20 两个版本/月 21 22 23 24 25 26 27
  • 8.Who Use ReactNative
  • 9.Who Use ReactNative Inside 话题圈 情侣空间 消息流 资料卡 K歌大赛页 留言板
  • 10.ReactNative 优劣对比 优势 原生控件的体验 Web的版本节奏 Web的开发效率 跨平台 劣势 版本支持度 Android 4.1 (API 16) & iOS 7.0 项目尚不成熟，容易Crash，部分机器存在兼容性问题 性能，在高低端机呈现两极 Android仅基于Gradle，目前业界较多大平台项目均基于 Ant，如Qzone，手Q等
  • 11.ReactNative 整体流程 JsBundle1 Data/File APP Launch File ? Http Header SVR JsBundle1 JSC JsBundle2 JsBundle2 Render
  • 12.ReactNative 原理 哈哈 Native UI 展示 JSC 解析JS，桥接JS<>Java Application Code 业务逻辑 JS
  • 13.ReactNative For Android 架 构 Java ReactCore C++ Fresco OkHttp Support {moduleID,methodID,args} JSC Utils {moduleID,methodID,args} Bridge JSLoader Utils {moduleID,methodID,args} {moduleID,methodID,args} Js Component Lifecycle Data Layout
  • 14.ReactNative 通信 Video Pic Share AppRegistr y EventEmitte r .Java .m .Js Video JavaRegistry JavaRegistry Pic + + JSRegistry JSRegistry … Share AppRegistr y EventEmitte r … __fbBatchedBridgeConfig
  • 15.ReactNative For Android 通信 Java -> Js 1 getJSModule JavaScriptModuleRegistry JavaScriptModule CatalystInstanceImpl JavaScriptModule JavaScriptModule invoke JavaScriptModuleInvocationHandler 2 3 callFunction ReactBridge 4 callFunction OnLoad.cpp Bridge.cpp JSCExecutor.cpp JSCHelper.cpp 5 Module.js Module.js Module.js Module.js evaluateScript MessageQueue.js
  • 16.ReactNative For Android Launch
  • 17.ReactNative For Android 通信 Js -> Java Module1.js Module2.js Module3.js Module4.js 1 MessageQueue.js 2 PUSH 3 EVENT CALL1 4 CALL3 CALL2 FLUSH CALL4 Arguments ModuleID MethodID JavaRegistry 5 CALL Module1.java Module2.java Module3.java Module4.java
  • 18.从到QzTextView QzTextViewShadowNode QzTextViewManager 12 return QzTextView 1 add 11 createViewInstance 2 ReactInstanceManager CreateAllViewManagers 3 4 CreateReactContext CreateNativeModule 13 addView UIManagerModule ReactPackage processPackage CatalystInstance 5 6 attachMeasuredRootViewToInstance setGlobalVariable BatchBridge 10 createView 8 7 QzText React requireNativeComponent 9 UIManager createElement component render
  • 19.2.从QQ空间到手机QQ
  • 20.Pre Access to ReactNative Android HelloWorld工程 约7m 包大小 5 业界尚未有真实外网数据，内 部仅能通过大量机器进行稳定 性测试，但未能覆盖所有机型 性能 稳定性 5 ? 业界尚未有真实外网数据 Plugin ，仅靠实验室有限数据支 撑 4 4 Android 4.1 (API 16) & iOS 7.0 Jsbundle可能发生被拦截等情 Jsbundle与Native版本兼容 况，容易导致Native Crash 支持版本对机型兼容 兼容性 安全性
  • 21.Qzone情侣空间RN改造 插件化 APK预处理 Bundle预处理 ＋ Version Qzone切后台 点击我的空间 ＋ 独立进程 Header APK 需要更新 bundle需要更 新 是 是 云开关 本地下载更新安装 本地下载更新 bundle 点击情侣空间 WNS开关 Platform RUN RN APP jsbundle apk
  • 22.情侣空间开发流程 2015.10.16 2015.10.30 2015.11.13
  • 23.RN情侣空间性能瓶颈· 首屏 插件及进程启动 RN上下文启动 首屏数据 Render 插件及进程启动 2.1s ＋ RN上下文启动 1.1s ＋ 首屏数据 2s ＋ Render 0.9s = 6.1s
  • 24.RN情侣空间性能瓶颈· FPS 主观上没明显卡顿，中低端机对比老版本下降明显
  • 25.RN话题圈业务开发· 模块梳理
  • 26.Ant or Gradle 8-14 D gradle资源编译问题 gradle分包问题 资源混淆问题 补丁包代码插桩，资源插桩等未接入 debug模式下某些变量的修改也需要加上 签名，checksum及其他还没想到的问题 结论：使用Ant来构建ReactNative
  • 27.RN话题圈开发流程 Ant编译RNA 12.7 集成入Qzone 12.15 业务开发 12.28 性能优化 aar文件拆jar包 jar包&so迁移 模块梳理 包精简 jar包&so迁移 project rebuild API制定 首屏加速 project rebuild fix compile exception 开发联调 FPS fix compile exception fix runtime exception 业务体验 内存 fix runtime exception so精简 bug fix
  • 28.Ant编译RNA Compile ExceptionError:AndroidDex:[react_native] Uncaught translationerror:java.lang.IllegalArgumentException:alreadyadded:Lcom/facebook/react/BuildConfig; 解决方案：1.gen生成的BuildConfig与React本身jar包的BuildConfig冲突 2.将各模块改为lib模式 3.干掉各个个jar包中的BuildConfig drawee fbcore fresco imagepipeline imagepipelie-okhttp react，以上6个module的重复的cls均需要移除，移聊后重新构建jar包。 Runtime ExceptionError:Causedby:java.lang.VerifyError:com/facebook/react/views/drawer/ReactDrawerLayoutManager 解决方案：将appcompat中的support v4 包以lib 工程的方式添加到工程中
  • 29.RN话题圈业务开发· 接口制定 模块 接口名 接口参数及返回 iOS Android 6.3 6.2 6.3 6.2 6.3 6.2 获取用户信息 @param {Object} params {Object}callback：回调 getUserInfo QzMain.getUserInfo({callback:'>callback: