react native组件的生命周期

react native组件的生命周期

一、当页面第一次加载时，会依次调用：

constructor()

componentWillMount()： 这个函数调用时机是在组件创建，并初始化了状态之后，在第一次绘制  render() 之前。可以在这里做一些业务初始化操作，也可以设置组件状态。这个函数在整个生命周期中只被调用一次。

render()：组件渲染

componentDidMount() ：虚拟 DOM 已经构建完成，你可以在这个函数开始获取其中的元素或者子组件了。需要注意的是，RN 框架是先调用子组件的  componentDidMount()，然后调用父组件的函数。从这个函数开始，就可以和 JS 其他框架交互了，例如设置计时  setTimeout 或者  setInterval，或者发起网络请求。这个函数也是只被调用一次。这个函数之后，就进入了稳定运行状态，等待事件触发。

 

二、页面状态state更改时：

例子，点击页面组件，数字加1:

constructor(props) {
    super(props)
    console.log('_____constructor_____')
    this.state = {
         count: 0
    }
}
render() {
     console.log('___render___')
     return (
        <View>
            <Text onPress = {() =>{
                this.setState({
                  count: this.state.count+1
                })
            }}>
          点击增加
         </Text>
         <Text>{this.state.count}</Text>
        </View>
    );
}

            

这个时候生命周期会依次调用：

shouldComponentUpdate()：当组件接收到新的属性和状态改变。

componentWillUpdate()：如果组件状态或者属性改变，并且上面的 shouldComponentUpdate(...) 返回为 true，就会开始准更新组件

render()：组件渲染

componentDidUpdate()：属性和状态完成更新

 

三、属性（props）改变时：

componentWillReceiveProps()：组件收到新的属性（props）

 

四、组件关闭

componentWillUnmount()：组件要被从界面上移除的时候，在这个函数中，可以做一些组件相关的清理工作，例如取消计时器、网络请求等

 

注意：

shouldComponentUpdate()默认返回true，true 表示需要更新，继续走后面的更新流程。

shouldComponentUpdate() {
        console.log('_____shouldComponentUpdate_____')
        return true
    }

当返回值为false时，则不更新，直接进入等待状态。componentWillUpdate()、render()、componentDidUpdate()都不会执行