zoukankan      html  css  js  c++  java
  • React生命周期函数详解

    React生命周期函数

    生命周期函数是指在某一个周期自动执行的函数。

    React中的生命周期执行过程


    以下是React中的常用的生命周期函数,按个部分中按照自动执行顺序列出,这几个过程可能存在同时进行

    初始化过程(Initialization)

    • consructor()里面初始化PropsState属性。

    挂载过程(Mounting)

    1. componentWillMount():在组件即将被挂载到页面的时刻自动执行。
    2. render():将组件挂载到页面。
    3. componentDidMount():组件被挂载到页面之后立即执行。

    更新过程(Updating)

    1. componentWillReceiveProps():一个组件要从父组件接收参数, 只要父组件的render()函数非首次(如果这个组件第一次存在与父组件中不会执行,如果已经存在于父组件中才会执行)执行了,子组件的这个生命周期函数就会被执行。如果组件没有Props属性则直接跳过
    2. shouldComponentUpdate():组件更行之前检查是否需要更新,注意这个函数要有一个布尔类型返回值,如果返回false,这一部分的生周期 函数将不会继续执行,即无论如何组件都不会更新。利用这个生命周期函数可以强制关闭不需要更新的子组件来提升渲染性能
    3. componentWillUpdate():组件更新之前。自动执行。但要在shouldComponentUpdate()执行并返回true之后执行。
    4. render():将组件更新到页面。
    5. componentDidUpdate():组件更新完成之后立即执行。

    移除过程(Unmounting)

    • componentWillMount():当组件即将被页面剔除时执行。

    注意事项

    • 注意:React中的render()也是生命周期函数,而constructor()并不是生命周期函数。
    • 生命周期函数是针对组件来说的,并非只有父组件才有生命周期函数,是所有组件都有生命周期函数!
    • 除了render()函数,其他的所有生命周期函数都可以不写,也不会报错,但是如果缺少render()函数程序就会报错,因为所有的生命周期函数除了render()函数都是继承自React中内置的。
  • 相关阅读:
    ASP.NET Core新书终于上市,完成今年一个目标,赠书活动
    .NET 5.0 RC2 发布,正式版即将在 11 月 .NET Conf 大会上发布
    .NET Standard 来日苦短去日长
    [C#.NET 拾遗补漏]09:数据标注与数据校验
    几个超级实用但很少人知道的 VS 技巧[更新]
    .NET 5 中 Target Framework 详解
    .NET 5.0 RC1 发布,离正式版发布仅剩两个版本
    Git 实用操作:撤销 Commit 提交(动图讲解)
    Git 实用操作:重写 Commit 历史
    [C#.NET 拾遗补漏]08:强大的LINQ
  • 原文地址:https://www.cnblogs.com/YooHoeh/p/9309792.html
Copyright © 2011-2022 走看看