React从零开始(3)——生命周期的详细阐述

中文文档

首先要推荐一下React中文文档,无意中在github上发现的,对英语不是很好的学习者来说,无疑是最大的福音,感叹开源的强大之余,更要感谢那些参与翻译的贡献者!


概述

了解React组件的生命周期,能更好的理解React的工作过程,而所谓的生命周期,就是我们定义的React组件,渲染到浏览器的DOM树中,从第一次的渲染,到渲染完成后,经过用户的操作,还能产生一些变化,最后从DOM树种移除。在这些过程中,React会执行一些特定的函数,而我们就可以对这些函数进行实现,让我们使用React开发的组件,在合适的时间做合适的事情!

生命周期的的三个过程

  1. 装载(mount)
  2. 更新(update)
  3. 卸载(unMount)

装载

装载:组件第一次渲染到浏览器DOM树的过程

组件第一次渲染的过程中,会调用contructor,componentWillMount,render,componentDidMount这四个函数
1. constructor

通常,我们将constructor称呼为 构造函数构造方法构造器 等,尤其是在面向对象的语言的编程中,我们会认为,我们要创建的对象或组件就是我们调用了constructor后的返回值,这是一个认知误区。

编程语言的设计者之所以要设计出一个constructor,是想在对象创建之后,在使用对象之前,对其做一些初始化操作,而这些操作是自动完成的!

在React中,我们实现constructor,主要用来初始化state绑定成员函数的this环境

2. render

在进行React开发组件时,render时最重要的函数,也是我们必须要实现的函数
render函数的作用就在于为React返回一个JSX的描述结构,然后由React将这个结构渲染到浏览器的DOM树中。

在render函数中,不要调用setState

3. componentWillMount

总觉得componentWillMount是一个无用的函数,它在constructor之后,在render之前执行,由于没有执行render,所以react并不会执行任何渲染操作,也不会引发任何重绘机制,所在如果想在render之前做一些操作,我们完全可以放到constructor中去

4. componentDidMount

componentDidMount是在渲染完成之后去执行的!我们经常会遇到这样的需求,有一个产品列表,用户通常会要求,在页面加载完成后,自动查询数据,然后由页面展示出来!也就是说,在组件渲染完成之后,我们需要执行一次AJAX操作,从服务器端请求数据,然后显示到页面中。这里的AJAX操作,就可以在componentDidMount来实现!


接下来我们通过一个官方文档中的范例看一下 这些函数的用法,当然在下面的范例中,只对constructorrendercomponentDidMount进行讨论,componentWillMount就不在细说了

范例说明:创建一个时钟组件,在页面中显示时分秒,并且实时更新

import React from 'react'

class Clock extends React.Component{
    constructor(props){
        super(props);
        this.state={
            date: new Date()
        }
    }

    componentDidMount(){
        setInterval(()=>{
            this.setState({date:new Date()});
        },1000);
    }

    render(){
        return (
            <div>
                <h2>{this.state.date.toLocaleTimeString()}</h2>
            </div>
        );
    }
}

export default Clock;
执行流程

首先,组件的constructor中,初始化了state,设置date属性为当前时间,接下来,react调用Clock组件中的render函数,获取JSX结构,进行渲染,当渲染完成后,调用componentDidMount,在componentDidMount中,执行一个定时执行的异步函数,即每个1秒,都会重新设置state中的date变量的值,当state发生了变化,就引发了React组件生命周期的update过程!

更新

当我们打开一个由React开发出来的网页,第一眼看到的页面内容就是由React组件装载过程完成后的结果。接下来,作为一个用户,可能会输入一些东西,可能会用鼠标点击一些东西,页面会有相应的反馈,这个过程叫做交互,而用户在交互之后的内心感受,就是体验。可以说交互体验的过程,就是组件发生更新的过程。

从技术角度来看,用户的操作触发了事件,监听事件的处理函数修改了组件的内部状态,从而引发了组件的更新过程。

在React的生命周期中,更新过程我们通常关注shouldComponentUpdatecomponentWillUpdatecomponentDidUpdate 三个函数
1.shouldComponentUpdate

在React的所有生命周期函数中,只有render和shouldComponentUpdate这两个函数是需要有返回值的,shouldComponentUpdate需要返回一个布尔值,React根据这个返回值判断本次的更新是否继续,需不需要引发后续的渲染

2. componentWillUpdate和componentDidUpdate

当shouldComponentUpdate的返回值为true时,React会执行后续的渲染过程,首先执行componentWillUpdate,然后执行render过程,最后才会执行componentDidUpdate,组件之索引发了更新过程,一定是内部的state或props中的内容发生变化,render执行完成后,返回了一个JSX的结果,React根据这个结果渲染浏览器中的内容,渲染完成后,调用componentDidUpdate,而作为开发者的我们,有时会根据特殊需要,用一些其他UI库的代码,做些DOM操作,当componentDidUpdate执行的时候,浏览器的DOM已经渲染完毕了,我们就可以在componentDidUpdate中调用其他UI库的代码了,如jquery。


写到这里呢,应该将我认为比较重要的生命周期函数做了详细的阐述,有几个生命周期函数这里并没有提及,是因为他们需要一些特殊的场景,需要大量的详尽代码篇幅进行说明,我会在后续的文章中做阐述!

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 217,185评论 6 503
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,652评论 3 393
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 163,524评论 0 353
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,339评论 1 293
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,387评论 6 391
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,287评论 1 301
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,130评论 3 418
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,985评论 0 275
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,420评论 1 313
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,617评论 3 334
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,779评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,477评论 5 345
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,088评论 3 328
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,716评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,857评论 1 269
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,876评论 2 370
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,700评论 2 354

推荐阅读更多精彩内容

  • 在React Native中使用组件来封装界面模块时,整个界面就是一个大的组件,开发过程就是不断优化和拆分界面组件...
    ITxiansheng阅读 940评论 1 2
  • 自己最近的项目是基于react的,于是读了一遍react的文档,做了一些记录(除了REFERENCE部分还没开始读...
    潘逸飞阅读 3,381评论 1 10
  • 组件的生命周期方法分以下三个阶段。 Mounting当创建组件的实例并将其插入到DOM中时,将调用这些方法:con...
    _八神光_阅读 1,093评论 0 0
  • React是一个JavaScript语言的工具库,起源于Facebook的一个内部项目,最初用来构建Instagr...
    我是那只喵阅读 479评论 0 0
  • 本文解读了react生命周期的源码,如果你还是个入门的小白,当然可以忽略源码,看一看作者写的demo。也可以明白生...
    Dabao123阅读 1,307评论 0 4