本身是一名iOS开发者，React Native概念介绍

By admin在 上张贴Cat 基金会发表回复

自身是一名iOS开发者，由于工作须要，接触React
Native到近期也有一年多了，我发觉互连网上文化资源格外的多，不过能令人峰回路转、疾速学习的仍然个别，我收拾出的那一个小说对于初学者的话是相比有好的，希望经过整治自己的读书路线，能给一样作为iOS开发者，想深造React
Native的敌人们有的协助。

自身是一名iOS开发者，断断续续一年前开头接触React
Native，近来是因为工作亟待，专职学习React
Native也有一个多月了。互连网上知识资源相当的多，但能令人峰回路转、连忙学习的依然个别，我整理出的这么些小说对于初学者的话是比较有好的，希望通过整理自己的读书路线，能给一样作为iOS开发者，想上学React
Native的恋人们有些扶助。
既是是写给iOS开发者的，那么我默许你早就领会iOS原生应用开发的基本知识，所以对iOS原生开发的连锁内容不做表明表明。

React Native简介

既是是写给iOS开发者的，那么我默许你早已控制iOS原生应用开发的基本知识，所以对iOS原生开发的相干内容不做解释表明。

React Native概念介绍

简介

  • 支持平台：Native App(IOS、Android)、web
  • 付出语言：JSX、JavaScript、Coffee Script、Type Script

实则作为一个开发者有一个上学的气氛跟一个交换天地尤其重大，那是自身的一个iOS调换群656315826，不管是小白如故大牛都迎接入驻，我们一块儿互换成长！

名词解释

首先列举几个基本点词：

  • React
  • Native
  • React Native

那五个词其实没有太大关系，我们各种来解释：

  • React：近几年Web前端领域非凡炎热的一个付出框架React.JS，其宗旨思想是将视图组件化，通过立异组件的state来渲染出组件。
  • Native：这么些词从字面通晓就够了，就是指原生的。前些年有个相当炎热的跨平台开发框架–
    PhoneGap（现称Cordova），那就不是原生的开发情势。原生就要动用对应平台的一定语言和框架进行开发，比如利用Objective-C或斯威夫特开发的iOS应用。
  • React
    Native：结合了那多个词，大家得以省略地取得结论：使用React框架举办原生格局的支出。

一句话介绍

运用js语言，利用该框架调用原生UI组件，开发近乎原生效果的跨平台应用。

React Native概念介绍

兑现原理

大家都晓得在iOS平台上，苹果提供了一个JavaScriptCore的framework，能够展开JavaScript语言的剖析，React
Native通过反复封装定义，最后促成了在JavaScript语言中调用Objective-C的类和艺术。具体的法则大家现在还不用深究，后文的求学路线中会有提到。
故而既然是调用Objective-C的类和方式，品质上本来是不差的（但也不周详），所以这也是React
Native比较其他跨平台开发形式的一大优势。

主要特点

  • 接济原生iOS组件

经过应用React
Native，开发者可以运用iOS环境下的标准组件（如UITabBar和UINavigationController）来开发原生应用，那就可见有限协助支付出来的施用在三个平台亦能保险始终如一的外观、风格，从而进步了动用产品的用户体验和质料；

  • 支撑异步执行

JavaScript应用代码和原终身台之间的有着操作都是异步执行的，原生模块还能选用额外的线程，从而采纳React
Native开发出来的使用质量相比高（运行流畅和反应快）。别的，开发者仍能在模拟器或者物理设备上运行应用的同时选择Chrome
Developer Tools调试JavaScript代码；

  • 触摸操作

React
Native完成了一个接近iOS平台下的响应系统，还提供了高级的零件如TouchableHighlight等；

  • 引入了Flexbox布局模型和体制

Flexbox布局模型有利于打造常见的UI布局，如stacked和nested
boxes布局。React
Native还扶助广大的Web样式，如fontWeight、font-size等。样式表（StyleSheet）抽象提供了一种优化机制来声称组件所用到的具备样式和布局；

  • 具有Polyfills功能

Polyfills作用是的开发者编写单独选取的代码而不用担心其他浏览器原生是还是不是支撑。React
Native专注于改变试图（Views）代码编写的法子，开发者可以运用npm安装JavaScript
Library，并将那一个Library融入React Native，如
XMLHttpRequest、window.requestAnimationFrame等

  • 较强的可扩大性

