基本函数有

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. 把一个集合自定转成json字符串

    List<CityData> listData =new List<CityData>(); //把一个集合自定转成json字符串. foreach (var city in ...

  2. Github概念理解备忘录

    总结: add就是用来建立跟踪,添加文件到缓存区: commit就是把文件缓存区的文件正式加到本地库中: push就是把本地库更新到远程库中: git命令的操作要在仓库所在目录下进行才有效: 在Git ...

  3. 关于npm run dev报错npm ERR! missing script: dev

    出现这个问题应当重新使用 vue init webpack 来初始化工程. 在执行 npm run dev 就可以执行了.

  4. 【性能测试】:关于Sockets协议的脚本的开发

    一,关于Sockets协议的脚本,首先对报文的解析是一个关键, 报文的解析一般对着接口文档,弄清楚每个字段代表什么意思,如下一段报文,放在data.ws中 "\x00\x00\x01\x5C ...

  5. xshell本地上传文件至服务器

    今天本地写了个项目,想传到服务器部署起来.就上网百度了一下挺多的,一个个记录下,如有雷同,纯属抄袭. lrzsz方法 rz # 检查是否安装 yum -y install lrzsz # 安装 rpm ...

  6. python-pymongo使用

    #-*- coding: utf-8 -*- #python2.7x from pymongo import MongoClient def get_db(): #建立连接 client = Mong ...

  7. Debugging Ruby in VS Code

    原文  https://dev.to/dnamsons/ruby-debugging-in-vscode-3bkj https://github.com/Microsoft/vscode-recipe ...

  8. C#(winform)的label自动换行

    Label 是没有自动换行属性的,不像Textbox有WordWrap属性 尽管没有自动换行的属性,但也能够自动换行, 首先 AutoSize改成false; 然后调整 Label的大小,长和宽 (也 ...

  9. 详解shuffle过程(转载)

    http://langyu.iteye.com/blog/992916 shuffle本意是洗牌的意思.在mapreduce中描述的是怎么将map task 的输出结果有效的传送到reduce tas ...

  10. Python制作回合制手游外挂简单教程(下)

    引入: 接着上篇的博文,今天我们讲如何实现助人为乐 前期准备: 如何获取图片中指定文字的坐标? 我的思路是截取一个小区域,再根据小区域左上角的坐标获取中央坐标 例如: 获取坐上角的x和y坐标,测量x到 ...