zoukankan      html  css  js  c++  java
  • react学习笔记之组件生命周期

    React 中的组件有三种状态:

    • Mounted:已插入真实 DOM
    • Updating:正在被重新渲染
    • Unmounted:已移出真实 DOM

    它为每个状态都提供了两种处理函数:

      will:函数在进入状态之前调用,

      did: 函数在进入状态之后调用,三种状态共计五种处理函数。

    所以,除了组件初始化时调用的getDefaultProps,getInitialState方法外,每个组件还有

    componentWillMount,componentDidMount,componentWillUpdate,componentDidUpdate,componentWillUnmount五种方法;

    除此之外,react还提供了两种特殊状态的处理函数:

    • componentWillReceiveProps(object nextProps):已加载组件收到新的参数时调用
    • shouldComponentUpdate(object nextProps, object nextState):组件判断是否重新渲染时调用

    当一个组件被调用的时候先执行getDefaultProps,getInitialState获取他的默认属性和状态,然后执行componentWillMount(即将渲染),接下来渲染到dom树上,渲染完成触发componentDidMount函数;

    这时候,该组件就进入了一个running状态,并监视他的props和state以及被移除事件:

      当props发生变化时执行componentWillReceiveProps然后去判断是否需要重新渲染(shouldComponentUpdate),如果不需要则继续保持running状态;如果需要则如初始时一样,执行componentWillMount(即将渲染),接下来渲染到dom树上,渲染完成触发componentDidMount函数,保持running状态继续监视;

      当state发生变化时,则直接判断是否需要重新渲染(shouldComponentUpdate),然后根据是否需要决定执行渲染过程还是继续保持running状态;

      当该组件被移除(unmount)时,将直接执行componentWillUnmount,该组件从dom树上消失;

  • 相关阅读:
    解决Bootstrap 试用手机端 布满全屏
    微信服务号认证流程
    微信回复文本超链接
    (4.28)for xml path 在合并拆分上的作用演示
    (4.27)查看存储过程中的依赖关系
    链接服务器XXX的OLE DB提供程序“SQLNCLI”无法启动分布式事务“
    (4.26)sql server存储过程优化
    (4.25)格式化T-SQL工具
    (4.24)sql server变量中set与select的区别
    (4.23)sql server区分大小写的检索
  • 原文地址:https://www.cnblogs.com/niconi/p/5840769.html
Copyright © 2011-2022 走看看