文章标题

来源:互联网 发布:mysql 5.17 ngram 编辑:程序博客网 时间:2024/06/03 17:48

1.React Native介绍
React Native (简称RN)是Facebook于2015年四月开源的跨平台移动应用开发框架,是Facebook早先开源的Web UI框架 React 在原生移动应用平台的衍生产物,目前支持iOS和安卓两大平台。
该框架使用Javascript,类似于HTML的JSX,以及CSS来开发移动应用UI,因此熟悉Web开发的人只需很少的学习成本就可以转入移动应用开发。
RN运行时包含一个原生的主线程和一个JS线程,JS线程执行JS代码,负责界面布局和业务逻辑处理,原生线程负责界面渲染和原生组件的执行。RN里面尽量使用原生组件,避免重复造轮子。这样的好处,一是可以利用现有的大量的原生组件,降低入门门槛;二是可以达到跟原生应用一样的性能;三是通过JS封装过后的组件,可以支持跨平台。
JS在RN里面的作用类似于Python这样的支持调用原生C库的脚本语言,都是起着“胶水”的作用。复杂计算和底层功能都通过调用原生接口来完成,流程控制和业务逻辑则在“胶水”语言里完成。这样既提高了开发效率,又兼顾了性能。

2.RN生命周期:
实例化阶段:
在日常开发中,最为常用的就是实例化阶段,因为该阶段是组件的构建,展示阶段。
constructor(props){
super(props);
this.state = {
loopsRemaining: this.props.maxLoops,
};
}
  该函数用于对组件的一些状态进行初始化,该状态是随时变化的(也就是说该函数会被多次调用),比如ListView的datasource,rowData等等,同样的,可以通过this.state.XXX获取该属性值,同时可以对该值进行修改,通过this.setState修改
componentWillMount: 
  该函数类似于iOS中的VillWillAppear,在组件即将加载在视图上调用。
render: 
  该函数组件必有的,通过返回JSX或其他组件来构成DOM,换言之,就是组件的核心渲染过程。
componentDidMount:
  在执行完render函数之后,该函数被执行,我们通常可以在该函数当中做一些复杂操作,如网络请求。
存在阶段:
componentWillReceiveProps:
  组件将要修改props或者state
shouldComponentUpdate:
  常用于优化
componentWillUpdate:
  组件更新时调用
componentDidUpdate:
  组件更新完毕时调用
销毁阶段:
componentWillUnmount:
  通常做一些清理内容 

但是不要在componentWillMount里进行赋值,比如this.num = 10;在用this.num进行一些变化时会走componentWillMount这个方法,所以改变的时候老是又重新等于10,这是我之前遇到的一个问题。

3.props和state的不同点以及相同点
相同点
1.不管是props还是state的改变,都会引发render的重新渲染。
2.都能由自身组件的相应初始化函数设定初始值。
不同点
1.初始值来源:state的初始值来自于自身的constructor函数;props来自于父组件或者自身static defaultProps = {
autoPlay: false,
maxLoops: 10,
}; // 注意这里有分号(若key相同前者可覆盖后者)。
2.修改方式:state只能在自身组件中setState,不能由父组件修改;props只能由父组件修改,不能在自身组件修改。
3.对子组件:props是一个父组件传递给子组件的数据流,这个数据流可以一直传递到子孙组件;state代表的是一个组件内部自身的状态,只能在自身组件中存在。

4.react和原生桥接
首先需要在需要桥接的原生view中实现一个宏方法:
RCT_EXPORT_MODULE([js_name])
这个宏会导出一个模块,即要实现桥接,必须用这个宏把模块暴露给React的Bridge(括号中为空表示导出当前所在模块)
js中使用var ReactView = require(‘react-native’).NativeModules.ReactViewController;
即可获得该模块
当我们需要让js控制原生做一些事情的时候,需要用到RCT_EXPORT_METHOD(method)
当我们需要跳转到原生view时,就可以用这个方法,不过这里有个大坑,就是当js触发这个方法时,会将所有在这个原生view的属性值都改变,所以在这个方法里,所有的属性值都要重新获取,故navigationController就不能直接用,需要先手动获取当前viewController,再跳转
5.关于如何从原生向RN发送事件
发送事件可以随时向RN传值,比如从其他原生界面返回到RN原生视图时需要向RN传新的值,需要用到RCTBridge里的eventDispatcher,但是需要注意的是发送事件需要用到一个特殊的单例(ios平台)
在单例里的代码SendManager.m
+ (id)allocWithZone:(NSZone *) zone
{
static SendManager *sharedInstance = nil;
static dispatch_once_t onceToken;
dispatch_once(&onceToken, ^{
sharedInstance = [super allocWithZone:zone];
});
return sharedInstance;
}
- (void)sendMess:(NSString *)skuNum
[self.bridge.eventDispatcher sendAppEventWithName:@”Event”
body:@{@”num”: skuNum}];
}
然后需要发送时
[[SendManager allocWithZone:nil] sendMess:skuNum];
这是0.25.1版本我的写法,现在新的RN版本好像会有所不同,还在研究

0 0
原创粉丝点击