• react的生命周期


    react定义了严格的生命周期,生命周期可能会经历下述过程:

    1. 装载过程(Mount),把组件第一次在DOM中渲染的过程;
    2. 更新过程(UPDATE),当组件被重新渲染的过程;
    3. 卸载过程(Unmount),组件从DOM中移除的过程。

    首先装载过程:

    当组件第一次被渲染时,依次调用如下函数:

    • constructor
    • componenetWillMount
    • render
    • ComponentDidMount

    构造函数 constructor目的:初始化state和绑定成员函数this的环境。

    render函数,React中最重要的函数,该韩式必须要实现,render不做实际的渲染,即该函数不会网DOM树上渲染或加载内容,只是返回一个JSX描述的结构,最终有React进行渲染。render应该是一个纯函数,返回的结果应当完全首this.state与this,props影响。

    componentWillMount会在调用render函数之前进行调用,这个函数发生在将要进行装载之前,但是这个时候页面尚未进行渲染,因此这个函数里面大部分需要定义的功能,可以提前到constructor中做,,可以向后抬获取数据

    componentDidMount会在render函数调用之后并且DOM树已经完成装载后进行调用,并且该函数只能在浏览器端执行,react可以与其他UI库进行配,例如绘图功能使用到d3.js,这个时候jquery就可以卸载该函数中,也就是等到DOM加载完成,然后呃昂jquery在该DOM上去完善或增强。

    其次,更新过程:

    • componentWillReceiveProps
    • shouldComponentUpdate
    • componentWillUpdate
    • render
    • componentDidUpdate

    conponentWillReceiveProps函数,在父组件的render函数调用,无论父组件传递给子组件的props是否变化,子组件的该方法都会出发。this.setState方法更新过程不会触发该函数。

    shouldComponentUpdate该函数返回一个bool值,告知react本次更新过程是否继续,合理利用可提高性能

    conponenntWillUpdate与componentDidUpdate在render方法一前一后执行

    最后,卸载过程;

    • componentWillUnmount

    componentWillUnmount函数在react组件要从DOM树中删除的时候调用,该函数适合做一些请理性的工作,例如在之前声明的一些飞react方法,可以在该方法中移除,可以避免内存泄漏。

  • 相关阅读:
    ajax提交请求返回对象异常问题
    Rhino+envjs-1.2.js 在java运行网站js 工具类
    CryptoJS遇到的小坑
    BT是如何下载的
    NPOI 复制Word中的表格内容, 操作Word表格
    使用Scapy框架进行PPPOE拨号密码截取
    用Python养一只DHT爬虫
    如何解决jquery版本冲突
    安装ECMall后报PHP Strict Standards错误,请问如何解决
    如何在Webstorm/Phpstorm中设置连接FTP,并快速进行文件比较,上传下载,同步等操作(远程开发)
  • 原文地址:https://www.cnblogs.com/yangshixiong/p/11340748.html
Copyright © 2020-2023  润新知