React Native 初体验

React

React 是一套可以用简洁的语法高效绘制 DOM 的框架,React 独创了 Virtual DOM 机制。Virtual DOM 是一个存在于内存中的 JavaScript 对象,它与 DOM 是一一对应的关系,也就是说只要有 Virtual DOM,我们就能渲染出 DOM。
当界面发生变化时,得益于高效的 DOM Diff 算法,我们能够知道 Virtual DOM 的变化,从而高效的改动 DOM,避免了重新绘制 DOM。

React Native

我第一次看到这个词看成了“react naive”,what?反应?天真,肤浅?让我想起了一位长者的循循教诲……
iOS 7 推出了一个JavaScriptCore框架,可以让 OC 和 JS相互调用,在 OC 这边可以可以通过 JS 上下文获得对象,方法各种信息,JS 要实现回调,可以通过 block 和 协议两种方法。React Native就是一个基于 JavaScript,具备动态配置能力,面向前端开发者的移动端开发框架。参考网上一篇文章的配图:

one

如何启动

从AppDelegate中可以看到,会利用jsbundle去初始化rootView,之后就是各种调用了

1
2
3
4
5
6
7
8
9
10
11
12
jsCodeLocation = [[RCTBundleURLProvider sharedSettings] 
jsBundleURLForBundleRoot:@"index.ios" fallbackResource:nil];
RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation
moduleName:@"GitHubPopular"
initialProperties:nil
launchOptions:launchOptions];
self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds];
UIViewController *rootViewController = [UIViewController new];
rootViewController.view = rootView;
self.window.rootViewController = rootViewController;
[self.window makeKeyAndVisible];
[SplashScreen show];

基本语法

下面是初始化一个 RN 项目后的index.ios.js文件,和一般的 js 不同,它语法是JSX,是Facebook退出的js语法糖,可以看到可以在 js 里利用HTML语法来创建虚拟DOM,用StyleSheet.create方法配置各组件的样式,最后定义应用入口。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View
} from 'react-native';

export default class GListViewDemo extends Component {
render() {
return (
<View style={styles.container}>
<Text style={styles.welcome}>
Welcome to React Native!
</Text>
<Text style={styles.instructions}>
To get started, edit index.ios.js
</Text>
<Text style={styles.instructions}>
Press Cmd+R to reload,{'\n'}
Cmd+D or shake for dev menu
</Text>
</View>
);
}
}

const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
instructions: {
textAlign: 'center',
color: '#333333',
marginBottom: 5,
},
});

AppRegistry.registerComponent('GListViewDemo', () => GListViewDemo);

当然,RN也有一系列的HOOK方法,和各种样式属性,以及flexbox布局,这都需要时间去学习和实践。
在基本的体验后,RN原型开发速度肯定比原生要快很多,对于前端开发来说,只需要对原生平台有所了解即可上手。但由于OC 和 JS 相互调用和切换的关系,存在一定的时间开销,性能有损耗,官方版本RN无法做到视图重用,取代原生是不可能的。但用RN(或者JS框架)来快速成型,然后在迭代版本中与原生混编,可能是以后新应用上线的套路。

安装

一行代码

1
npm install -g yarn react-native-cli

测试安装,初始化一个项目,并运行

1
2
3
react-native init AwesomeProject
cd AwesomeProject
react-native run-ios

本文标题:React Native 初体验

文章作者:Sephilex

发布时间:2017年02月08日 - 21:02

最后更新:2020年03月16日 - 08:03

原始链接:https://sephilex.com/2017/02/08/React Native初体验/

许可协议: 署名-非商业性使用-禁止演绎 4.0 国际 转载请保留原文链接及作者。

坚持原创技术分享,您的支持将鼓励我继续创作!