规划React
Native主借使为了使得开发者使用正规的原生视图组件扩张和模块就能够付出出一个完好无损的选取，开发者可以复用已经创设的其余利用或者零部件，并且还能引入自己心爱的原生Library。
ReactNative 组件

名词解释

评价

  • 跨平台：方今React
    Native官方已经支持iOS、Android七个阳台的移动装备，民间也有部分大牛在做macOS、tvOS，甚至UWP平台的适配。但鉴于不一样平台特色不相同，并不可以一份代码在享有平台上直接运行，React
    Native的研究是「Learn once, write
    anywhere」，大家要求针对分化平台的特性写出差别的代码，尽量保险组件的高可复用性。
  • 特性：官方注解质量堪比Native，实际运用中我们会发现多少个难点，比如复杂视图渲染出View层级过多、ListView（等同于iOS上的UITableView）无重用机制、有些组件存在内存败露。那就会促成在有的低端Android机型上的特性过差，复杂的、大型的应用会有肯定质量难点。
  • 热更新：由于App
    Store应用商店发版迭代功能难题，热更新成为了iOS平台卓殊渴求的法力，可喜的是React
    Native的热更新能力分外好，通过将JavaScript代码安排到服务器中，运行进度中即可再一次reload整个界面。
  • 读书费用：对于iOS开发者来讲，要打听非常数量的Web前端开发知识才方可拓展付出，对于Web前端开发者来讲，对于原生品质调优则须求原生开发文化和经历，所以说学习成本略高。
  • 开发功能：Android和iOS平台可复用很多组件，仅有的代码需求各自平台独家维护，所以比付出四个阳台原生应用功效要高得多。加上自身可动态渲染的力量，不用再行编译，Command⌘+R即可再度渲染界面，开发功用进一步惊人地快。

连锁评论

TaobaoWeb架构/Pad客户端管事人：怎样评论 React Native？<a
href=”http://www.cocoachina.com/ios/20150409/11514.html"&gt;传送门&lt;/a&gt;。
Cordova VS React Native 什么人是前景？<a
href=”http://www.aichengxu.com/view/2486618"&gt;传送门&lt;/a&gt;。

率先列举多少个根本词：

学学路线

坚守顺序进行学习即可。

Hybrid APP、Native + WebView、React Native 三者相比

React

支付环境安插

你的处理器若未设置Homebrew、Node.js、沃特chMan等工具，请参考：

若已设置Homebrew、Node.js、WatchMan，请直接：

对此IDE/Editor的选料，近来可以有Sublime
Text、VSCode、WebStorm、Atom+Nuclide、Deco采纳。我个人相比较推荐的是VSCode和WebStorm。以下提供两篇关于IDE的设置。

Hybrid APP

Native

JavaScript

首先是最基础的JavaScript教程，火速过三次即可。

连锁应用

  • PhoneGap: Untappd、TripCase、Yoga+Travel
  • AppCan: 求是网、富国富钱袋、鸡毛箭商城

React Native

ES6

ES6也称ES2015，是JavaScipt语言的较新的一种标准，在React
Native开发时，我们提议选择这种专业。

优点

  • 跨平台性，利于移植
  • 全Web开发，收缩支出人力财力；
  • 能利用HTML5的种种风味

那多个词其实没有太大关系，大家挨个来表达：

语法规范

JavaScript本身变化很快，这份由Airbnb维护的语法规范是运用较为常见、周详的，很有参考性。

缺点

  • 舒缓的渲染速度和不便精通的卡通片效果
  • 品质取决于浏览器
  • 不可以运用设备的兼具特性
  • 不像原生应用，与系统不协调

React：近几年Web前端领域极度炎热的一个开支框架React.JS，其要旨理想是将视图组件化，通过立异组件的state来渲染出组件。

React Native

快速入门

由于会有一对开源项目和开源组件使用ES5业内举办开发，所以理应看得懂ES5代码。
React/React Native 的ES5 ES6写法相比表 – react native
普通话网

Native + WebView

Native：这一个词从字面精晓就够了，就是指原生的。明年有个要命炎热的跨平台开发框架PhoneGap（现称Cordova），那就不是原生的开发方式。原生就要接纳对应平台的一定语言和框架举行开发，比如动用Objective-C或斯维夫特开发的iOS应用。

布局

连带应用

  • 微信、QQ、支付宝

