基本函数有

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>
)
}
}
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的更多相关文章

  1. React 生命周期

    前言 学习React,生命周期很重要,我们了解完生命周期的各个组件,对写高性能组件会有很大的帮助. Ract生命周期 React 生命周期分为三种状态 1. 初始化 2.更新 3.销毁 初始化 1.g ...

  2. React生命周期简单详细理解

    前言 学习React,生命周期很重要,我们了解完生命周期的各个组件,对写高性能组件会有很大的帮助. Ract生命周期 React 生命周期分为三种状态 1. 初始化 2.更新 3.销毁 初始化 1.g ...

  3. react复习总结(2)--react生命周期和组件通信

    这是react项目复习总结第二讲, 第一讲:https://www.cnblogs.com/wuhairui/p/10367620.html 首先我们来学习下react的生命周期(钩子)函数. 什么是 ...

  4. vue生命周期和react生命周期对比

    一 vue的生命周期如下图所示(很清晰)初始化.编译.更新.销毁 二 vue生命周期的栗子 注意触发vue的created事件以后,this便指向vue实例,这点很重要 <!DOCTYPE ht ...

  5. 前端005/React生命周期

    ES6中React生命周期 一.React生命周期 React生命周期主要包括三个阶段:初始化阶段.运行中阶段和销毁阶段. 在React不同的生命周期里,会依次触发不同的钩子函数. 二.React的生 ...

  6. React生命周期

    在react生命周期中,分2段执行,一个挂载的生命周期,一个是组件发生了数据变动,或者事件触发而引发的更新生命周期. 注:react生命周期很重要,对于很多组件场景的应用发挥重要作用,而且不熟悉生命周 ...

  7. React生命周期详解

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

  8. 22.1 、react生命周期(一)

    在每个react组件中都有以下几个生命周期方法~我们需要在不同阶段进行讨论 组件生命周期概述 1.初始化 在组件初始化阶段会执行 constructor static getDerivedStateF ...

  9. react 生命周期钩子里不要写逻辑,否则不生效

    react 生命周期钩子里不要写逻辑,否则不生效,要把逻辑写在函数里,然后在钩子里调用函数,否则会出现问题.

随机推荐

  1. IDEA自动生成TestNG的testng.xml的插件

    某地方见到的,自己实际操作一遍,记录一下.方便以后查询. 下载Create TestNG XML 插件,重启IDEA即可. 重启idea,新建Maven项目. pom.xml增加依赖 <depe ...

  2. RocketMQ详解

    原文链接:http://www.cnblogs.com/xiaodf/p/5075167.html 简介 官方简介: RocketMQ是一款分布式.队列模型的消息中间件,具有以下特点:  能够保证严格 ...

  3. python并发学习总结

    目录 一.理解操作系统 二.任务类型 三.Socket模块 四.一个简单的C/S程序 五.使用阻塞IO实现并发 方案一:阻塞IO+多进程 方案二:阻塞IO+多线程 阻塞IO模型的思考和总结 六.使用非 ...

  4. shiro学习笔记_0500_授权

    1,授权:给身份认证通过的人,授予他可以访问某些资源的权限. 2,权限粒度:分为粗粒度和细粒度. 粗粒度:例如对 user 的 crud,也就是通常所说的对表的操作. 细粒度:对表中记录的操作.如 只 ...

  5. python-Condition 进程同步互斥

    #!/usr/bin/python import multiprocessing,time def A(cond): name=multiprocessing.current_process().na ...

  6. MySQL之mysql命令使用详解

    MySQL Name mysql - the MySQL command-line tool Synopsis mysql [options] db_name Description mysql is ...

  7. OpenLdap与BerkeleyDB安装过程

    前段时间在看LDAP方面的东西,最近重装了Ubuntu之后开始在自己的机器上装一个OpenLDAP. 装的过程中还遇到不少问题,不过通过Google同学的帮忙,全部得到解决.下面装安装过程记录如下: ...

  8. java多线程---------java.util.concurrent并发包----------等待多线程完成

    一.等待多线程完成的join的使用.CoundownLantch.CyclicBarrier .

  9. 498_Diagonal-Traverse

    目录 498_Diagonal-Traverse Description Solution Java solution Python solution 1 Python solution 2 Pyth ...

  10. 《Think Python》第6章学习笔记

    目录 6.1 返回函数值(Return values) 6.2 增量式开发(Incremental development) 6.3 组合(Composition) 6.4 布尔函数(Boolean ...