《React Native跨平台移动应用开发》读后鬼扯

简介:
+关注继续查看
  • 别名:手把手教你学React Native
  • 评分:3星
  • 作者:阙喜涛
  • GitHub:https://github.com/es6rn (本书相关代码主页,非作者本人的)
  • 豆瓣:https://book.douban.com/subject/26809232/

这本书和别名写的一样,手把手教你学RN,和很多入门的书籍很相似,按照本书的章节一步一步来,肯定对RN的开发会有一定的了解。但是它也一本某些内容注定会落伍的书,因为RN还在不断的更新中,不排除会有破坏性的更新导致某些章节内容在RN最新版下是错误的,这个都是废话。

现实中,Android和iOS两大移动操作系统分庭抗礼的局面决定了注定会有类似RN这样跨平台移动开发框架的出现,只不过各家实现的思路不同而已,以ionic,RN,Flutter为代表分别扯一下。

ionic算是我的老冤家了,用它做过项目,我还写了一个入门教程 ionic3-handbook,ionic是基于Angular和Cordova的,它的原理也很简单,Angular开发打包的js代码运行在WebView中,通过Cordova插件与Native进行交互,调用原生功能。Cordova的简化版可以看是大头鬼的开源的项目JsBridge,原理一样,但是前者提供了插件的能力。下图展示了ionic应用内部运行原理。

50e5797435673e8dae4d91c84dc9841a787aa050

除了少部分需要分别针对Android和iOS的适配外,真的是做到了Write once,Run anywhere。有Angular开发经验的人很容易上手,写一个简单的APP贼快。 缺点也很明显,性能,还是性能。因为使用了WebView,占用内存高,性能差。iOS上很流畅,但是在Android中低端机上效果还是差了点。

RN技术抛开了WebView,利用JavaScriptCore来做桥接,将js调用转为native调用。说的再明白一些,RN会把写的代码打包成一个js文件,RN这个框架会解释这个文件,事件的话就通过Bridge调用原生的事件,UI的话就通过Bridge传递参数给Native,然后Native渲染出对应的原生组件。具体原理见下图:

a83b30154beffe5e70ad06599767897599cf2b27

RN相比ionic的性能要好很多,但是它只能做到Learn once,Write anywhere,学习一套语法和工具,可以开发两个平台上的代码。RN还有一个好处就是热更新,这个对iOS开发者来说是好事。RN的缺点也很明显,适配代码可能需要维护两套,当没有开源的组件时,自己实现起来花时间不说,还需要写原生的开发人员的配合。

Flutter是谷歌推出的跨平台开发的框架,它既没有采用WebView也没有采用JavaScriptCore,而是自己实现了一个UI框架,底层从 RN 这样桥接原生 UI 组件的方案换成了基于 OpenGL / Vulkan 这样的图形库,直接在系统更底层渲染系统上画UI。这个完全脱离了原生的组件,对一些效果有很好的控制。原理图如下:

0a71be9be9fcaebe7b47ee835e6eb221510b6053
Flutter的缺点就是使用了Dart这个语言,使用的人不多,相对ionic和RN来说学习需要成本,另一个是生态暂时还不成熟,先进去的都是踩坑填坑的壮士,比如说闲鱼。

学过Android,ionic,RN后,对如何入门一个移动端开发技术有些心得,个人觉得步骤如下:

  • 环境配置
  • 新建项目和调试工具
  • 入口文件
  • 数据和事件绑定
  • 布局和样式
  • 界面跳转
  • 生命周期
  • 网络请求
  • 数据存储
  • 权限设置
  • 主题风格
  • 事件广播
  • 适配
  • 打包

其他的都是些组件使用等细节或者是更高级的用法了。

再扯回来,所有的组件中我觉得最需要花心思的就是List类组件了,两个原因,一个是大量数据下如何维持性能,保持顺滑,另一个提供拓展能力满足各种设计。我们现在常用的软件,很多都是信息流的,必然要用到List。RN先是提供了ListView,后来升级为FlatList,是明智之举。可以这么说,没有高性能可拓展List组件的框架不是好框架。

以前没写过React代码,第一次接触RN写界面的时候都懵了,居然还可以这样,JSX还真是个有意思的东西。RN中我觉得一个亮点就是实现了flex布局,这个真心是好用啊,让我想起类当年写Android布局的痛苦岁月,谷歌不整这么一套真的说不过去。

RN中的状态机思维让我一度陷入拆分组件的痛苦中,在写代码高仿知乎我的这一界面时,拆的我都有点儿崩溃,时时刻刻想把大的组件拆分成小的只负责渲染数据的无状态RN组件。用了React-Redux后,我觉它和RN真的是天作之合啊,还专门花了时间弄清楚他的原理,具体见一幅图明白React-Redux型原理,搞明白之后才发现,真的是框架处处皆发布订阅模式。

