一、prop,state,ref
1.ref:引用一个组件(是从render中返回该组件实例)
2.props:组件中的属性,
2.2不同组件之间传值
2.3子组件向父组件传值
3.state:组件中的状态
父组件向子组件传值
二、react-native组件思想
react-native的组件其实是采用的react的组件思想,所以强烈推荐先把react给看了最重要的就是组件生命周期(所有开发的都有开发周期的说法):
生命周期函数:
(1)getDefaultProps 实例化调用,以后不再调用,确定默认属性props
(2)getInitialState初始化状态state,常用于改变组件状态
(3)componentWillMount组件将被加载前,可最后一次初始化状态
(4)componentDidMount组件被加载后,常用于交互,如设置计时setTimetou或者setInterval,或者发起网络请求
(5)componentWillUpdate组件刷新前调用
(6)componentDidUpdate组件刷新后
(7)componentWillUnMount组件卸载,用于清除计时,监听
(8)componentWillReceiveProps重新渲染时,调用此此组件,可对子组件props或state进行修改
(9)shouldComponentUpdate判定是否需要重新渲染组件
运行经过:
这里梳理一下运行经过,组件一开始由(1)确定默认属性this.props,由(2)初始化this.state,到组件加载前即(3)时,一般在这时加入监听addListener,以及加入过场动画,然后render进行渲染,到(4)表示组件加载完成,接着组件进入运行状态
组件在运行中,有以下几种情况:
1.直接结束,到达(7)表示组件即将卸载销毁,一般这时候销毁监听removeAllListeners
2.状态state改变,到达(9)组件判断是否重新渲染时调用,是根据你的state状态有没有改变页面判定(有兴趣可深入了解(9)提高组件判定效率从而提升组件效率)
2.1不重新渲染,回到组件运行状态
2.2重新渲染,进入(5)组件即将更新,然后render渲染,所有state更新并改变界面,进入(6)组件更新完毕然后进入运行状态
3.又或者默认属性props改变,和状态state改变一样的流程,进行判定
三、react-native的两种写法
1.ES 5(类似jquery.js的模块导入)
2.ES 6
领取专属 10元无门槛券
私享最新 技术干货