别名: 手把手教你学 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 算是我的老冤家了, 用它做过项目, 我还写了一个入门教程 https://github.com/JerryMissTom/ionic3-handbook ,ionic 是基于 Angular 和 Cordova 的, 它的原理也很简单, Angular 开发打包的 js 代码运行在 webView 中, 通过 Cordova 插件与 Native 进行交互, 调用原生功能. Cordova 的简化版可以看是大头鬼的开源的项目 https://github.com/lzyzsd/JsBridge , 原理一样, 但是前者提供了插件的能力. 下图展示了 ionic 应用内部运行原理.
除了少部分需要分别针对 Android 和 iOS 的适配外, 真的是做到了 Write once,Run anywhere. 有 Angular 开发经验的人很容易上手, 写一个简单的 APP 贼快. 缺点也很明显, 性能, 还是性能. 因为使用了 WebView, 占用内存高, 性能差. iOS 上很流畅, 但是在 Android 中低端机上效果还是差了点.
RN 技术抛开了 WebView, 利用 JavaScriptCore 来做桥接, 将 js 调用转为 native 调用. 说的再明白一些, RN 会把写的代码打包成一个 js 文件, RN 这个框架会解释这个文件, 事件的话就通过 Bridge 调用原生的事件, UI 的话就通过 Bridge 传递参数给 Native, 然后 Native 渲染出对应的原生组件. 具体原理见下图:
RN 相比 ionic 的性能要好很多, 但是它只能做到 Learn once,Write anywhere, 学习一套语法和工具, 可以开发两个平台上的代码. RN 还有一个好处就是热更新, 这个对 iOS 开发者来说是好事. RN 的缺点也很明显, 适配代码可能需要维护两套, 当没有开源的组件时, 自己实现起来花时间不说, 还需要写原生的开发人员的配合.
Flutter 是谷歌推出的跨平台开发的框架, 它既没有采用 WebView 也没有采用 JavaScriptCore, 而是自己实现了一个 UI 框架, 底层从 RN 这样桥接原生 UI 组件的方案换成了基于 OpenGL / Vulkan 这样的图形库, 直接在系统更底层渲染系统上画 UI. 这个完全脱离了原生的组件, 对一些效果有很好的控制. 原理图如下:
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 一下还是很容易就解决的.
来源: https://juejin.im/post/5b3738d551882574d50061ff