react生命周期es6
基本函数有
import React from 'react'
export default class MyClass extends React.Component {
constructor(props){
super(props)
/**
* 在这里生命当前页面的state
*/
this.state = {
}
}
/**
* 第一次渲染前调用
* 客户端和服务的都调用
* 只调用一次
* 可以调用this.setState
*/
componentWillMount(){
}
/**
* 在第一次渲染成功后调用
* 可以得到dom节点 this.getDOMNode()
* 客户端调用
* 服务端不调用
* 只调用一次
*/
componentDidMount(){
}
/**
* 组件将要接收新的props执行
* @param {*} nextProps
*/
componentWillReceiveProps(nextProps){
}
/**
* 判断组件是否应该重新渲染,默认是true
* 一般返回true,这样在更新props或state才能重新渲染、
* 返回false将不能重新渲染
*/
shouldComponentUpdate(nextProps, nextState){
return true
}
/**
* 组件将要重新渲染
*/
componentWillUpdate(){
}
/**
* 组件重新渲染完成
* 客户端有此生命周期方法
* 服务器端没有
*
*/
componentDidUpdate(){
}
/**
* 卸载组件
* 把一些监听事件卸载
*/
componentWillUnmount(){
}
/**
* 渲染组件
* 必须有
* 不可以用this.setState方法
*/
render(){
return (
<div></div>
)
}
}
react生命周期es6的更多相关文章
- React 生命周期
前言 学习React,生命周期很重要,我们了解完生命周期的各个组件,对写高性能组件会有很大的帮助. Ract生命周期 React 生命周期分为三种状态 1. 初始化 2.更新 3.销毁 初始化 1.g ...
- React生命周期简单详细理解
前言 学习React,生命周期很重要,我们了解完生命周期的各个组件,对写高性能组件会有很大的帮助. Ract生命周期 React 生命周期分为三种状态 1. 初始化 2.更新 3.销毁 初始化 1.g ...
- react复习总结(2)--react生命周期和组件通信
这是react项目复习总结第二讲, 第一讲:https://www.cnblogs.com/wuhairui/p/10367620.html 首先我们来学习下react的生命周期(钩子)函数. 什么是 ...
- vue生命周期和react生命周期对比
一 vue的生命周期如下图所示(很清晰)初始化.编译.更新.销毁 二 vue生命周期的栗子 注意触发vue的created事件以后,this便指向vue实例,这点很重要 <!DOCTYPE ht ...
- 前端005/React生命周期
ES6中React生命周期 一.React生命周期 React生命周期主要包括三个阶段:初始化阶段.运行中阶段和销毁阶段. 在React不同的生命周期里,会依次触发不同的钩子函数. 二.React的生 ...
- React生命周期
在react生命周期中,分2段执行,一个挂载的生命周期,一个是组件发生了数据变动,或者事件触发而引发的更新生命周期. 注:react生命周期很重要,对于很多组件场景的应用发挥重要作用,而且不熟悉生命周 ...
- React生命周期详解
React生命周期图解: 一.旧版图解: 二.新版图解: 从图中,我们可以清楚知道React的生命周期分为三个部分: 实例化.存在期和销毁时. 旧版生命周期如果要开启async rendering, ...
- 22.1 、react生命周期(一)
在每个react组件中都有以下几个生命周期方法~我们需要在不同阶段进行讨论 组件生命周期概述 1.初始化 在组件初始化阶段会执行 constructor static getDerivedStateF ...
- react 生命周期钩子里不要写逻辑,否则不生效
react 生命周期钩子里不要写逻辑,否则不生效,要把逻辑写在函数里,然后在钩子里调用函数,否则会出现问题.
随机推荐
- 转一下大师兄的"MySQL高可用架构之MHA"
简介: MHA(Master High Availability)目前在MySQL高可用方面是一个相对成熟的解决方案,它由日本DeNA公司youshimaton(现就职于Facebook公司)开发,是 ...
- POJ 2239
#include<iostream> #include<algorithm> #define MAXN 305 using namespace std; int _m[MAXN ...
- BERT和ULMFIT embedding比较文本分类结果
Instructions [THIS REPOSITORY IS UNDER DEVELOPMENT AND MOER DATASETS AND MODELS WILL BE ADDED] [FEEL ...
- 配置 CentOS 7 安装位置
红框里是CentOS 7安装程序检测到的硬盘,选择你想把系统安装到哪个硬盘当中. 点击 Add disk 按钮可以添加指定的附加设备或者网络设备(通过ISCSI.FCoE等方式添加硬盘) 此处设置分区 ...
- Hexo博客系列(一)-Windows系统配置Hexo v3.x个人博客环境
[原文链接]:https://www.tecchen.xyz/blog-hexo-env-01.html 我的个人博客:https://www.tecchen.xyz,博文同步发布到博客园. 由于精力 ...
- Secondary NameNode究竟是做什么的
Secondary NameNode:它究竟有什么作用? 在hadoop中,有一些命名不好的模块,Secondary NameNode是其中之一.从它的名字上看,它给人的感觉就像是NameNode的备 ...
- winform两个窗体之间传值(C#委托事件实现)
委托 定义一个委托,声明一个委托变量,然后让变量去做方法应该做的事. 委托是一个类型 事件是委托变量实现的 经典例子:两个winform窗体传值 定义两个窗体:form1和form2 form1上有一 ...
- python爬虫常用之Scrapy 中间件
一.概述 1.中间件的作用 在scrapy运行的整个过程中,对scrapy框架运行的某些步骤做一些适配自己项目的动作. 例如scrapy内置的HttpErrorMiddleware,可以在http请求 ...
- Android事件分发和消费机制(转载)
原文链接:http://www.cnblogs.com/sunzn/archive/2013/05/10/3064129.html Android 中与 Touch 事件相关的方法包括:dispatc ...
- Fetch使用方法
前言: fetch是用来取代传统的XMLHttpRequest的. 它的优点很多,包括链式调用的语法.返回promise等. 什么是fetch? fetch api是基于promise的设计,它是为了 ...