《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
本文来源: 掘金    如需转载请联系原作者

相关文章
|
3月前
|
开发框架 Dart Android开发
移动应用开发中的创新之路:探索跨平台解决方案
【9月更文挑战第21天】在移动应用的海洋中,开发者们面临着一个不断变化的挑战——如何在多个操作系统上提供无缝的用户体验。本文将探讨跨平台开发的魅力与挑战,并深入分析Flutter框架如何成为现代开发者的利器。我们将通过实际代码示例,揭示Flutter简化开发流程、提高生产效率的秘密。从Dart语言的基础到热重载的便捷性,本文旨在为读者提供一次全面而深刻的跨平台开发之旅。
|
14天前
|
C# Android开发 虚拟化
C# 一分钟浅谈:MAUI 跨平台移动应用开发
.NET MAUI 是 Microsoft 推出的跨平台框架,支持 Windows、macOS、iOS 和 Android。本文从基础概念入手,探讨 MAUI 的常见问题、易错点及解决方案,并通过代码示例详细说明。涵盖平台特定代码、XAML 语法、数据绑定、性能优化和调试技巧等内容,帮助开发者更好地掌握 .NET MAUI。
147 55
|
2月前
|
开发框架 前端开发 Android开发
移动应用开发中的跨平台策略与实践
【9月更文挑战第34天】本文将深入探讨移动应用开发的跨平台策略,包括对React Native、Flutter和Xamarin等流行框架的比较。文章还将分享一些实用的跨平台开发技巧和最佳实践,帮助开发者在多个平台上高效地构建和维护应用。无论你是初学者还是有经验的开发者,这篇文章都会为你提供有价值的见解和指导。
|
17天前
|
前端开发 Android开发 开发者
移动应用开发的未来:跨平台框架与原生开发的融合
【10月更文挑战第36天】本文探讨了移动应用开发领域内,跨平台框架与原生开发之间的相互作用及其未来发展趋势。通过分析Flutter和React Native等流行跨平台解决方案的优缺点,以及它们如何与传统iOS和Android开发相结合,本文揭示了一种新兴的开发模式,旨在提高开发效率并保持应用性能。
|
21天前
|
开发框架 前端开发 JavaScript
移动应用开发的未来:跨平台框架的崛起
【10月更文挑战第32天】随着智能手机用户数量的激增,移动应用开发已成为软件开发中增长最快的领域之一。传统的移动应用开发模式要求开发者为不同的操作系统分别编写和维护代码,这不仅耗时耗力,也增加了成本。近年来,跨平台开发框架的出现极大地改变了这一局面,它们允许开发者使用单一的代码库来部署应用到多个平台。本文将探讨跨平台开发框架的优势、面临的挑战以及未来发展趋势,旨在为读者提供一个关于移动应用开发新趋势的全面视角。
|
2月前
|
Dart Android开发 开发者
掌握跨平台移动应用开发:Flutter 的崛起
【10月更文挑战第9天】本文介绍了Flutter,一个由Google支持的开源UI工具包,专注于跨平台移动应用开发。文章详细探讨了Flutter的核心优势,如原生性能、热重载、丰富的组件及高可定制性,并提供了实施开发的步骤指南。此外,还分享了Flutter在快速原型开发、高性能应用及跨平台维护中的应用实例和实战技巧,旨在帮助开发者高效利用Flutter构建高质量移动应用。
|
2月前
|
开发框架 Android开发 开发者
移动应用开发中的跨平台策略与系统优化
在移动应用开发的广阔舞台上,跨平台策略和系统优化是两大核心议题。本文将深入探讨如何通过技术手段提升应用的跨平台性能和用户体验,同时确保系统的高效运行。我们将从Flutter框架的应用、Android和iOS平台的差异化处理,到系统资源管理和性能监测等方面进行详细阐述。文章旨在为开发者提供实用的指导和建议,帮助他们在不断变化的移动应用市场中保持竞争力。
|
3月前
|
移动开发 前端开发 JavaScript
构建高效跨平台移动应用:React Native入门指南
【8月更文挑战第47天】在移动开发领域,React Native凭借其跨平台特性和高效的开发模式赢得了开发者的青睐。本文将通过一个简易的待办事项应用实例,带领读者快速入门React Native,并展示如何利用JavaScript和React框架构建具有原生性能的应用。我们将探讨环境配置、界面布局、状态管理和数据流,以及如何打包和发布您的应用。准备好,让我们开始React Native之旅!
71 20
|
3月前
|
设计模式 前端开发 JavaScript
探索移动应用开发:从Android到iOS的跨平台之旅
【9月更文挑战第21天】在这篇文章中,我们将一同揭开移动应用开发的神秘面纱,从Android和iOS这两个主流平台出发,探讨如何利用现代技术栈实现跨平台开发。文章将通过具体的代码示例,带领读者理解不同平台间的差异与联系,以及如何运用React Native框架简化开发流程,实现一次编写,多平台运行的目标。无论你是刚入门的新手还是希望拓展技能的老手,这篇文章都将为你提供宝贵的知识和启示。
70 3
|
3月前
|
前端开发 JavaScript C#
移动应用开发中的跨平台框架解析
【9月更文挑战第5天】在移动应用开发领域,跨平台框架因其“一次编写,处处运行”的便利性而受到开发者的青睐。本文将深入探讨几种流行的跨平台框架,包括React Native、Flutter和Xamarin,并比较它们的优势与局限。我们将通过代码示例揭示这些框架如何简化移动应用的开发过程,同时保持高性能和良好的用户体验。无论你是新手还是有经验的开发者,这篇文章都将成为你了解和选择跨平台框架的宝贵资源。
69 19