React Native
1.React Native之了解
1.1 Native开发优势:
Native的原生控件有更好的体验;
Native有更好的手势识别;
Native有更合适的线程模型,尽管Web Worker可以解决一部分问题,但如图像解码、文本渲染仍无法多线程渲染,这影响了Web的流畅性。
1.2 React Native优势:
1.既拥有Native的用户体验、又保留React的开发效率(RN通过JavaScript Core解析JavaScript模块,转换成原生Native组件渲染)
2.React Native基本完成了对多端的支持,可以灵活的使用HTML和CSS布局,使用React语法构建组件,实现:H5, Android, iOS多端代码的复用
3.追求极致的用户体验:实时热部署(CodePush在修复一些小问题和添加新特性的时候,不需要经过二进制打包,可以直接推送代码进行实时更新。)
4.UI排版的问题:
类似HTML + CSS的排版使用原生控件渲染的框架:
BeeFramework,BeeFramework虽然开源多年,而且有2000多的star数,但是受限于它自身的影响力以及框架的复杂性,一直没有很大的成功。
React Native采用了类似HTML + CSS的排版,可以内嵌到模块,也可以全局使用,定义样式变得非常简单通用。引入了Flexbox布局,使用很方便,学习起来也更简单。
5.动态绑定,这个React的基本功能,被带到了客户端开发中来,数据和视图是动态绑定的,数据发生变化,视图会跟着变化,很多操作视图的代码都可以省略了。
6.引入了方便的npm管理,有大量现成的nodejs包可以用(例如moment,underscore等常用模块),还可以把自己项目模块搞到内部npm上做通用组件,另外,npm上还有不少别人写的react native的插件。
7.第三方组件里有一个可以把icon font引入项目的组件,可以在任何显示图标的地方直接用icon font显示
8.调试很方便,一次编译后,每次改了js代码,只需要在模拟器里command+R即可重新加载代码。有问题会直接报错,里面有代码行数等详细信息。
9.完整封装了各种js内置的方法,例如:setTimeout,setInterval,XMLHttpRequest,localstorage,console.log等,都是用oc原生方法封装的。
10.引入ES6的支持,可以使用各种新特性,例如最常用的箭头函数,解决this作用域乱套的问题。
1.3 React Native是什么?
flex基本概念采用Flex布局的元素,称为Flex容器(flex container),简称"容器"。它的所有子元素自动成为容器成员,称为Flex项目(flex item),简称"项目"。
容器默认存在两根轴:水平的主轴(main axis)和垂直的交叉轴(cross axis)。主轴的开始位置(与边框的交叉点)叫做main start,结束位置叫做main end;交叉轴的开始位置叫做cross start,结束位置叫做cross end。
项目默认沿主轴排列。单个项目占据的主轴空间叫做main size,占据的交叉轴空间叫做cross size。
flex常用属性总结:
容器属性:
flex-direction(主轴方向)
flex-wrap(是否换行)
justify-content(item在主轴对齐方式) ,
align-items(item在交叉轴上如何对齐) ,
元素属性:
Flex:弹性宽度:宽度=item该flex值/该容器所有item的flex和*(容器宽度-该容器item没有设置flex的直接宽度)
align-self:性允许单个项目有与其他项目不一样的对齐方式,可覆盖align-items属性
2.2 Touchable系列组件:
高亮触摸TouchableHighlight:
当手指点击按下的时候,该视图的不透明度会进行降低同时会看到相应的颜色,其实现原理则是在底层新添加了一个View。TouchableHighlight只能进行一层嵌套,不能多层嵌套。
常用属性:
activeOpacity number设置组件在进行触摸的时候,显示的不透明度(取值在0-1之间)
onHideUnderlay function方法当底层被隐藏的时候调用
onShowUnderlay function方法当底层显示的时候调用
style可以设置控件的风格演示,该风格演示可以参考View组件的style
underlayColor当触摸或者点击控件的时候显示出的颜色
不透明触摸TouchableOpacity
该组件封装了响应触摸事件;当点击按下的时候,该组件的透明度会降低。等等
代码示例
style={styles.button}
source={require('./button.png')}
/>
style={styles.button}
source={require('image!myButton')}
/>
2.3组件生命周期:
基本概念一:实例化阶段函数分析:
1,getDefaultProps
初始化一些默认的属性,通常会将固定的内容放在这个函数中进行初始化和赋值;
可以利用this.props获取组件在这里初始化它的属性,组件自己不可以自己修改props(即:props可认为是只读的)
2,getInitialState
用于对组件的一些状态进行初始化;在以后的过程中,会再次调用,所以可以将控制控件的状态的一些变量放在这里初始化,如控件上显示的文字,可以通过this.state来获取值,通过this.setState来修改state值,一旦调用了this.setState方法,组件一定会调用render方法,React框架会自动根据DOM的状态来判断是否需要真正的渲染。
3,componentWillMount
相当于OC中的ViewWillAppear方法.
4,render
render是一个组件中必须有的方法,本质上是一个函数,并返回JSX或其他组件来构成DOM,和Android的XML布局类似,注意:只能返回一个顶级元素;可通过this.state和this.props数据。
5,componentDidMount
在调用了render方法后一般会在这个函数中处理网络请求等加载数据的操作;因为UI已经成功被渲染出来,所以放在这个函数里进行请求操作,不会出现UI上的错误。
二,存在期阶段函数功能分析:
componentWillReceiveProps
指父元素对组件的props或state进行了修改
shouldComponentUpdate
一般用于优化,可以返回false或true来控制是否进行渲染
componentWillUpdate
组件刷新前调用,类似componentWillMount
componentDidUpdate
更新后的hook
三、销毁期阶段函数功能分析:
用于清理一些无用的内容,如:点击事件Listener,只有一个过程:componentWillUnmount
2.4请求网络数据:
React Native中通常是通过Ajax (异步的JavaScript和XML)请求从服务器获取数据,然后在componentDidMount方法中创建Ajax请求,等到请求成功,再用this.setState方法重新渲染UI。
2.5 OC, Recat Native混合开发:
直接在iOS项目中写代码就能实现OC,reactNative混合开发,在需要引入React Native的位置引用该模块即可
AppDelegate.m部分代码
jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index.ios" fallbackResource:nil];
RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation
moduleName:@"TGMeituan"
initialProperties:nil
launchOptions:launchOptions];
index.ios.js部分代码
AppRegistry.registerComponent('TGMeituan', () => TGMeituan);
xcode的代码引用了index.ios.js文件中的'TGMeituan',
index.ios.js其输出了index.ios.js定义的一个TGMeituan组件
AppDelegate.m中在合适的位置引用rootView,即可实现混合开发
export default class TGMeituan extends Component {
render() {
return (
);
}
}
2.6 ES5和ES6的React Native差异化:
区别1:创建组件
组件是一个自定义的js对象,在es5中使用React.createClass();在es6中必须继承React.component,
区别2:组件的属性props
在ES6中,其为属性:defaultProps(可以标识static定义在class内,也可以定义在class外),而在ES5中,其为方法:getDefaultProps: function(){return {name:value}};
区别3:组件的状态state
上图左为ES5 ,右为ES6
2.7 React Native不足:
组件不全,第三方组件也不全,遇到某些特殊功能,需要捣鼓很久,例如摄像相关的,文件读写,文件上传之类的组件。
性能并非媲美原生,还是有一些损耗的,特别是交换大数据的时候,例如读取相册。
ios和android代码并非通用,有可能会需要维护两套,或者在代码内做一些判断。
并非网上大家说的,写一次代码,多端通用,网页版和客户端版完全不是一个概念,只有部分代码可重用。
把代码都打包到bundle里面,不知道苹果对这种开发方式是否会不太喜欢,甚至拒绝上线。
打包出来的JSBundle过大;
首次进入RN页面加载缓慢;
稳定性不够,有大量因为RN导致的Crash:
iOS的Crash,基本都来自RCTFatalException,都是RCTFatal抛出错误信息所知,处理也相对简单,设置自己的Error Handler即可。
void RCTSetFatalHandler(RCTFatalHandler fatalHandler);
大数据量时ListView加载卡顿。
3.ListView重用优化
3.1 ListView不能重用的原因
首先RN的ListView其实是基于RN的RCTScrollView来实现的。它也实现了类似UIKit中通过DataSource来控制数据,以及是否要做一些界面的刷新
这个View会有一个RCTView会引用它。当这个View被移出屏幕之外,再观察他的内存引用时,它就只被RCTUIManager引用了:
RN为了能够保持一定的UI上的性能,他用UImanager来管理所有的UI元素,只要创建过的,还有可能被显示在界面上的东西,他都用这个UImanager来去管理,从而在进行Dom Diff时能够减少View的创建和销毁。
3.2 ListView多做了什么?
然后,我们再来看看ListView本身比RCTScrollView多做的哪些东西,首先ListView包含两个属性—- initialListSize和pageSize,initialListSize决定了第一屏加载item的数量,pageSize则是当你需要加载更多的时候,每次需要载入多少的item,这样做的主要目的在尽量减少你手机加载第一屏时所需要的时间。
还有就是它还实现了从JS端实现了Section Header,Header,Footer的封装,以及实现了监听onScroll事件,随着View的滚动动态的添加row view。
3.3那么ListView相当于UITableView少了一点什么呢?
怎么没有提到复用?
我们先看一下iOS的JS,JS里面只有一行代码
module.exports = require('ScrollView');
3.4 ListView性能优化解决方案
Bridge一个UITableView
在RN中我们要bridge一个RN的View组件,我们需要实现RCTComponent这个protocol,这里有两个很重要的方法
- (void)insertReactSubview:(id)subview atIndex:(NSInteger)atIndex;
-
(void)removeReactSubview:(id)subview;
这两个方法是RN做Dom Diff的关键
什么是Dom Diff呢
在界面发生变化前,界面存在一个Dom Tree,发生业务变化之后是另外一个Dom tree,Tree中的每个元素都有自己的引用值,Diff其实就是找出两个Tree的差异点来确定需要进行更新的节点。最终确定一个需要插入和删除的View的列表,并通知相应的Dom节点来处理。
但是RN的UI处理方式和原生对UI处理完全不一样,我们如何Bridge一个TableView呢,我们想到了一个方法。
我们创建一些VirtualView,他只是遵从了RCTComponent协议,他其实并不是一个真正的View,我把它形成一个组件,把它Bridge到JS,这就使得,你在写JSX的时候,就可以直接用VirtualView来去做布局了。在RN里面做布局的时候我们用VirtualView来做布局。但是最终在insertReactSubview时,我们把这些VirtualView当做数据去处理,通过VirtualView和RealView的对应关系,把它转化成一个真实的View对象添加到TableView中去。
用这个图来说,更清晰一些。
首先我们写的是一个JSX,React把它转化成Dom Tree,在进行Dom Diff后,React会调用insertReactSubview传入VirtualView,我们通过VirtualView生成Tree Data,
通过VirtualView和RealView的对应关系,我们创建RealView去真正的添加到原生的View上。
但是这里又产生另外一个问题,大家会自定义一个cell的一个对象来去做的。这个对象,能够接收你特定的数据,对这个cell重新去set一些控件的值,然后把界面更新。
但是在JS里面我们并没有办法这样做,在RN中,我们不可能动态的去往Native里面去加一个类。
那么我们是如何做到,在复用的时候对于Cell上面的子View能够去设置更新他的数据?
我们在所有子view上面我们也加上了tag属性,在更新数据的时候我们通过tag找到更新的子view上面的view对他做数据的更新的。所以并不是只有Cell有这样的tag,包括子view也会有这样的tag,这样就做到了可以获取到对应tag的子view并对子view的数据进行更新。
最后,为了客户端的同学在使用这个TableView时更好上手一些,我们把几乎整套的TableViewDataSource方法,全部照搬到了RN中,所以我们在创建这个ListView的时候我们需要去设置很多的回调方法,这样做也是为了能够更快的做一些界面的迁移工作。
3.5 ListView性能优化解决方案的缺点
首先既然它需要做映射,我们肯定需要做一个Virtualview到NativeView,大多数的cell里面如果做展示来用的话,Label和Image基本上能够满足大多数的需求了。所以我们现在只是做了Label和Image的对应工作,但在RN的一些官方控件,在这个view里面都是没法直接使用的。
还有一个缺点就是说,因为我们是按照TableView的逻辑去做的,这个逻辑其实在Android上可能不适用,因为Android的ListView实现跟iOS完全不是一个逻辑,导致使用这个ListView的RN代码,可能没法直接应用到Android里面去。
网友评论