本文共 3531 字，大约阅读时间需要 11 分钟。

组件的生命周期

组件的生命周期一般分为这 4 个阶段：创建阶段、实例化阶段、运行（更新）阶段、销毁阶段。下面对各个阶段分别进行介绍。

• 创建阶段：该阶段主要发生在创建组件类的时候，在这个阶段中会初始化组件的属性类型和默认属性。

• 实例化阶段：该阶段主要发生在实例化组件类的时候，也就是该组件类被调用的时候触发。这个阶段会触发一系列的流程，按执行顺序如下：

  • constructor：构造函数，这里主要对组件的一些状态进行初始化。
  • componentWillMount：准备加载组件，可以在这里做一些业务初始化操作，或者设置组件状态。
  • render：生成页面需要的 DOM 结构，并返回该结构。
  • componentDidMount：组件加载成功并被成功渲染出来后执行。一般会将网络请求等加载数据的操作放在这里进行，保证不会出现 UI 上的错误。

• 更新阶段：该阶段主要发生在用户操作之后或者父组件有更新的时候，此时会根据用户的操作行为进行相应的页面结构的调整。这个阶段也会触发一系列的流程，按执行顺序如下：

  • componentWillReceiveProps：当组件接收到新的 props 时，会触发该函数。在该函数中，通常可以调用 this.setState 方法来完成对 state 的修改。
  • shouldComponentUpdate：该方法用来拦截新的 props 或 state，然后根据事先设定好的判断逻辑，做出最后要不要更新组件的决定。
  • componentWillUpdate：当上面的方法拦截返回 true 的时候，就可以在该方法中做一些更新之前的操作。
  • render：根据一系列的 diff 算法，生成需要更新的虚拟 DOM 数据。（注意：在 render 中最好只做数据和模板的组合，不应进行 state 等逻辑的修改，这样组件结构会更加清晰）
  • componentDidUpdate：该方法在组件的更新已经同步到 DOM 中去后触发，我们常在该方法中做 DOM 操作。

• 销毁阶段：该阶段主要在组件消亡的时候触发

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

import React, {
   Component} from 'react';import {
     View,  Text,  StyleSheet,  TouchableOpacity} from 'react-native';import {
   Actions} from 'react-native-router-flux';import HomeDetails from './HomeDetails';export default class Home extends Component {
     constructor(props) {
       super(props);    this.state = {
         clickText: "开始点击按钮",      count: 1,      detailContent: true    }  }  componentWillMount() {
       console.log("componentWillMount1111");  }  shouldComponentUpdate(nextProps, nextState){
       console.log(this.state.detailContent,'detailContent');    if (this.state.count !== nextState.count) {
         console.log("shouldComponentUpdate1111---组件需要更新");      return true;    }    return false;  }  componentWillUpdate(){
       console.log("componentWillUpdate1111---组件将要更新");  }  componentDidUpdate(){
       console.log("componentDidUpdate1111---组件更新完毕");  }  componentDidMount() {
       console.log("componentDidMount1111");  }  componentWillUnmount() {
       console.log("componentWillUnmount1111");  }  clickButton(){
       const {
    count } = this.state;    this.setState({
         clickText: "我点击了按钮",      count: count + 1,      detailContent: false    })  }  render() {
       console.log("render1111");    return (      
           
    
     欢迎来到首页
            
    
      Actions.notice()}        >          
     
      跳转到公告页
             
            
    
     {
   this.state.count}
            
    
      this.clickButton()}        >          
     
      {
   this.state.clickText}
             
            
          
       )  }}const styles = StyleSheet.create({
     container: {
       flex: 1,    alignItems: "center",    justifyContent: "center"  },  button: {
       width: 250,    height: 60,    backgroundColor: 'red',    borderRadius: 10,    alignItems: 'center',    justifyContent: 'center'  }});

import React, {
   Component} from 'react';import {
     View,  Text,  StyleSheet} from 'react-native';export default class HomeDetails extends Component {
     constructor(props) {
       super(props);    this.state = {
   }  }  componentWillMount() {
     }  componentWillReceiveProps(nextProps){
       console.log(this.props.detailContent,'this--->>componentWillReceiveProps');    console.log(nextProps.detailContent,'next--->>componentWillReceiveProps')  }  componentDidMount() {
     }  componentWillUnmount() {
     }  render() {
       return (      
           
    
     欢迎HomeDetails
          
       )  }}const styles = StyleSheet.create({
     container: {
       flex: 1,    alignItems: "center",    justifyContent: "center"  }});

转载地址：https://codeboy.blog.csdn.net/article/details/107921995 如侵犯您的版权，请留言回复原文章的地址，我们会给您删除此文章，给您带来不便请您谅解！