React Native 学习

React Native  路线


基本路线如下:

1.详细了解 JavaScript

2.详细了解 React

3.详细了解 React Native

4.其他(比如说 Redux)

JavaScript

  了解 JavaScript 的继承和原型链机制,同时包括 JavaScript 的对象模型。

参考资料:JavaScript_MDNECMAScript6 入门JavaScript文档

      从 MDN 的 JavaScript 教程开始学习,这是 JavaScript 的基础知识,有一定编程经验在初级部分可以看的快一点,关于JavaScript 对象入门继承与原型链对象模型的细节要着重详细的看。如果跳着看思路跟不上,可以从头到尾仔细的看一遍。 MDN 的教程看完之后后就可以看 ES6 相关内容了。可以看 ruanyifeng 的 ES6 网上教程,也可以看 MDN 的JavaScript指南,两者可以对比的看。关键要理解 ES6 的模块(Module), 重点:Module语法 和 Module 的加载实现和基本的 ES6 语法。在看的过程中有些内容可能不懂,可以跳过,在写代码或碰到相关代码碰到的时,回过头来看,记住有这么一个东西即可。也可以对比一下与其他语言在这方面的不同和相同(lg: Java 程序员,学习 JavaScript,就可以对比一下 Java 的继承和 JavaScript 的继承),同时可以加深你对 JavaScript 的理解。

    看完这些 JavaScript 已经入门了。JavaScript 是弱类型语言,代码写着写着就不知道当前函数的参数定义是什么。不知道一个东西确定是什么是很痛苦的(你可以想象一下.....)。TypeScript 是微软的一个比较流行的解决这类问题的方案,是给 JavaScript 加上 类型。如果你碰到类似问题,TypeScript 就是你的解决方案。

React

       根据 React Native 的官方文档来学习。了解 React 是很关键的。喜欢立即上手的人,可以先不看 React 相关的内容,直接学习 RN。但写了一定量的代码以后,会碰到一些问题(如何复用组件,如何处理一些不是很常见的操作,如何处理数据等等),这时候你就可以开始去了解 React 了。

了解 React 当然是官方文档:

React 中文文档

React 英文官方文档

内容是一样的。

(建议:能够全部看完所有内容,不要忽略任何一个地方,当然文档是不够的,我觉得有时间一定要理解一下 React 的实现原理)

React Native

     强调一下,学习 RN 可以先不了解 JavaScript 和 React(前提是你要有一点编程经验,如果是大神的话,请随意)。喜欢立即上手的可以直接根据官方文档上手,不过要深入了解 RN,则必须要了解 React 和 JavaScript。

RN 的文档 官方英文文档中文版),环境依赖等根据官方文档来操作即可。

RN  关键了解使用的部分如下:

FlexBox :一个前端布局的方式,写界面的时候一定要了解,否则界面就构建不出来各种 UI 组件的使用、属性等,可边写代码边使用

网络请求 : 所有的客户端都有网络请求,所以这个也很关键。有一个框架 axios 可以尝试使用,这是一个 HTTP 客户端框架如何与(原生代码交互,iOS 相关文档地址 iOS Native ModulesiOS Native UI Components,Android 相关文档 Android Native ModulesAndroid Native UI Components)。

数据存储:使用 RealmJS 或者原生的 AsyncStorage,使用 RealmJS 的问题是,如果你的 iOS 原生项目已经使用了 RealmSwift 等的话,会导致符号冲突,无法通过编译。(坑:建议在原生项目上添加 RN 支持,文档地址集成到现有原生应用。如果使用 create-react-native-app AwesomeProject 命令来生成一个 RN 项目,会引入 Expo 这种东西,不建议使用此类框架。不建议使用 NavigatorIOS 这类组件,推荐 React Navigation,但是这个开源组件坑也比较多,不过个人认为还是比 RN 提供的组件要好)。其他Redux,Redux 是一个关于数据流的前端框架,也可以用在 RN 中。其他还有类似的比如 MobX(据说新版 React 有种 Context API 可以让我们告别使用 Redux,应该是比较新的东西)。

开始可以不使用 Redux,Redux 的官网也提示说如果不知道要不要使用 Redux,则不要使用 Redux。

学习文档:Redux 英文官方文档中文版

理解 Redux 比较关键的是它的状态树,所有的操作最终会反应到状态树上,所有的操作也是围绕状态树展开来的。所以一开始做客户端的时候设计一个比较贴切的状态树很关键。

进阶

1)打包

2)热更新

3)与原生交互

4)RN 原生实现原理

参考资料:

React Native拆包及热更新方案

携程是如何做React Native优化的

微软的热更新方案 CodePush

ReactNative中文网推出的代码热更新服务

iOS Native Modules

iOS Native UI Components

Android Native Modules

Android Native UI Components

React Native通信机制详解


开发环境

1.Atom(卡)2.Visual Studio Code  (配置 TypeScript 环境,demo)

注意:

      需要掌握RN的要求还是有一定知识度的,既要了解前段的相关知识,又要了解Android和iOS的原生知识。纯 JavaScript 的 RN 项目不现实,建议原生使用RN,不要以RN为主。不建议使用其他类似 RN 的解决方案,比如说 Weex。 RN 的生态环境是很活跃的,GitHub 有很多开发者共享的开源代码,很多人也在 GitHub 和 stackoverflow 上讨论自己碰到的 RN 相关的问题。但是即使如此,RN 还是没有出 1.0 版本,而且在实际使用过程中经常要自己造轮子,也会碰到很多奇奇怪怪的问题,导致拖累开发速度,从学习角度不是问题,但是工作就不一样了。所以使用 Weex 情况可能更糟糕。

conclusion:

React Native的学习过程更像是在学习React的前端开发,最大的区别就是浏览器和移动设备而已。但是换个角度来想,原生移动势微的情况下,从React Native入手前段开发也不错。在学习当中结合自己相关的开发知识,对比React Native,能更快巩固React Native相关知识,也加强了对自己的知识点加深。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 218,036评论 6 506
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 93,046评论 3 395
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 164,411评论 0 354
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,622评论 1 293
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,661评论 6 392
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,521评论 1 304
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,288评论 3 418
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 39,200评论 0 276
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,644评论 1 314
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,837评论 3 336
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,953评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,673评论 5 346
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,281评论 3 329
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,889评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 33,011评论 1 269
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 48,119评论 3 370
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,901评论 2 355

推荐阅读更多精彩内容