zoukankan      html  css  js  c++  java
  • react-native 简述

    1. RN 是什么
    2. RN 与传统Hybrid框架相比的优势
    3. RN的优势
    4. RN的劣势
    5. RN开发重点关注的问题

    1 RN是什么
    2 RN 与传统Hybrid框架相比的优势
    传统的如ionic,phonegap / cordova 采用webview渲染页面,使用中会出现卡顿现象,性能较差。RN相比较具有如下几个优势:

    1. 原生打包(IOS和Android)
    2. 虚拟DOM
    3. 保留平台特性
    4. Flexbox 布局
    5. 高性能的"JsBridge"

    采用原生打包可以不依赖平台特性,打包完全可控,实现底层与业务代码分离,无第三方打包依赖。
    采用虚拟DOM,对复杂ui多层嵌套造成的性能问题进行优化
    采用高性能的“JsBridge”优化页面渲染
    为什么要使用JsBridge呢?在开发中,为了追求开发的效率以及移植的便利性,展示强的页面偏向于使用h5完成,功能性强的偏向于native实现。
    为了h5中具备native的体验,native层需要通过JsBridge 暴露原生接口给h5调用。比如微信jssdk。
    传统Hybrid中是如何实现javascrip和java相互通信的呢?参见:

    JsBridge实现Javascript和Java的互相调用
    Android JSBridge的原理与实现

    总结:Java调用Javascript是通过WebView.loadUrl("javascript:xxxx"),Javascript调用Java是通过WebViewClient.shouldOverrideUrlLoading()等三种方式实现。
    当然,由于webview在android4.2下存在安全隐患 WebView中接口隐患与手机挂马利用, 需要另辟蹊径去实现。

    为什么说RN有着高性能的JsBridge呢?首先,从实现上,RN抛弃了webview作为页面渲染的容器:Android通过jni层c/c++ 代码实现了一套高性能的通信机制,
    IOS端使用JavascriptCore做js解析引擎。对IOS说,RN在性能和兼容性上都没什么大的问题(兼容IOS7上)。Android端由于Java层使用的一个API(Android4.1加入)(具体API待了解)
    进行协同绘制UI,故RN在4.1下不兼容。RN与原生通信部依赖webview,而是与原生混合开发。

    3 RN的优势

    1. 跨平台开发,Learn once, Write anywhere.
    2. 性能接近原生,优于传统Hybrid和h5
    3. 热更新机制,快速迭代更新
    4. 开发体验好
    5. 降低开发成本,原生开发工程师搭建基础环境,后期可以有react-native工程师快速开发迭代。保证ios端和android端产品功能同步迭代

    4 RN 的劣势,每一个优势对应一个劣势

    1. 为了试下跨平台,在开发设计的时候需要做好API的设计,统一API接口。需要考虑:
      一. js如何共用一套
      二. api模块如何设计
      三. ios & android控件ui兼容
      四. 本地桥接兼容
      五. 图片资源兼容
    2. 热更新带来的问题(待补充)
      1.0正式版未正式发布,版本迭代维持20天一次。crush率上升。如何处理好版本更新带组件不兼容的问题,
      原生层与js层设计,原生层只做基础桥接
    3. Android 打包包体过大
      一. bundle多大
      二. Android端JsBridge由c++实现。根本原因是生成的so库过大
      解决方法是:考虑根据平台拆分so库(分为x86和armv7),或者不考虑x86
    4. RN本身不兼容web端
      开源方案是 携程的moles(计划开源),淘宝FED的 react-web
    5. 页面如何降级
      IOS可以不考虑(IOS7一下不考虑 )
      Android 4.1 以下不支持RN,如何做容灾措施(可用web页面或者webview实现)

    5 RN开发中重点关注的问题

    bundle拆包--框架打包和业务打包分离
    热更新机制(增量更新)
    web降级
    统一API库设计(实现IOS和Android两端跨平台调用)
    listview 和 scrollview 优化
    数据流管理

    视频教程 菜鸟窝

  • 相关阅读:
    Encrypted Handshake Message
    RSAParameters Struct
    What if JWT is stolen?
    What's the difference between JWTs and Bearer Token?
    RSA Algorithm Example
    第18届Jolt大奖结果公布
    Ruby on rails开发从头来(windows)(三十六) 调试技巧
    Ruby on rails开发从头来(四十二) ActiveRecord基础(主键和ID)
    YouTube开放基础技术架构 让用户建自家YouTube
    Ruby on rails开发从头来(四十) ActiveRecord基础(Boolean属性)
  • 原文地址:https://www.cnblogs.com/wbengineer/p/react-native.html
Copyright © 2011-2022 走看看