探索ReactNative应用

简介: 本篇文章是我看AC2016腾讯前端技术交流大会后写的。写的不好,大家见谅啊。一,什么是ReactNative?  简单来说就是可以用javascript来写APP了,而且性能还不错。 用JS写的话已经有很多框架比如Cordova,Dcloud等等那为什么这些框架不行呢?主要还是因为它们是基于webview来做的,导致它们的性能不行。   React.js Conf

本篇文章是我看AC2016腾讯前端技术交流大会后写的。写的不好,大家见谅啊。

一,什么是ReactNative?

  简单来说就是可以用javascript来写APP了,而且性能还不错。 用JS写的话已经有很多框架比如Cordova,Dcloud等等那为什么这些框架不行呢?主要还是因为它们是基于webview来做的,导致它们的性能不行。
  React.js Conf 2015会议上,Facebook发布了React Native,可以基于目前大热的开源JavaScript库React.js来开发iOS和Android原生App。
  它是一种介于在webview和原生开发之间的解决方案,它想要实现像web一样灵活,像原生一样的性能,虽然现在还都没有达到,但是它是一种有可能接近这个目标的解决方案。

二,ReactNative有那些优点

①通过JS来编写移动应用,学习成本低
②真native,丝般顺滑(性能好)
这里写图片描述
③支持热更新
  可以方便的进行代码热更新。
④Chrome调试
⑤React生态圈,组件化
  组件化开发,复用率高,组件丰富以后,ui开发较快,前端式开发。
⑥可以和原生页面互相调用,作为一部分嵌入到一个已有的原生app中。
⑦learn once,write anywhere
  未来js可能会有更大的通用性,比如现在微信小程序的开发技术和react native十分相似。现在还有用react native开发mac桌面应用,开发web网页

三,ReactNative的存在方式

这里写图片描述
Native初始化->JS初始化->抓取数据->渲染
这里写图片描述
前两个是针对native端进行的,所以我们后面的优化也可以分开进行

四,ReactNative应用优化

(1)Native端优化
ReactNative应用会有一个JS Bundle而Native没有,这会产生什么问题呢?
写一个几乎什么都没有的页面JS Bundle都有500K,这产生什么问题?
这里写图片描述
ReactView启动流程(看不懂请忽略)
这里写图片描述
两个优化方向:
①减小jsbundle的装载时间
这里写图片描述
优化结果:700ms到60ms几乎个原生APP体验一样
②减小jsbundle的更新体积
这里写图片描述
这里写图片描述
将base这一部分提前下载到用户手机上去
这里写图片描述
这里写图片描述
(1)JS端优化
这里写图片描述
这里写图片描述
这里写图片描述
这里写图片描述
这里写图片描述

目录
相关文章
|
移动开发 Java 开发工具
我的第一个reactnative
由于在做极光推送,前端使用的框架是reactnative,后台写好后为了测试一下,所以按照react官方的教程搭了遍react. 开发环境: 1.windows 7(建议各位如果开发react的最好还是买台mac,一台mac给你打价值远远大于mac机器自身的价值) 2.
1393 0
|
移动开发 JavaScript 前端开发
Weex&ReactNative对比
>weex开源有一段时间了,其实去年刚听说weex这个项目的时候,我就对它很敢兴趣,很大程度上是因为我自己对vue的喜爱。我从13年左右开始接触vue,14年开始熟悉这个轻量的框架,并慢慢的推荐给了身边的朋友,当我得知手淘的weex是基于vue的时候,就有了想了解一下的冲动。在weex开源之前,我刚好有几个月的时间一直在致力于ReactNative的优化改造,加上自己之前使用ReactJS的一些经
5736 0
|
移动开发
ReactNative升级到0.56以后,装饰器无法使用
解决方案 移除babel-plugin-transform-decorators-legacy npm install --save-dev @babel/plugin-proposal-decorators 配置.
1446 0
|
4月前
|
设计模式 前端开发 数据可视化
【第4期】一文了解React UI 组件库
【第4期】一文了解React UI 组件库
107 0
|
4月前
|
存储 前端开发 JavaScript
【第34期】一文学会React组件传值
【第34期】一文学会React组件传值
32 0
|
4月前
|
前端开发
【第31期】一文学会用React Hooks组件编写组件
【第31期】一文学会用React Hooks组件编写组件
35 0
|
4月前
|
存储 前端开发 JavaScript
【第29期】一文学会用React类组件编写组件
【第29期】一文学会用React类组件编写组件
31 0
|
4月前
|
前端开发 开发者
【第26期】一文读懂React组件编写方式
【第26期】一文读懂React组件编写方式
28 0
|
4月前
|
资源调度 前端开发 JavaScript
React 的antd-mobile 组件库,嵌套路由
React 的antd-mobile 组件库,嵌套路由
42 0
|
3月前
|
存储 前端开发 中间件
React组件间的通信
React组件间的通信
17 1