react的生命周期,分为3三个阶段,
挂载阶段
constructor(){} UNSAFE_componentWillMount(){} == componentWillMount(在17版本中将废除){} componentDidMount(){ 发送异步请求的} render(){}
========================================================== 跟新:的时候,主要跟新两个类型的数据。stata,props这两个类型的数据; 销毁
import React, { Component } from "react";

export default class Shengming extends Component {
// 调用父类的 constructor方法;传递props属性,染发props属性起作用
constructor(props) {
super(props); // 定义初始值
this.state = {
num: 20,
};
console.log("1-1我是挂载阶段的第一个生命周期函数");
}
// UNSAFE
UNSAFE_componentWillMount() {
console.log("1-2挂载数据之前");
} componentDidMount() {
// 用来发送请求
console.log("1-4数据已经挂载好了");
} render() {
console.log("1-3render 标签渲染到页面");
return <div>123==》{this.state.num}</div>;
}
}

react声明周期详解的更多相关文章

  1. React生命周期详解

    React生命周期图解: 一.旧版图解: 二.新版图解: 从图中,我们可以清楚知道React的生命周期分为三个部分:  实例化.存在期和销毁时. 旧版生命周期如果要开启async rendering, ...

  2. react 生命周期详解

    state有时候很不听话,在某些时候,我不想他渲染,偏偏react非常智能的帮我们重复渲染. 比如最常见的就是传递的对象为空,组件依旧渲染了一次或者多次. 更多场景不举例了,对症下药. shouldC ...

  3. React—组件生命周期详解

    React—组件生命周期详解 转自 明明的博客  http://blog.csdn.net/slandove/article/details/50748473 (非原创) 版权声明:转载请注明出处,欢 ...

  4. ASP.NT运行原理和页面生命周期详解及其应用

    ASP.NT运行原理和页面生命周期详解及其应用 1. 下面是我画的一张关于asp.net运行原理和页面生命周期的一张详解图.如果你对具体不太了解,请参照博客园其他帖子.在这里我主要讲解它的实际应用.  ...

  5. ASP.NET生命周期详解

    最近一直在学习ASP.NET MVC的生命周期,发现ASP.NET MVC是建立在ASP.NET Framework基础之上的,所以原来对于ASP.NET WebForm中的很多处理流程,如管道事件等 ...

  6. ASP.NET生命周期详解 [转]

    最近一直在学习ASP.NET MVC的生命周期,发现ASP.NET MVC是建立在ASP.NET Framework基础之上的,所以原来对于ASP.NET WebForm中的很多处理流程,如管道事件等 ...

  7. ASP.NET生命周期详解(转)

    看到好文章需要分享. 最近一直在学习ASP.NET MVC的生命周期,发现ASP.NET MVC是建立在ASP.NET Framework基础之上的,所以原来对于ASP.NET WebForm中的很多 ...

  8. 【转】Java 类的生命周期详解

    一. 引 言 最近有位细心的朋友在阅读笔者的文章时,对java类的生命周期问题有一些疑惑,笔者打开百度搜了一下相关的问题,看到网上的资料很少有把这个问题讲明白的,主要是因为目前国内java方面的教材大 ...

  9. activity的生命周期详解

    刚在看mars老师的视频,看到activity的生命周期,就看了一下,总结了一下.下面是各函数的调用时机 为了更清楚的看清楚工作的具体过程,举例如下: ,建立两个activity,一个main,一个a ...

  10. Vue生命周期详解

    Vue所有的生命周期钩子自动绑定在this上下文到实例中,因此你可以访问数据,对属性和方法进行运算.这意味着你不能使用箭头函数来定义一个生命周期方法.这是因为箭头函数绑定了父上下文,因此this与你期 ...

随机推荐

  1. ubuntu apache默认没开启rewrite 如何开启

    注意看到 /etc/apache2/apache2.conf # Include module configuration:IncludeOptional mods-enabled/*.loadInc ...

  2. 使用 LLVM 框架创建有效的编译器,第 2 部分

    使用 clang 预处理 C/C++ 代码 无论您使用哪一种编程语言,LLVM 编译器基础架构都会提供一种强大的方法来优化您的应用程序.在这个两部分系列的第二篇文章中,了解在 LLVM 中测试代码,使 ...

  3. Nodejs调试之Chrome Devtools

    转载: https://mp.weixin.qq.com/s/tqGWizPUFnuVWRcXcxyv2g 俗话说:"工欲善其事,必先利其器",调试是每一个开发人员都要遇到的问题, ...

  4. js之模块导入与导出:export、export default、module.exports、exports

    前两者export.export default可为一组,是es6的规范,和import匹配,import是es6中的语法标准:后两者module.exports.exports可为一组,是commo ...

  5. 高性能消息队列之nsq

    NSQ 是实时的分布式消息处理平台,其设计的目的是用来大规模地处理每天数以十亿计级别的消息. NSQ 具有分布式和去中心化拓扑结构,该结构具有无单点故障.故障容错.高可用性以及能够保证消息的可靠传递的 ...

  6. 用OpenResty搭建高性能服务端

    相关链接:https://github.com/openresty/lua-nginx-module OpenResty 简介 OpenResty 是一个基于 Nginx 与 Lua 的高性能 Web ...

  7. Codeforces Round 892 (Div.2)

    A. United We Stand 题解 赛时想复杂了 题目要求我们保证数组\(c\)中的数不是数组\(b\)中任意一个数的因子 我们考虑将最小值置于数组\(b\)即可 const int N = ...

  8. vue3-Pinia

    Pinia 是 Vue.js 的一个状态管理库,用于在 Vue 应用程序中管理共享状态.它是 Vuex 的后继者,提供了一个简单.直观且灵活的方式来处理应用中的全局状态,比如用户登录信息.应用配置.购 ...

  9. elastic8.4.0搜索+logstash<=>mysql实时同步+kibana可视化操作+netcore代码笔记

    做全文搜索,es比较好用,安装可能有点费时费力.mysql安装就不说了.主要是elastic8.4.0+kibana8.4.0+logstash-8.16.1,可视化操作及少了netcore查询代码. ...

  10. C#中XML文件读取

    概述 首先程序访问且操作xml文件有两种模型:DOM(文档对象模型).流模型. DOM:允许编辑和更新文档,可随机访问文档中的数据,可使用XPath查询,但是必须要一次性将文档加载在内存中,对于大型的 ...