优点

  • 最安静的Hybrid
    App开发格局，交互层的频率上由Native的事物解决了，而且架构上着力就是在App内写网页，连App
    Store都是使用了该种方案；
  • 付出时分工极度引人侧目，底层的由iOS开发人士处理，上层的由Web前端开发职员处理；
  • 可行的在线参数配置情势，以便于当时在线替换界面；

缺点：

  • 团队至少必要多个工程师，一个是Web的，一个是iOS、Android的
  • 运作作用的权衡，多少界面选择Web来渲染，毕竟WebView的频率会相对下跌

React
Native：结合了那多少个词，我们得以省略地获得结论：使用React框架举办原生格局的开发。

组件

React Native

落到实处原理

React with Redux

有关应用

  • 天猫pad

我们都了解在iOS平台上，苹果提供了一个JavaScriptCore的framework，可以拓展JavaScript语言的解析，React
Native通过反复包裹定义，最后兑现了在JavaScript语言中调用Objective-C的类和章程。具体的规律我们今日还不用深究，后文的就学路线中会有涉嫌。

热更新

优点

  • 跨平台，包容web、ios、android三大主流平台，两端相互开发（共享智慧）
  • react 调用原生控件，性能由于H5框架
  • 更好的手势识别，体验上好像原生
  • 履行陈设更新，防止市场审核慢
  • 社区活泼

故此既然是调用Objective-C的类和格局，品质上本来是不差的（但也不完美），所以那也是React
Native相比较其余跨平台开发形式的一大优势。

原理

缺点

  • 学习用度高
  • 组件不全，第三方组件也不全
  • ios和android代码并非通用，有可能会要求维护两套，或者在代码内做一些判定。

评价

推介资源

终极附上原文链接:

跨平台：近来React
Native官方已经支撑iOS、Android四个阳台的位移设备，民间也有一些大牛在做macOS、tvOS，甚至UWP平台的适配。但出于不一样平台特色差距，并不可能一份代码在有着平台上直接运行，React
Native的研讨是「Learn once, write
anywhere」，我们需求针对不一样平台的特色写出区其余代码，尽量有限支撑组件的高可复用性。

属性：官方表明品质堪比Native，实际利用中大家会发觉多少个难题，比如复杂视图渲染出View层级过多、ListView（等同于iOS上的UITableView）无重用机制、有些组件存在内存泄露。那就会导致在部分低端Android机型上的特性过差，复杂的、大型的应用会有肯定品质难点。

热更新：由于App
Store应用集团发版迭代成效难点，热更新成为了iOS平台分外渴求的功能，可喜的是React
Native的热更新能力尤其好，通过将JavaScript代码计划到服务器中，运行进程中即可重新reload整个界面。

学费：对于iOS开发者来讲，要领会万分数额的Web前端开发知识才足以展开销付，对于Web前端开发者来讲，对于原生品质调优则需求原生开发文化和阅历，所以说学习开销略高。

支出功能：Android和iOS平台可复用很多零部件，仅局地代码需要各自平台独家维护，所以比付出四个阳台原生应用功效要高得多。加上我可动态渲染的能力，不用再行编译，Command⌘+R即可重新渲染界面，开发作用进一步惊人地快。

上学路线

搭建环境

React Native 包管理器同时选取了 node和watchman，并选拔了同为 Facebook出品的flow作为项目检查库，因而大家将在 macOS
下利用Homebrew举行连锁倚重的设置。

针对不一样平台安装 Xcode 或 Android Studio 开发条件

始建一个新的采用

应用 React Native 命令行工具创建一个模板工程

按序列创造的成功唤醒运行应用

== 若运行出错，可尝试在工程目录下重新运行 npm install和npm start==

配置安排到 iOS 设备

签到开发者账号 -> 注册 iOS 设备 UUID -> 在AppDelegate.m中配置
React Native 文件地方

追究示例代码

寻找一下命令行工具生成的默认工程项目代码吧~

加上零件

模块导入

付出进度中，大家必要导入所需的每一个零部件或模块

视图样式组件

熟谙HTML那样的结构化标记语言的话，那段代码不难领会，表达了视图中的组件结构

React Native
中具有样式都应用样式对象来代表传统样式表，日常拔取StyleSheet库来创制组件样式。

世家认为小编写的还不错的话，可以点一波收藏跟关怀！也得以进入自己的一个iOS调换群656315826，不管小白照旧大牛，大家一块上学成才!

相关文章