这本书不推荐购买,初学者图书馆借一本,照着里面代码写一遍,RN基本上就是入门了。具体项目遇到什么坑,Google一下还是很容易就解决的。



原文发布时间为:2018年06月30日
原文作者:JerryMissTom
本文来源:掘金    如需转载请联系原作者

相关文章
|
30天前
|
前端开发 JavaScript Android开发
React Native 和 Flutter对比,包含代码实例
@[TOC](目录) React Native 和 Flutter 都是流行的跨平台移动应用开发框架。虽然它们在很多方面都有相似之处,但它们也有一些不同之处。在本文中,我们将详细比较这两个框架,讨论它们的优缺点、应用场景、性能以及包含的代码。 # 1. 框架概述 React Native 是由 Facebook 开发的一个开源框架,它允许开发者使用 JavaScript 和 React 来创建原生移动应用。React Native 可以用于开发 iOS、Android 和 Web 应用。它使用 JavaScript 的生态系统和工具,如 Babel、ESLint 和 React 工具链,使得开
|
30天前
|
前端开发 JavaScript Android开发
React Native详解和代码实例
@[TOC](目录) React Native 是一个用于构建原生移动应用程序的 JavaScript 框架。它使用 React 库,允许开发者使用 JavaScript 编写应用程序的 UI 和逻辑,并将其转换为本地平台(iOS 和 Android)上的原生视图。React Native 由 Facebook 开发,并于 2015 年发布。截至 2021 年,React Native 已经成为最受欢迎的跨平台移动应用程序开发框架之一。 在本详解中,我们将介绍 React Native 的主要特点、工作原理、优缺点以及代码示例。 # 一、React Native 的主要特点 1. 跨平台:Re
|
1月前
|
移动开发 缓存 前端开发
react native简单入门
react native简单入门
19 0
|
1月前
|
前端开发 JavaScript API
对React Native的了解?
对React Native的了解?
|
1月前
|
开发框架 Dart 前端开发
探索 React Native 和 Flutter
移动应用开发无需重复编写代码?创造令人惊叹的用户体验,同时适用于 iOS 和 Android 平台?这听起来像是不敢想象的未来科技,但事实上,React Native 和 Flutter 已经为我们实现了这些梦想。这两个备受瞩目的跨平台开发框架正改变着移动应用开发的游戏规则,提供了一种高效、便捷的开发方式。在这篇令人兴奋的博文中,我们将探索 React Native 和 Flutter 的技术细节,揭示它们的工作原理和独特之处。无论您是一位开发者还是一个对新技术充满好奇心的读者,本文将为您带来不可错过的前沿知识和启示。准备好迎接移动开发的新时代了吗?让我们一起踏上这段奇妙的旅程吧!
61 1
|
1月前
|
开发框架 Dart 前端开发
前端跨平台开发:React Native vs Flutter
前端跨平台开发:React Native vs Flutter
116 0
|
2月前
|
开发框架 移动开发 Dart
Flutter vs React Native:选择最适合的跨平台移动应用开发框架
本文探讨了Flutter和React Native这两个流行的跨平台移动应用开发框架之间的对比。首先,介绍了Flutter和React Native的基本原理和特点,并强调了它们在性能、开发体验和生态系统方面的优势。然后,通过对比性能、开发体验和生态系统等方面的差异,帮助读者更好地了解两者之间的区别。最后,总结了每个框架的优缺点,并提供了选择适合自身需求框架的建议。无论是开发者还是决策者,本文都将为他们在选择Flutter或React Native时提供一些有价值的指导。
|
3月前
|
开发框架 前端开发 JavaScript
使用React Native构建跨平台桌面应用程序
React Native是一种流行的跨平台移动应用开发框架,它允许开发者使用JavaScript构建原生移动应用。然而,你可能不知道的是,React Native也可以用于构建跨平台的桌面应用程序。本文将介绍如何使用React Native构建跨平台桌面应用程序,并展示一些示例代码和实际应用场景。
11202 0
CrossApp - 跨平台的移动应用开发引擎
CrossApp是一款完全免费、开源、跨平台的移动app开发引擎。CrossApp以C++作为开发语言,图形渲染基于OpenGL ES 2.0,采用MVC框架模式。使用CrossApp开发的应用程序支持导出到各大主流移动平台,真正实现"一次编码,多处运行"的跨平台开发技术。
751 0
|
Web App开发 JavaScript 前端开发
开发跨平台app推荐React Native还是flutter?
知乎热门问题:开发跨平台app推荐React Native还是flutter?
8412 0
相关产品
云迁移中心
推荐文章
更多