react-native--生命周期

Posted 2022-12-09 time_iter

一：

二：如图，可以把生命周期大致分为三个阶段
第一阶段：组件第一次绘制
第二阶段：组件运行和交互
第三阶段：组件卸载和消亡阶段

三：生命周期回调函数详解
－1:getDefaultProps():
在组件创建之前，会先调用一次本方法，全局调用一次。严格来说，这不是组件声明周期的一部分，在组件被创建并加载的时候，首先调用getInitialState()来初始化组件的状态；

－2：componentWillMount()：
调用时机是在组件创建，并初始化了状态之后，在第一次绘制render()调用；在整个生命周期中，只被调用一次；

－3:componentDidMount():
在组件第一次绘制之后，会调用本方法通知组件已经加载完成；从这个函数开始，就可以和js进行交互了；本函数也是会被调用一次，调用完成之后，就进入稳定运行状态，等待事件触发；

－4:componentWillReceiveProps():
如果组件收到新的属性(props),会调用本方法；输入参数nextProps是即将被设置的属性，旧的属性还是可以通过this.props来获取。在本函数可以根据属性的变化，通过调用this.setState()来更新组件状态，这里的更新是安全的，不会出发额外的 render()；

－5:shouldComponentUpdate():
组件接收到新的属性和状态改变事，会调用本方法,组件返回true来决定ui是否需要更新

－6:componentWillUpdate():
若组件状态或属性改变，并且shouldComponentUpdate()返回true()时，就会开始更新组件，并且调用本函数；在本函数中，不能使用this.setState来修改状态值；

－7:componentDidUpdate():
调用了 render()更新完成界面之后，会调用本函数来得到通知；

－8:componentWillUnmount()()：
当组件要被从界面上移除的时候，就会调用本函数，可以做一些组件的清理工作，如，取消计时器，网络请求等；

总结：
在生命周期中，可以使用setState的地方有三处，方法分别为：

componentWillMount();

componentDidMount();

componentWillReceiveProps();