React Native 专题系列教程第1部分——关于React Native

1、React Native 是什么?

React Native enables you to build world-class application experiences on native platforms using a consistent developer experience based on JavaScript and React. The focus of React Native is on developer efficiency across all the platforms you care about — learn once, write anywhere. Facebook uses React Native in multiple production apps and will continue investing in React Native.

官方网站:http://facebook.github.io/react-native/

React Native是一个可以用Javascript语言来编写APP的框架。React Native使用React作为视图渲染层,使用并封装设备原生API,不同于一些基于Webview的跨平台框架(如Ionic等),React Native的组件渲染和设备调用都是以原生形式生成,不需要引入其他的第三方插件,这让React Native应用的响应和体验更接近于原生应用。

React Native可以开发跨平台APP(IOS/Android),但并不是不同平台共用一套代码,而是需要为不同的平台编写各自一套代码。但是,这并不意味着使用React Native开发APP就一定低效难维护,相反地, React Natvie提供了统一规范的语法,使得在不同平台下的代码编写都变得一致;在设备API调用方面,React Native同样进行了封装,使不同平台的调用都趋于一致。这就使得开发人员不需要为不同平台的应用转换使用不同的技术或语言,同时,在不同的平台中,可以针对不同平台渲染不同的UI,甚至执行使用有差异的功能,最大程度保持了应用开发的灵活性。

正如React Native官网所说的,React Native的对跨平台应用开发的定义并不是“write once, run anywhere”,而是“learn once,write anywhere”。

 

2、React Native / Ionic

新的技术,好的技术总会引起关注和讨论,于是,在原生应用(Native App)与混合应用(Hybrid App)之间,无数人进行着对比和争论,而在混合应用(Hybrid App)的世界里,又同样有无数人进行对比和争论。

关于原生应用(Native App)与混合应用(Hybrid App),我不打算探讨,因为网上大把的资料,我把重点放在目前混合应用开发最最热门的两项技术,同时也代表两个不同的方向,就是React Native和Ionic之间,当然,关于这两项技术,网上也有很多的资料,但是为了更好的理解React Native,在学习和开发React Native时,真正能“Think in React Native”,在这里还是简单的作下介绍,更详细对比资料可以在网上搜索。

以下对两者进行简单对比:

1、在实现上,React Native的组件渲染是基于原生的,而Ionic是基于WebView,因此,在体验方面,React Native体验更接近(或者说就是原生应用)的体验;

2、UI渲染上,React Native使用React组件化形式,封装实现原生应用UI,Ionic使用HTML 5 布局渲染;

3、在逻辑上,React Native基于React,而Ionic基于Angular JS;

4、在设备调用上,React Native调用原生设备API,而Ionic要依靠Cordova来调用设备API;

5、在开发实现上,React Native需要为不同的平台开发各自平台的代码,而Ionic则是一套代码,可以在不同平台上使用,这也牵出另一个对比——开发效率;

6、在开发效率上,React Native要比Ionic慢很多。

虽然React Native封装了一些常用的组件方便开发者使用,但所有的组件都是基础功能,在实际开发使用中,基本上都需要开发者重新封装,而且,React Native使用React来渲染组件和UI,在React Native,只提供了基本的Flexbox布局和常用的一些style样式属性,没有像HTML5中的CSS样式那么丰富,个性化定制略差;而在开发速度上,React Native使用JSX语法,并不像HTML语言那么简单易懂。

Ionic使用HTML5来实现UI,因此,书写语法是HTML5,样式支持是CSS,所有HTML5(标签、属性等)和CSS样式都可以完全支持并使用,书写更简单,开发效率更高。

在开发效率上,React Native要比Ionic差,但是React Native组件化开发的概念正是现在应用开发所推崇的,也是我们应该提倡的,当应用开发趋于成熟,组件化开发可以让组件使用模块化,大大提高组件重用性。

7、在性能和用户体验上,无疑React Native会更胜一筹。

8、在开发成本上,React Native要高于Ionic,这个简单明了,不解释。

9、在学习成本和学习曲线上。React Native要比Ionic难,学习成本更高,门槛也更高。

10、在成熟度和发展空间上,React Native刚推出不久,尽管目前各种坑也在不断地暴露,而Facebook将React Native开源的做法,也让React Native的未来发展空间更具有无限的可能性和暇想空间;Ionic所依靠的HTML5、Cordova、Angular JS等技术已都是非常成熟了。

 

总结:React Native是混合应用(Hybrid App)开发的未来,甚至是App开发的未来。

 

关于这部分的话题,可以参考以下链接:

Ionic Framework vs React Native

Native vs Ionic vs Nativescript vs React Native

Ionic vs React Native — Text Blast Case Study

 

3、资源

(1)文档

React Native 官方文档

React Native中文文档(极客学院)

React Native 中文网

 

(2)基本

React Native For Beginners – The Next Big Thing?

React-Native layout examples

Cold Dive into React Native: A Beginner’s Tutorial

Why You Should Consider React Native For Your Mobile App

Beginning Mobile App Development with React Native

React Native Tutorial: Building Apps with JavaScript

Execution sequence of a React component’s lifecycle methods

The Component Lifecycle

React Native 中组件的生命周期

深入浅出 React Native:使用 JavaScript 构建原生应用

react-native 之布局篇

React Native 基础练习指北1

React Native 基础练习指北2

React Native通信机制详解

ReactNative 开发实践

 

(3)学习专题

USE REACT NATIVE

React Native 入门指南

江清清博客React Native专题

 

(4)专项文章

React Native ListView with Section Headers

Dive into React Native performance

Making React Native apps accessible

BUILDING A NATIVE SOUNDCLOUD ANDROID APP WITH REACT NATIVE AND REDUX

React Native Animations

React-native Animated API Basic Example

The Shapes of React Native

React-native press and hold button actions

新手理解Navigator的教程

 

(5)组件

https://js.coach/

 

(6)其他

https://rnplay.org/

 

(持续更新)

那时那我

随遇,随缘,随安,随喜!

发表评论

电子邮件地址不会被公开。 必填项已用*标注