前端学习 | React-Native 组件生命周期

在React-Native开发中，组件的生命周期和我们密不可切，了解生命周期利于我们观察组件的变化过程。组件生命周期可以先简单分为三个阶段：实例化、存在和销毁。

一.实例化阶段

getDefaultProps

用于设置初始化默认props属性。

getInitialState

用于设置初始化默认state属性，ES5一般使用的语法。在ES6中推荐使用state初始在constructor中实现。

componentWillMount

渲染之前调用，主要是在组件被首次渲染之前做些操作，比如要在首次渲染之前修改一些初始state，并且this.setState不会多次触发渲染，整个生命周期执行一次。

Render

组件的渲染函数，返回JSX或其他组件，用于开始渲染生成虚拟DOM。

componentDidMount

渲染之后调用一次，此时组件已经首次加载出来了。一般这里适合进行组件的初始化后的一些操作，比如发起网络请求等等。

二.存在阶段

componentWillReceiveProps

如果组件接收到新的props会调用，带有参数nextProps，是即将被设置的属性，这时的this.props看还可以表示旧的属性，因此可以根据两者的变化来选择性地执行相应的函数。

shouldComponentUpdate

如果组件接收到新props和改变state后会调用，shouldComponentUpdate带有两个参数：nextProps 和 nextState，都表示即将被设置的属性和状态。通过返回的bool类型判定组件是否需要更新渲染，默认返回true，常用于性能优化减少不必要的页面渲染。

componentWillUpdate

如果shouldComponentUpdate返回true后将调用此方法，即更新渲染之前调用，表示组件即将被更新渲染。值得一提的是，这个函数里面，你不能使用this.setState来修改状态。

componentDidUpdate

更新渲染之后被调用，此函数中组件UI已经更新渲染完成，带有参数prevProps和prevState，分别代表了渲染结束组件的参数和状态。

三.销毁阶段

componentWillUnmount

组件移除之前被调用，通常是做清理操作，比如取消定时器。