资讯专栏INFORMATION COLUMN

React专题:生命周期

Hanks10100 / 3217人阅读

摘要:而生命周期钩子,就是从生到死过程中的关键节点。异步渲染下的生命周期花了两年时间祭出渲染机制。目前为这几个生命周期钩子提供了别名,分别是将只提供别名,彻底废弃这三个大活宝。生命周期钩子的最佳实践是在这里初始化。

本文是『horseshoe·React专题』系列文章之一,后续会有更多专题推出
来我的 GitHub repo 阅读完整的专题文章
来我的 个人博客 获得无与伦比的阅读体验

生命周期,顾名思义,就是从生到死的过程。

而生命周期钩子,就是从生到死过程中的关键节点。

普通人的一生有哪些生命周期钩子呢?

出生

考上大学

第一份工作

买房

结婚

生子

孩子的生命周期钩子

退休

临终遗言

每到关键节点,我们总希望有一些沉思时刻,因为这时候做出的决策会改变人生的走向。

React组件也一样,它会给开发者一些沉思时刻,在这里,开发者可以改变组件的走向。

异步渲染下的生命周期

React花了两年时间祭出Fiber渲染机制。

简单来说,React将diff的过程叫做Reconciliation。以前这一过程是一气呵成的,Fiber机制把它改成了异步。异步技能将在接下来的版本中逐步解锁。

明明是一段同步代码,怎么就异步了呢?

原理是Fiber把任务切成很小的片,每执行一片就把控制权交还给主线程,待主线程忙完手头的活再来执行剩下的任务。当然如果某一片的执行时间就很长(比如死循环),那就没主线程什么事了,该崩溃崩溃。

这会给生命周期带来什么影响呢?

影响就是挂载和更新之前的生命周期都变的不可靠了。

为什么这么讲?因为Reconciliation这个过程有可能暂停然后继续执行,所以挂载和更新之前的生命周期钩子就有可能不执行或者多次执行,它的表现是不可预期的。

因此16之后的React生命周期迎来了一波大换血,以下生命周期钩子将被逐渐废弃:

componentWillMount

componentWillReceiveProps

componentWillUpdate

看出特点了么,都是带有will的钩子。

目前React为这几个生命周期钩子提供了别名,分别是:

UNSAFE_componentWillMount

UNSAFE_componentWillReceiveProps

UNSAFE_componentWillUpdate

React17将只提供别名,彻底废弃这三个大活宝。取这么个别名意思就是让你用着恶心。

constructor()

React借用class类的constructor充当初始化钩子。

React几乎没做什么手脚,但是因为我们只允许通过特定的途径给组件传递参数,所以constructor的参数实际上是被React规定好的。

React规定constructor有三个参数,分别是propscontextupdater

props是属性,它是不可变的。

context是全局上下文。

updater是包含一些更新方法的对象,this.setState最终调用的是this.updater.enqueueSetState方法,this.forceUpdate最终调用的是this.updater.enqueueForceUpdate方法,所以这些API更多是React内部使用,暴露出来是以备开发者不时之需。

在React中,因为所有class组件都要继承自Component类或者PureComponent类,因此和原生class写法一样,要在constructor里首先调用super方法,才能获得this

constructor生命周期钩子的最佳实践是在这里初始化this.state

当然,你也可以使用属性初始化器来代替,如下:

import React, { Component } from "react";

class App extends Component {
    state = {
        name: "biu",
    };
}

export default App;
componentWillMount()
           
               
                                           
                       
                 

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/96935.html

相关文章

  • React专题:可变状态

    摘要:的参数既可以是一个对象,也可以是一个回调函数。回调函数提供了两个参数,第一个参数就是计算过的对象,即便这时还没有渲染,得到的依然是符合直觉的计算过的值。专题一览什么是可变状态不可变属性生命周期组件事件操作抽象 本文是『horseshoe·React专题』系列文章之一,后续会有更多专题推出来我的 GitHub repo 阅读完整的专题文章来我的 个人博客 获得无与伦比的阅读体验 Reac...

    hosition 评论0 收藏0
  • JS专题之垃圾回收

    摘要:如果没有引用指向该对象零引用,对象将被垃圾回收机制回收。经过增量标记改进后,垃圾回收的最大停顿时间可以减少到原来的左右。解除引用的真正作用是让值脱离执行环境,以便垃圾收集器下次运行时将其回收。 前言 在讲 JS 的垃圾回收(Garbage Collection)之前,我们回顾上一篇《JS专题之memoization》,memoization 的原理是以参数作为 key,函数结果作为 v...

    liujs 评论0 收藏0
  • React专题:什么是UI

    摘要:现代前端框架的使命就是开发者管理状态,框架根据状态自动生成。专题一览什么是可变状态不可变属性生命周期组件事件操作抽象 本文是『horseshoe·React专题』系列文章之一,后续会有更多专题推出来我的 GitHub repo 阅读完整的专题文章来我的 个人博客 获得无与伦比的阅读体验 什么是UI? 如果你指的是布局和色彩,那更偏向于设计师的工作。 在现代web领域,大家已经有一个共识...

    silvertheo 评论0 收藏0
  • React专题react,redux以及react-redux常见一些面试题

    摘要:我们可以为元素添加属性然后在回调函数中接受该元素在树中的句柄,该值会作为回调函数的第一个参数返回。使用最常见的用法就是传入一个对象。单向数据流,比较有序,有便于管理,它随着视图库的开发而被概念化。 面试中问框架,经常会问到一些原理性的东西,明明一直在用,也知道怎么用, 但面试时却答不上来,也是挺尴尬的,就干脆把react相关的问题查了下资料,再按自己的理解整理了下这些答案。 reac...

    darcrand 评论0 收藏0
  • React 328道最全面试题(持续更新)

    摘要:希望大家在这浮夸的前端圈里,保持冷静,坚持每天花分钟来学习与思考。 今天的React题没有太多的故事…… 半个月前出了248个Vue的知识点,受到很多朋友的关注,都强烈要求再出多些React相前的面试题,受到大家的邀请,我又找了20多个React的使用者,他们给出了328道React的面试题,由我整理好发给大家,同时发布在了前端面试每日3+1的React专题,希望对大家有所帮助,同时大...

    kumfo 评论0 收藏0

发表评论

0条评论

Hanks10100

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<