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. apisix启动报错undefined symbol: EVP_KDF_ctrl, version OPENSSL_1_1_1b

    报错内容 2024/08/06 16:56:13 [error] 154236#154236: *7039 [lua] plugin.lua:110: load_plugin(): failed to ...

  2. 桌面应用开发之Electron

    Electron 官网: https://www.electronjs.org/ Electron是一个使用JavaScript.HTML和CSS构建跨平台的桌面应用程序.它基于Node.js和Chr ...

  3. Python之错误码设计

    在 web 项目中,我们经常使用自定义状态码来告知请求方请求结果以及请求状态:在 Python 中该如何设计自定义的状态码信息呢? 1)普通类+字典设计状态码 #!/usr/bin/python3 # ...

  4. Python之argparse

    argparse模块可以轻松编写用户友好的命令行界面.该程序定义了它需要的参数,argparse并将找出如何解析这些参数sys.argv.argparse模块还会自动生成帮助和用法消息,并在用户给出程 ...

  5. Xdebug+Phpstorm远程调试

    开发环境: 本地 Windows10 日常开发使用的环境 装有PHPStorm 远程主机 Linux 服务器 装php-fpm/nginx等所有开发依赖环境 本地可以访问远程主机 但远程主机无法访问本 ...

  6. 使用 fiddler 进行抓包处理

    1.概述 fiddler是一个抓包工具,有时候方便我们在访问网页上,看看网页的参数和返回结果.其中很重要的一条是,可以查看网页的响应速度,在对于调优方面提供一些依据. 2.软件安装 我们可以通过360 ...

  7. Node.js Express 框架(1)

    1.Express介绍 Express 是一个简洁而灵活的 node.js Web应用框架, 提供了一系列强大特性帮助你创建各种 Web 应用,和丰富的 HTTP 工具. Express的特点: 实现 ...

  8. 《前端运维》五、k8s--2pod、services与Ingress部署

    前一篇啊,我们学完了基本的配置.这一篇,我们来看下服务部署的配置.我们先来看张图,理解下k8s的应用场景和调用流程: 看上图,首先,master是控制节点,负责编排.管理.调度用户提交的作业.kube ...

  9. NATS: 自定义服务 (Service)

    使用 NATS 服务框架来创建服务会变得非常简单,基于 NATS 的服务框架,NAST 的客户端库可以更简单的构建.服务发现和监控服务.服务框架自动将所有的订阅归类到一个队列组中,提供构建基于层次化的 ...

  10. HttpClientFactory in ASP.NET Core 2.1 Part 5: 日志

    HttpClientFactory in ASP.NET Core 2.1 Part 5: 日志 原文地址:https://www.stevejgordon.co.uk/httpclientfacto ...