React 组件生命周期
组件的生命周期可分成三个状态：
- Mounting：已插入真实 DOM
- Updating：正在被重新渲染
- Unmounting：已移出真实 DOM
生命周期的方法有：
componentWillMount 在渲染前调用,在客户端也在服务端。
componentDidMount : 在第一次渲染后调用，只在客户端。之后组件已经生成了对应的DOM结构，可以通过this.getDOMNode()来进行访问。 如果你想和其他JavaScript框架一起使用，可以在这个方法中调用setTimeout, setInterval或者发送AJAX请求等操作(防止异步操作阻塞UI)。
componentWillReceiveProps 在组件接收到一个新的 prop (更新后)时被调用。这个方法在初始化render时不会被调用。
shouldComponentUpdate 返回一个布尔值。在组件接收到新的props或者state时被调用。在初始化时或者使用forceUpdate时不被调用。
可以在你确认不需要更新组件时使用。componentWillUpdate在组件接收到新的props或者state但还没有render时被调用。在初始化时不会被调用。
componentDidUpdate 在组件完成更新后立即调用。在初始化时不会被调用。
componentWillUnmount在组件从 DOM 中移除之前立刻被调用。
这些方法的详细说明，可以参考官方文档。
生命周期使用示例
class Content extends React.Component {componentWillMount() {console.log('Component WILL MOUNT!')}componentDidMount() {console.log('Component DID MOUNT!')}componentWillReceiveProps(newProps) {console.log('Component WILL RECEIVE PROPS!')}shouldComponentUpdate(newProps, newState) {return true;}componentWillUpdate(nextProps, nextState) {console.log('Component WILL UPDATE!');}componentDidUpdate(prevProps, prevState) {console.log('Component DID UPDATE!')}componentWillUnmount() {console.log('Component WILL UNMOUNT!')}render() {return (<div><h3>{this.props.myNumber}</h3></div>);}
}相关文章：
银行软件开发实习生_如何找到学生的软件开发人员实习生
银行软件开发实习生by Grazietta Hof由Grazietta Hof 如何找到学生的软件开发人员实习生 (How to find a Software Developer Internship as a student) Side note: Although this article is directed at students (because I am one so I can easily relate), I’m sure a l…
MAC OS X El CAPITAN 搭建SPRING MVC （1）- 目录、包名、创建web.xml
一、 下载STS（Spring Tool Suite） 官方地址：http://spring.io/tools/sts 下载spring tool suite for mac 最新版本。这个IDE是很不错的，其中spring插件已经配置好了。下载解压缩（一定要英文目录下）…
iOS小知识点记录
1>UITextField实现leftView: self.inputTextField [[UITextField alloc]initWithFrame:CGRectMake(10, 10, 200, 25)];self.inputTextField.delegate self;self.inputTextField.font [UIFont systemFontOfSize:15];self.inputTextField.placeholder " 想说点什么?…
Ant Design Pro 网络请求，视图绑定model并且渲染到页面 umi-request
封装网络请求，在service中新建接口，在model调用service，在视图绑定model并且得到网络请求的回调函数，获取网络请求的数据渲染到页面。 网络请求数据走向； 1.在utils/request.js 封装网络请求； /*** request 网络请求工具* 更详细的 api 文档: https://github.com/umijs…
2019机器学习比赛_2019顶尖的机器学习课程
2019机器学习比赛With strong roots in statistics, Machine Learning is becoming one of the most interesting and fast-paced computer science fields to work in. There’s an endless supply of industries and applications machine learning can be applied to to mak…
HTML5 canvas画图
HTML5 canvas画图 HTML5 <canvas> 标签用于绘制图像（通过脚本，通常是 JavaScript）。不过，<canvas> 元素本身并没有绘制能力（它仅仅是图形的容器） - 您必须使用脚本来完成实际的绘图任务。getCo…
排序算法7---快速排序算法
原理： 通过一趟排序将待排记录分割成独立的两部分，其中一部分记录的关键字均比另一部分记录的关键字小，则可分别对这两部分记录继续进行排序，以达到整个序列有序的目的。 #include <stdio.h> #define MAXSIZE 9typedef stru…
dispatch callback ant design pro 网络请求回调函数
index.jsx 代码解析：在组件初次渲染时调用 model 中 命名空间为 a_models 的 getData 网络请求，传了一个patload 参数和 callback 回调函数过去，然后通过 this.setState ()更新视图的 state。 import { Form, Tabs,Affix, Button,Input,Table } from antd; import Re…
bigquery使用教程_如何使用Python和Google BigQuery构建机器人以自动执行您的笨拙任务...
bigquery使用教程Do you have repetitive tasks? Something that you do regularly, every week or even every day? Reporting might be one of your weekly or daily tasks. You query or ask for the data, and do some visualizations, then give it to your boss. What …
5S后返回首页
1 <!DOCTYPE html>2 <html>3 <head>4 <title>5S后返回首页</title> 5 <meta http-equiv"Content-Type" content"text/html; charsetgkb"/> 6 </head>7 <body>8 <h2>操作成功</h2>…
TypeScript 1
TypeScript 的由来 TypeScript 是 JavaScript 的一个超集，支持 ECMAScript 6 标准。 TypeScript 由微软开发的自由和开源的编程语言。 TypeScript 设计目标是开发大型应用，它可以编译成纯 JavaScript，编译出来的 JavaScript 可以运行在任何…
大龄屌丝自学笔记--Java零基础到菜鸟--028
泛型，for循环增强应用，静态导入，可变参数，asList() 1、泛型 约束了数据类型，格式为 <数据类型>，如：ArrayList<int> aListnew ArrayList<int>(); 泛型通配符：<?…
c# typescript_在任何IDE中从C＃，Java或Python代码获取TypeScript接口的简单方法
c# typescriptby Leonardo Carreiro莱昂纳多卡雷罗(Leonardo Carreiro) 在任何IDE中从C＃，Java或Python代码获取TypeScript接口的简单方法 (The easy way to get TypeScript interfaces from C#, Java, or Python code in any IDE) Who has never experi…
js里的document对象大全（DOM操作）
什么是DOM document object model 的简称，意思为文档对象模型。主要用来对文档中的html节点进行操作。 Dom的操作简单示例： <div id"t1"><div><input type"file" /> <input type"button" value"…
【制作镜像】BCEC制作镜像
如要制作的新镜像已存在标准版本镜像，即linux发行版本相同（此处指CentOS6.5 64位），可利用BCEC制作。 在BCEC创建centos6.5系统的可联外网的虚机，ssh到此虚机，用yum方式安装所需的功能： yum&…
Ant Design Pro 组件事件绑定 Input onChange
Input 组件的 onChange 事件绑定语法 render() {this.shop_change e > {const { value } e.target;console.log(shop_change,value)};return (<Input placeholder"" onChange{this.shop_change}></Input>)}
软件访问转向本地_我是如何从完整的初学者转向软件开发人员的，以及如何做到的...
软件访问转向本地by Madison Kanna麦迪逊卡纳(Madison Kanna) 我是如何从完整的初学者转向软件开发人员的，以及如何做到的 (How I went from complete beginner to software developer — and how you can too) Two years ago, I was right where you are today.两…
.NET笔试题集（五）
转载于：http://www.cnblogs.com/ForEvErNoME/archive/2012/09/15/2684938.html 1.什么是受管制的代码？ 答：unsafe：非托管代码。不经过CLR运行。 2.net Remoting 的工作原理是什么？ 答：服务器端向客户端发送…
devServer proxy跨域 设置代理 proxy
概念 什么是同源策略 同源策略是一种约定，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，则浏览器的正常功能可能都会受到影响。可以说Web是构建在同源策略基础之上的，浏览器只是针对同源策略的一种实现。 所谓同源是指…
转帖 开源游戏服务器调研
汇总贴 2013年优秀的开源引擎与开源游戏项目 http://mobile.51cto.com/aengine-431122.htm http://www.oschina.net/search?scopeproject&q%E6%89%8B%E6%B8%B8 当前的几种开源游戏服务端介绍 http://www.oschina.net/question/1986738_224669 用户贴，使用过后…
websockets_如何将WebSockets与AWS API Gateway和Lambda一起使用来构建实时应用程序
websocketsby Janitha Tennakoon通过詹妮莎特纳库恩 如何将WebSockets与AWS API Gateway和Lambda一起使用来构建实时应用程序 (How to build real-time applications using WebSockets with AWS API Gateway and Lambda) Recently AWS has announced the launch of a widely-r…
JS对象转URL参数
代码： /*** param 将要转为URL参数字符串的对象* key URL参数字符串的前缀* encode true/false 是否进行URL编码,默认为true* idx ,循环第几次，用&拼接* return URL参数字符串*/ var urlEncode (param,idx, key, encode)> {console.log(idx,idx…
Windows下Redis如何永久更改密码
公司使用的是Spring-session-redis 需要给Redis配置一个密码 本来我配置密码的方法是 先打开Redis服务 在采用 命令 CONFIG SET requirepass "密码" AUTH 密码 但是这样配置完密码之后再重启Redis服务密码会重置 也就是说每次打开Redis服务都要重新再配置一下密码 …
CEGUI-----动画
Animation XML files. <AnimationDefinition> <Affector name‘要被改变的属性名’ interpolator‘关键帧之间平滑过度的数值’> //specifies the name of a property that will be affected (have its value changed) as part of the animation <KeyFrame>…
react hooks使用_如何使用Hooks将React类组件转换为功能组件
react hooks使用by Balaganesh Damodaran通过Balaganesh Damodaran 如何使用Hooks将React类组件转换为功能组件 (How to convert React class components to function components using Hooks) Over the course of the past month, I’ve spent a lot of time working with Re…
[精]Odoo 8.0深入浅出开发教程-模块开发基础
參考资料点击这里.构建Odoo模块模块组成业务对象业务对象声明为Python类, 由Odoo自己主动加载.数据文件XML或CSV文件格式, 在当中声明了元数据(视图或工作流)、配置数据(模块參数)、演示数据等.Web控制器处理Web浏览器发来的requests.静态web数据Web用到的图像, CSS或JavaScrip…
Java基础知识强化之IO流笔记41：字符流缓冲流之复制文本文件案例02（使用 [ newLine() / readLine() ] ）（重要）...
1. 使用字符流缓冲流的特殊功能 [ newLine() / readLine() ] 需求：把当前项目目录下的a.txt内容复制到当前项目目录下的b.txt中 数据源： a.txt -- 读取数据 -- 字符转换流 -- InputStreamReader -- FileReader -- BufferedReader 目的地：…
Ant Design Pro 跳转路由 传参数，接收参数
umi/link 通过声明的方式做路由跳转。 例子： import Link from umi/link;export default () => {<div>/* 普通使用 */<Link to="/list">Go to list page</Link>/* 带参数 */<Link to="/list?a=b">Go to list page</Lin…
编写react组件_React组件的“黄金法则”如何帮助您编写更好的代码
编写react组件以及钩子如何发挥作用 (And how hooks come into play) Recently I’ve adopted a new philosophy that changes the way I make components. It’s not necessarily a new idea but rather a subtle new way of thinking.最近，我采用了一种新的理念&a…
js验证函数摘录
/**本文摘自：http://www.cnblogs.com/rob0121/articles/1776298.html* js各种表单数据验证*/ /**************************************************************************************/ /*************************************数字的验证*********************…