理解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 ...
随机推荐
- GCC 编译 --sysroot
-sysroot 的作用 如果在编译时指定了-sysroot就是为编译时指定了逻辑目录.编译过程中需要引用的库,头文件,如果要到/usr/include目录下去找的情况下,则会在前面加上逻辑目录. 如 ...
- ViewPage第二课为ViewPage加入标题
在第一课 学前准备:掌握ViewPage第一课http://blog.csdn.net/wei_chong_chong/article/details/50468832 为ViewPage加入标题: ...
- js进阶 12-15 jquery如何实现点击button显示列表,点击其它位置隐藏列表
js进阶 12-15 jquery如何实现点击button显示列表,点击其它位置隐藏列表 一.总结 一句话总结:在button中阻止事件冒泡. 1.如何咋button中阻止事件冒泡(两种方法)? ev ...
- Android JAVA如何判断两天在同一周内
/** * <pre> * 判断date和当前日期是否在同一周内 * 注: * Calendar类提供了一个获取日期在所属年份中是第几周的方法,对于上一年末的某一天 * 和新年初的某一天在 ...
- iOS改动UIButton setTitle字体颜色和调整字体位置
调整Title字体位置 [button setTitleEdgeInsets:UIEdgeInsetsMake(10, 0, 0, 0)]; 四个參数分别代表:上边界,左边界.下边界,右边界 改动UI ...
- 部分城市关于.Net招聘数量
2016-12-09更新统计数据 上海 10730 北京 6322 广州 4157 深圳 3548 成都 2291 重庆 706 厦门 285 2015-01-30日,前程无忧搜索".Net ...
- Nginx和Nginx+的比較(下)
Nginx和Nginx+的比較(下) 作者:chszs.未经博主同意不得转载.经许可的转载需注明作者和博客主页:http://blog.csdn.net/chszs 内容紧接上一篇<Nginx和 ...
- MVC模式编程演示样例-登录验证(静态)
好,上篇博客分享了本人总结的JSP-Servlet-JavaBean三层架构编程模式的实现思想和基本流程,接下来给大家分享一个MVC编程模式的实现演示样例-登录验证的过程,这里我仍然用的是静态的验证u ...
- css3-13 如何改变文本框的轮廓颜色
css3-13 如何改变文本框的轮廓颜色 一.总结 一句话总结:outline使用和border很像,几乎一模一样,多了一个offset属性 1.轮廓outline如何使用? 使用和border很像, ...
- ZOJ 1101 Gamblers 二分
http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemId=101 让你在一堆互不相同的数中查找是否有a=b+c+d,若有不同的解,则输出最大 ...