首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

react-native总结心得

一、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

  • 发表于:
  • 原文链接http://kuaibao.qq.com/s/20180305G0N0CC00?refer=cp_1026
  • 腾讯「腾讯云开发者社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 cloudcommunity@tencent.com 删除。

扫码

添加站长 进交流群

领取专属 10元无门槛券

私享最新 技术干货

扫码加入开发者社群
领券