理解React生命周期的好例子
class App extends React.Component {
static propTypes = {
};
static defaultProps = {
};
constructor(props) {
super(props);
this.state = {
data: 0
};
}
componentWillUnMount() {
}
componentWillReceiveProps(nextProps) {
}
shouldComponentUpdate(nextProps, nextState) {
return true;
}
componentWillUpdate(nextProps, nextState) {
console.log('准备update')
console.log(this.state.data)
}
componentDidUpdate(prevProps, prevState) {
console.log(this.state.data)
}
componentWillMount() {
console.log(this.state.data)
}
componentDidMount() {
console.log(this.state.data)
this.setState(
{data: 1}
)
console.log(this.state.data)
}
render() {
return <div>This is a demo</div>;
}
}
ReactDOM.render(
<App />,
document.getElementById('example')
)
《深入React技术栈》这本书确实值得推荐。对生命周期的理解,就是自己慢慢打log看,自己琢磨。
理解React生命周期的好例子的更多相关文章
- 10秒钟理解react生命周期
慎点!这是一篇很水很水的文章, 抄自react中文文档, 本文详细介绍了react生命周期函数执行顺序, 以及各生命周期函数的含义和具体作用. 不同阶段生命周期函数执行顺序 挂载(Mounting) ...
- React生命周期简单详细理解
前言 学习React,生命周期很重要,我们了解完生命周期的各个组件,对写高性能组件会有很大的帮助. Ract生命周期 React 生命周期分为三种状态 1. 初始化 2.更新 3.销毁 初始化 1.g ...
- React生命周期详解
React生命周期图解: 一.旧版图解: 二.新版图解: 从图中,我们可以清楚知道React的生命周期分为三个部分: 实例化.存在期和销毁时. 旧版生命周期如果要开启async rendering, ...
- React生命周期
在react生命周期中,分2段执行,一个挂载的生命周期,一个是组件发生了数据变动,或者事件触发而引发的更新生命周期. 注:react生命周期很重要,对于很多组件场景的应用发挥重要作用,而且不熟悉生命周 ...
- React 生命周期
前言 学习React,生命周期很重要,我们了解完生命周期的各个组件,对写高性能组件会有很大的帮助. Ract生命周期 React 生命周期分为三种状态 1. 初始化 2.更新 3.销毁 初始化 1.g ...
- 22.1 、react生命周期(一)
在每个react组件中都有以下几个生命周期方法~我们需要在不同阶段进行讨论 组件生命周期概述 1.初始化 在组件初始化阶段会执行 constructor static getDerivedStateF ...
- react 生命周期钩子里不要写逻辑,否则不生效
react 生命周期钩子里不要写逻辑,否则不生效,要把逻辑写在函数里,然后在钩子里调用函数,否则会出现问题.
- react复习总结(2)--react生命周期和组件通信
这是react项目复习总结第二讲, 第一讲:https://www.cnblogs.com/wuhairui/p/10367620.html 首先我们来学习下react的生命周期(钩子)函数. 什么是 ...
- React生命周期执行顺序详解
文章内容转载于https://www.cnblogs.com/faith3/p/9216165.html 一.组件生命周期的执行次数是什么样子的??? 只执行一次: constructor.compo ...
随机推荐
- 一个IP建多个Web站点
TCP端口法 由于各种原因,我们有时候需要在一个IP地址上建立多个web站点,在IIS5中,我们可能通过简单的设 置达到这个目标. 在IIS中,每个 Web 站点都具有唯一的.由三个部分组成的标识 ...
- Fragment Summary 2/2
出处:http://blog.csdn.net/lmj623565791/article/details/37992017 上篇博客中已经介绍了Fragment产生原因,以及一些基本的用法和各种API ...
- Altium Designer规则的制定,一般规则
资源来源于网上: 1,线间距6~10个mil 2,铺铜间距 20mil 实心 3,焊盘对焊盘间距10mil 4,测量电压的位置要到引脚附近. 敷铜:
- JS学习笔记 - 透明度运动框
该练习的笔记如下: 1. var cur=0; //先声明一个变量. 2. parseInt会舍掉小数,而opacity值恰恰是小数,所以对于opacity,必须用parseFloat. cur ...
- python3 购物车小程序,余额写入文件保存
python3 购物车小程序,余额写入文件保存 #!/usr/bin/env python # -*- coding:utf-8 -*- # Author:Hiuhung Wan goods = ( ...
- SQL Server2008 Hierarchyid数据类型
以往我们在关系数据库中建立树状结构的时候,通常使用ID+ParentID来实现两条 纪录间的父子关系.但这种方式只能标示其相对位置.解决这类问题在SqlServer2005出现之前通常是采用游标来操作 ...
- 【Codeforces Round #432 (Div. 1) B】Arpa and a list of numbers
[链接]h在这里写链接 [题意] 定义bad list是一个非空的.最大公约数为1的序列.给定一个序列,有两种操作:花费x将一个元素删除.花费y将一个元素加1,问你将这个序列变为good list所需 ...
- SQLcl
参考博客: https://wangfanggang.com/Oracle/sqlcl/ 执行show sqlformat可以看到当前格式化样式为:default 让我们修改下显示结果的样式:set ...
- ZOJ 1489 2^x mod n = 1 数论
http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemId=489 题目大意: 给你正整数n,求最小的x使得2^x mod n = 1. 思路 ...
- DBeaver无法执行数据库脚本
网上查了查相关问题,自己写了个步骤,记录下来方便以后查找 此处我连接的是mysql数据库,就以mysql为例说明: 在使用DBeaver过程中,别人给了几个sql文件,想直接导入数据库中,正常流程应该 ...