理解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 ...
随机推荐
- eclipse 使用jetty调试时,加依赖工程的源码调试方法
[1] 添加source eclipse-->debug as-->debug configurations-->source [2]若source不起作用 重新编译一下,mvn c ...
- 【转】排列组合 "n个球放入m个盒子m"问题 总结
出处:https://blog.csdn.net/qwb492859377/article/details/50654627 球,盒子都可以分成是否不能区分,和能区分,还能分成是否能有空箱子,所以一共 ...
- [Flexbox] Use Flex to Scale Background Image
In this lesson we will use Flexbox to scale a background image to fit on the screen of our React Nat ...
- IOS日期转为今天昨天形式
近期项目有类似QQ空间展示动态的UI,模仿了QQ空间的时间显示.在此记录,以备查阅. 这是QQ空间的ui: 时间显示为: 1.今天-->今天 xx:xx(今天 15:39) 2.昨天--> ...
- HDU1392:Surround the Trees(凸包问题)
Surround the Trees Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Other ...
- storm-kafka编程指南
目录 storm-kafka编程指南 一.原理及关键步骤介绍 (一)使用storm-kafka的关键步骤 1.创建ZkHosts 2.创建KafkaConfig 3.设置MultiScheme 4.创 ...
- 影响stm32仿真的因素
可能是因为电池电量不足??? 电量不足可能会妨碍SD卡的挂载
- 7、基于嵌入式Linux的视频采集系统---UVC驱动模型介绍
UVC 即 usb video class.USB协议中,除了通用的软硬件电气接口规范等,还包含了各种各样的Class协议,用来为不同的功能定义各自的标准接口和具体的总线上的数据交互格式和内容.这些C ...
- linux下FAT32格式u盘只读的问题及解决方法
以下是网上看到的解决办法:http://blog.csdn.net/heqiuya/article/details/7870554 其实是掉电保护,之前挂在的SD变成了制度文件,只需要将SD卡重新挂载 ...
- python3报错
这个错误是我在从Excel中导入数据,,x,y 和z(z代表了强度) 然后通过xyz画出一个二维的灰度图片所出现的错误 原因是因为用mcml生成的数据如: TypeError: cannot per ...