react native生命周期学习总结

本文详细介绍了React组件的生命周期,包括Mounting、Updating和Unmounting三个阶段,并解释了各个阶段对应的处理函数,如componentWillMount、componentDidUpdate等。此外,还讲解了getDefaultProps和getInitialState等初始化函数的作用。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

rn组件的生命周期
组件的生命周期分成三个状态:
  ● Mounting:已插入真实 DOM
  ● Updating:正在被重新渲染
  ● Unmounting:已移出真实 DOM
React为每个状态都提供了两种处理函数,will 函数在进入状态之前调用,did 函数在进入状态之后调用,三种状态共计五种处理函数。
  ● componentWillMount()
  ● componentDidMount()
  ● componentWillUpdate(object nextProps, object nextState)
  ● componentDidUpdate(object prevProps, object prevState)
  ● componentWillUnmount()
此外,React 还提供两种特殊状态的处理函数。
  ● componentWillReceiveProps(object nextProps):已加载组件收到新的参数时调用

  ● shouldComponentUpdate(object nextProps, object nextState):组件判断是否重新渲染时调用


再加上初始化属性和状态(getDefaultProps和getInitialState),以及渲染(render()),共计10个回调函数:

1、object getDefaultProps()
用于初始化一些默认的属性,通常会将固定的内容放在这个函数中进行初始化和赋值;  
在组件中,可以利用this.props获取在这里初始化它的属性,由于组件初始化后,再次使用该组件不会调用getDefaultProps函数,所以组件自己不可以自己
改props(即:props可认为是只读的),只可由其他组件调用它时在外部修改,再传入.

2、object getInitialState()
用于对组件的一些状态进行初始化;
由于该函数不同于getDefaultProps,在以后的过程中,会再次调用,所以可以将控制控件的状态的一些变量放在这里初始化,如控件上显示的文字,
可以通过this.state来获取值,通过this.setState来修改state值, 比如:
this.setState({ 
name: 'yang',
age: 23  
}); 注意:一旦调用了this.setState方法,组件一定会调用render方法,对组件进行再次的渲染,不过,如果React框架会自动根据DOM的状态来判断是否需要真正的
染。
3、componentWillMount ()
在组件将要被加载在视图上之前调用。

4、render()
这个方法是必须的,对视图进行渲染,也可以返回 null 或者 false 来表明不需要渲染任何东西。

5、componentDidMount()

在调用了render方法后,组件加载成功并被成功渲染出来以后,所要执行的后续操作, 一般会在这个函数中处理网络请求等加载数据的操作; 因为UI已经成功被渲染 出来, 所以放在这个函数里进行请求操作,不会出现UI上的错误。

6、componentWillReceiveProps(object nextProps)
在组件接收到新的 props 的时候调用,指父元素对件的props或state进行了修改,在初始化渲染的时候该方法不会调用。可以用于更新 state 来响应某个 prop 的改变。

7、shouldComponentUpdate(object nextProps, object nextState)
在接收到新的 props 或者 state,将要渲染之前调用,如果确定新的 props 和 state 不会导致组件更新,则此处应该 返回 false。返回true将进行渲染。

8、componentWillUpdate(object nextProps, object nextState)
在接收到新的 props 或者 state 并且shouldComponentUpdate返回true时调用。
 
9、componentDidUpdate(object prevProps, object prevState)
在组件的更新已经同步到 DOM 中之后立刻被调用。

10、componentWillUnmount()
在组件从 DOM 中移除的时候立刻被调用。在该方法中执行任何必要的清理,比如无效的定时器,或者清除在 componentDidMount 中创建的 DOM 元素。




评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值