基本函数有

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. 48.rocketMQ

    一.简介 RocketMQ是阿里旗下的一款产品,分为开源版本和非开源版本.相比于ActiveMQ,RocketMQ支持顺序消费.事务机制.失败重试机制.消息可查询.消息订阅.较强的水平扩展能力.亿级堆 ...

  2. npm install 报错: WARN checkPermissions Missing write access to 解决方案

    经过各种百度搜索,发现这个问题的出现并不是管理员权限的问题,而是之前安装失败了,这个文件已经存在了,再次安装无法覆盖写入的问题. 解决方法: 1.找到node的全局安装路径,一般在nodejs文件夹的 ...

  3. python 并发协程

    一 引子 本节的主题是基于单线程来实现并发,即只用一个主线程(很明显可利用的cpu只有一个)情况下实现并发,为此我们需要先回顾下并发的本质:切换+保存状态 cpu正在运行一个任务,会在两种情况下切走去 ...

  4. Android动画及滑动事件冲突解决(转载)

    原文链接:http://blog.csdn.net/singwhatiwanna/article/details/38168103 Android开发中动画和事件处理是程序员迈向高手的必经之路,也是重 ...

  5. python的面向对象和类

    目录 一.基本知识点 1.面向过程编程 2.面向对象编程 3.注意 二.类的结构 1.类的理解 2.代码形式 3.类和函数的一些区别 4.类中的数据 5.类中的方法(基础) 三.类的实例化 四.类的继 ...

  6. 使用Java Servlet进行简单登录

    效果图 登录页面代码:login.html <%@ page language="java" contentType="text/html; charset=UTF ...

  7. Java简单聊天室

    实现Java简单的聊天室 所用主要知识:多线程+网络编程 效果如下图 /** * * @author Administrator * * 简单的多人聊天系统——重点:同时性,异步性 * 1.客户端:发 ...

  8. Types方法之isSameType-isSuperType-isSubType

    4.isSameType() 方法 /** * Is t the same type as s? */ public boolean isSameType(Type t, Type s) { retu ...

  9. FocusBI: 微软商业智能教程目录介绍(原创)

    关注微信公众号:FocusBI 查看更多文章:加QQ群:808774277 获取学习资料和一起探讨问题. <商业智能教程>pdf下载地址 链接:https://pan.baidu.com/ ...

  10. nodejs学习笔记一( sublime、atom开发环境,http模块,fs模块的初识)

    http服务   let server = http.createServer(function(req,res){       });   监听: server.listen(8080);   re ...