我们分别用RN和原生实现同一个实例，利用这个demo，比较一下iOS与React Native这两种开发方式和开发思想的不同之处。
下面是这个计时器demo，功能比较简单，只有一个显示时间的区域和两个按钮，点击开始按钮将开始计时，点击结束将重置计时器，恢复初始值。计时开始后，能够暂停和继续计时功能，具体看下图。
Demo地址：https://github.com/superzcj/ZCJTimeDemo
React Native与原生布局对比
iOS定时器
页面比较简单，直接在storyboard中拖几个控件搭下界面，如下图
React Native定时器
在React Native中，我们使用html标签、css样式、flexbox来对界面进行布局。以demo中的WatchFace和WatchControl组件为例，我们看一看RN中的布局方式。
我们将定时器拆分为WatchFace和WatchControl两个组件，将这两个组件嵌套到一个共同的组件View上就组成一个定时器界面。
WatchFace组件由单个Text组件构成，用来显示定时时间：
<Text style={styles.totalTime}>
//时间
</Text>
totalTime: {
fontSize: 60, //文本字体大小
textAlign: 'center', //文本水平居中
paddingTop: 70, //文本距上边距距离
paddingBottom: 30, //文本距下边距距离
},
WatchControl由View、TouchableOpacity、Text组件构成，用来控制定时器的开始和结束：
<View style={styles.watchControl}> //主视图
<TouchableOpacity style={styles.btn}> //左按钮 结束
<Text style={styles.endText}>
//左按钮文本
</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.btn}> //右按钮 开始
<Text style={styles.startText}>
//右按钮文本
</Text>
</TouchableOpacity>
</View>
//主视图样式
watchControl: {
backgroundColor: '#f3f3f3', //主视图背景色
height: 100, //主视图高度
paddingHorizontal: 60, //按钮距主视图左右边距距离
flexDirection: 'row', //按钮在主视图中水平布局
alignItems: 'center', //按钮在主视图中垂直居中
justifyContent: 'space-between' //按钮在主视图中两端对齐
}
//按钮样式
btn: {
backgroundColor: 'white', //按钮颜色
width: 70, //按钮宽度
height: 70, //按钮高度
borderRadius: 35, //按钮圆角
alignItems: 'center', //按钮文本水平居中
justifyContent: 'center', //按钮文本垂直居中
},
//开始按钮文本样式
startText: {
fontSize: 14, //开始按钮字体大小
color: '#60B644' //开始按钮字体颜色
},
//结束按钮文字样式
endText: {
fontSize: 14, //结束按钮字体大小
color: '#555' //结束按钮字体颜色
},
最后将我们自定义的两个组件WatchFace和WatchControl嵌套到组件View中就构成了一个定时器界面：
<View style={{backgroundColor: '#fff'}}>
<WatchFace
totalTime={this.state.totalTime}
/>
<WatchControl
isStart={this.state.isStart}
startWatch={()=>this.startWatch()}
stopWatch={()=>this.stopWatch()}
/>
</View>
React Native状态驱动视图机制与MVC模式对比
iOS定时器
首先定义一个计时器对象timer和一些变量，表示计时器当前所处的状态。
@interface ViewController ()
{
dispatch_source_t timer;
}
@property (weak, nonatomic) IBOutlet UIButton *startButton;
@property (weak, nonatomic) IBOutlet UILabel *timeLabel;
@property (nonatomic) BOOL isStart;
@property (nonatomic) BOOL isPause;
@property (nonatomic) BOOL isCreat;
@property (nonatomic,assign) int timeCount;
@end
主要功能逻辑代码如下，
- (IBAction)runKeepTimeAction:(id)sender {
if (!_isStart) {
[self startToCountTime];
_isPause = NO;
[sender setTitle:@"暂停" forState:UIControlStateNormal];
}else
{
dispatch_suspend(timer);
_isPause = YES;
[sender setTitle:@"继续" forState:UIControlStateNormal];
}
_isStart = !_isStart;
}
- (IBAction)stopTimeAction:(id)sender {
if (_isCreat){
if (_isPause == YES) {
dispatch_resume(timer);
}
dispatch_source_cancel(timer);
[self.startButton setTitle:@"开始" forState:UIControlStateNormal];
_timeLabel.text = @"00:00:00";
_isStart = NO;
_timeCount = 0;
_isCreat = NO;
}
}
在这个demo中，在Controller中，根据用户操作，开启、暂停、停止计时等，并更新UI。
React Native计时器
在React中，则完全是一种新的思路，开发者从功能的角度出发，将UI分成不同的组件，每个组件都独立封装。
对于WatchFace，负责自己的样式、布局以及逻辑，提供一个totalTime API从外界获取计时时间并显示。
class WatchFace extends Component {
static propTypes = {
totalTime: React.PropTypes.string.isRequired,
};
render() {
return (
<Text style={styles.totalTime}>
{this.props.totalTime}
</Text>
);
}
}
WatchControl，与WatchFace一样只负责自己部分的UI和逻辑，另外它也管理自己的点击事件。在点击“开始”按钮事件中，一方面将自身的内容更改为“暂停”，另一方面它调用上层的计时开始方法，startWatch是一个回调函数，由上层父组件传递给子组件WatchControl，触发后回调，这也是React Native中组件间通信的一种方式。
class WatchControl extends Component {
static propTypes = {
startWatch: React.PropTypes.func.isRequired,
stopWatch: React.PropTypes.func.isRequired,
isStart: React.PropTypes.bool.isRequired
};
constructor(props) {
super(props);
this.state = {
startBtnText: '开始',
}
}
startWatch() {
if (this.props.isStart) {
this.props.startWatch()
this.setState({
startBtnText: '继续',
});
}
else {
this.props.startWatch()
this.setState({
startBtnText: '暂停',
});
}
}
stopWatch() {
this.props.stopWatch();
this.setState({
startBtnText: '开始',
});
}
render() {
return (
<View style={styles.watchControl}>
<TouchableOpacity style={styles.btn} onPress={()=> this.stopWatch()}>
<Text style={styles.endText}>
结束
</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.btn} onPress={()=> this.startWatch()}>
<Text style={styles.startText}>
{this.state.startBtnText}
</Text>
</TouchableOpacity>
</View>
);
}
}
整个demo的业务逻辑基本上都在最外层的View中处理，包括计时、暂停、继续、停止，通过回调函数startWatch()和stopWatch()来管理计时器。
startWatch() {
if (this.state.isStart) {
this.setState( {
isStart: false,
})
clearInterval(this.interval);
}
else {
this.setState({
isStart: true,
})
let hour, minute, second;
this.interval = setInterval(
() => {
let timeCount = this.state.timeCount;
hour = Math.floor(timeCount / 3600);
minute = Math.floor((timeCount - (hour * 3600)) / 60);
second = Math.floor(timeCount % 60);
this.setState({
timeCount: timeCount + 1,
totalTime: (hour<10? "0"+hour:hour)+":"+(minute<10? "0"+minute:minute)+":"+(second<10? "0"+second:second),
})
}, 1000
);
}
}
stopWatch() {
this.setState({
timeCount: 0,
totalTime: "00:00:00",
isStart: false,
})
clearInterval(this.interval);
}
看过了上面两个实例，我们开始作个分析对比。
在iOS的实例中，用传统的MVC模式实现。在开始/停止按钮事件触发时，手动控制定时器的开、关，手动更新按钮上的文字和计时数字。
React Native基于数据驱动视图的思想，数据是输入，视图是输出，只要数据变化，就重新渲染视图。它不再关心如何操纵界面，每次数据有变化，调用setState方法，都将界面重新刷新。在上面的实例中，首先将Text标签与totalTime属性绑定，当totalTime值改变时，自动重新渲染该标签。
<View style={styles.watchFace}>
<Text style={styles.totalTime}>{this.props.totalTime}</Text>
</View>
当点击开始计时时，生成新的timeCount计时数字，修改计时状态isStart，然后系统自动刷新页面。利用Virtual DOM找到有变化的那个视图，并重新渲染。
let hour, minute, second;
this.interval = setInterval(
() => {
let timeCount = this.state.timeCount;
hour = Math.floor(timeCount / 3600);
minute = Math.floor((timeCount - (hour * 3600)) / 60);
second = Math.floor(timeCount % 60);
this.setState({
timeCount: timeCount + 1,
totalTime: (hour<10? "0"+hour:hour)+":"+(minute<10? "0"+minute:minute)+":"+(second<10? "0"+second:second),
})
}, 1000
小结
React Native以数据驱动视图的方式，将繁琐的视图操作转换为清晰的数据操作，让开发者只关注底层的数据逻辑。通过Virtual DOM，实现界面的局部更新，保证了页面的高性能渲染。React基于组件化的思想，重新审视UI的构成，将UI上每一个功能相对独立的模块定义成组件，提高了代码的可重用性、可维护性。
编译与调试对比
编译
原生开发需要编译的过程，把程序编译成机器语言，再与各种库链接后生成平台对应的可执行文件，最后由操作系统调度执行。因此，改动了任何原生代码，都需要重新编译运行才能看到效果。这个编译过程又比较漫长，项目稍微大一点，耗时短则一分钟，长则五六分钟。
JS是一种脚本语言，它不需要经过编译，能够直接在浏览器上执行，因此RN无需重新运行就可以看到更改后的变化。RN虽然没有类似原生的编译过程，但它有一个转换过程，对代码和资源文件做一些处理，如用ES6语法写的代码不能直接运行，需要转换为JavaScript才能跑起来，JSX代码转换为JavaScript代码等。这个转换过程比较快的，所以RN的编译速度远远快于原生。
调试
调试RN代码有多种方式，其中一种是使用Chrome开发者工具。在Chrome开发者工具中，类似xcode，同样有断点调试，控制台输出等调试工具。Chrome开发者工具如下图，使用方法大致与xcode相同：
React Native是状态驱动的，这样我们就能够跟踪记录页面中发生的数据变化，实现保存状态快照、历史回滚/时光旅行的调试工具。React Developer是这样一个官方出的调试工具，能够实时查看页面数据的状态，方便我们调试APP。相比原生调试方式，避免了繁琐的打断点和监控变量的步骤，提升了开发和调试效率。
如下图：
小结
RN继承了前端开发的优点，无论在编译效率还是调试方式上，都有可圈可点之处，它的即时刷新、实时监控APP数据状态特性，都大大提升了UI开发的效率。
参考资料：
http://www.infoq.com/cn/articles/subversion-front-end-ui-development-framework-react
https://blog.cnbang.net/tech/2495/
网友评论