• 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 优化
    数据流管理

    视频教程 菜鸟窝

  • 相关阅读:
    MVC 网页制作
    Mvc 中国直辖市下拉列表(三级联动)
    MVC 登陆注册页面
    MVC 数据库增删改查(Razor)视图(2)
    MVC 数据库增删改查(Razor)方法(1)和数据库
    winform网页抓取邮箱单发群发并有附件
    winform截取网页邮箱
    winform 图标表chart
    winform图片读取存储于数据库SQL
    winform计算器
  • 原文地址:https://www.cnblogs.com/wbengineer/p/react-native.html
Copyright © 2020-2023  润新知