React v16生命周期

生命周期是框架为我们提供的用于了解程序当前运行阶段的一个钩子。

旧生命周期

3284159097-5bbb08d17db33_articlex.png

挂载阶段(Mounting)

  • constructor()

    加载的时候调用一次,用于初始化state

  • getDefaultProps()

    设置默认的props,也可以用dufaultProps设置组件的默认属性

  • getInitialState()

    初始化state,可以直接在constructor中定义this.state

  • componentWillMount()

    组件将要挂载时调用,整个生命周期调用一次

  • render()

    react最重要的步骤,创建虚拟dom,进行diff算法,更新dom树都在此进行

  • componentDidMount()

    组件渲染之后调用,http请求一般在此时进行

更新阶段(Updating)

  • componentWillReceivePorps(nextProps)

    组件加载时不调用,当组件的props更新后调用,参数nextProps为新传入的props

  • shouldComponentUpdate(nextProps, nextState)

    组件接收到新的props或state时调用,参数nextProps为新传入的props,state为新的state。可通过判断nextProps,nextState和this.props,this.state进行选择性rerender,return true代表需要触发render更新当前组件,return false代表不需要触发render

  • componentWillUpdata(nextProps, nextState)

    组件将要更新时调用

  • render()

    组件rerender

  • componentDidUpdate()

    组件完成更新时调用

卸载阶段(Unmounting)

  • componentWillUnmount()

    组件将要卸载时调用

在React V16之前的版本中,如果你拥有一个很复杂的复合组件,然后改动了最上层组件的 state,那么调用栈可能会很长。

调用栈过长,再加上中间进行了复杂的操作,就可能导致长时间阻塞主线程,带来不好的用户体验。所以为了解决这个问题,React V16引入了Fiber机制。

Fiber 本质上是一个虚拟的堆栈帧,新的调度器会按照优先级自由调度这些帧,从而将之前的同步渲染改成了异步渲染,在不影响体验的情况下去分段计算更新。

对于如何区别优先级,React 有自己的一套逻辑。对于动画这种实时性很高的东西,也就是 16 ms 必须渲染一次保证不卡顿的情况下,React 会每 16 ms(以内) 暂停一下更新,返回来继续渲染动画。

对于异步渲染,现在渲染有两个阶段:reconciliationcommit 。前者过程是可以打断的,后者不能暂停,会一直更新界面直到完成。

Reconciliation 阶段

  • componentWillMount
  • componentWillReceiveProps
  • shouldComponentUpdate
  • componentWillUpdate

Commit阶段

  • componentDidMount
  • componentDidUpdate
  • componentWillUnmount

因为 Reconciliation 阶段是可以被打断的,所以 Reconciliation 阶段会执行的生命周期函数就可能会出现调用多次的情况,从而引起 Bug。由此对于 Reconciliation 阶段调用的几个函数,除了 shouldComponentUpdate 以外,其他都应该避免去使用,并且 V16 中也引入了新的 API 来解决这个问题。

getDerivedStateFromProps 用于替换 componentWillReceiveProps ,该函数会在初始化和 update 时被调用。

getSnapshotBeforeUpdate 用于替换 componentWillUpdate ,该函数会在 update 后 DOM 更新前被调用,用于读取最新的 DOM 数据。

新生命周期

挂载阶段(Mounting)

  • constructor()

    同之前

  • static getDerivedStateFromProps(props, state)

    静态方法,组件每次被rerender的时候,包括在组件构建之后(虚拟dom之后,实际dom挂载之前),每次获取新的props或state之后;每次接收新的props之后都会返回一个对象作为新的state,返回null则说明不需要更新state;配合componentDidUpdate,可以覆盖componentWillReceiveProps的所有用法

  • render()

    同之前

  • componentDidMount()

同之前

更新阶段(Updating)

  • static getDerivedStateFromProps(props, state)

    静态方法,组件每次被rerender的时候,包括在组件构建之后(虚拟dom之后,实际dom挂载之前),每次获取新的props或state之后;每次接收新的props之后都会返回一个对象作为新的state,返回null则说明不需要更新state;配合componentDidUpdate,可以覆盖componentWillReceiveProps的所有用法

  • shouldComponentUpdate(nextProps, nextState)

    同之前

  • render()

    同之前

  • getSnapshotBeforeUpdate(prevProps, prevState)

    被调用于render之后,可以读取但无法使用dom的时候。它使您的组件可以在可能更改之前从DOM捕获一些信息(例如滚动位置)。返回一个值作为componentDidUpdate的第三个参数。

  • componentDidUpdate(prevProps, prevState, snapshot)

    组件更新完成后调用。第三个参数为getSnapshotBeforeUpdate的返回值。

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

推荐阅读更多精彩内容

  • React 16 生命周期 React 16.3 新增的生命周期方法 逐渐废弃的生命周期方法: 一般将生命周期分成...
    Allan要做活神仙阅读 573评论 0 0
  • React 生命周期很多人都了解,但通常我们所了解的都是单个组件的生命周期,但针对Hooks 组件、多个关联组件(...
    前端js阅读 6,994评论 3 7
  • 在React更新到V16版本后,我们会发现React新加了一些生命周期并且即将停用一些生命周期,今天我们就来fol...
    龚达耶阅读 1,128评论 0 0
  • 组件的生命周期 React中组件也有生命周期,也就是说也有很多钩子函数供我们使用, 组件的生命周期,我们会分为四个...
    解勾股阅读 735评论 0 0
  • 以前觉得自己接受不了爱情降温的落差 那就应该在最开始的时候不要那么灼热 因为一切总会归于平淡被鸡毛蒜皮和事无巨细淹...
    萱萱_萱阅读 430评论 0 3