react-parent-child-lifecycle-order
2024-08-28 07:00:22
react-parent-child-lifecycle-order
react parent child lifecycle order
live demo
https://codesandbox.io/s/react-parent-child-lifecycle-order-33qrr
https://react-parent-child-lifecycle-order.stackblitz.io
https://stackblitz.com/edit/react-parent-child-lifecycle-order
import React, { Component } from "react";
import log from "../utils/log";
class Child extends Component {
constructor() {
super();
this.state = {};
log(`child constructor`, 0);
}
// new API
// getDerivedStateFromProps() {
// log(`child getDerivedStateFromProps`, 11);
// }
// getSnapshotBeforeUpdate() {
// log(`child getSnapshotBeforeUpdate`, 22);
// }
// old API
componentWillMount() {
log(`child WillMount`, 1);
}
// UNSAFE_componentWillMount() {
// log(`child WillMount`, 1);
// }
componentDidMount() {
log(`child DidMount`, 2);
}
componentWillReceiveProps() {
log(`child WillReceiveProps`, 3);
}
// UNSAFE_componentWillReceiveProps() {
// log(`child WillReceiveProps`, 3);
// }
shouldComponentUpdate() {
log(`child shouldComponentUpdate`, 4);
return true;
// return true or false;
}
componentWillUpdate() {
log(`child WillUpdate`, 5);
}
// UNSAFE_componentWillUpdate() {
// log(`child WillUpdate`, 5);
// }
componentDidUpdate() {
log(`child DidUpdate`, 6);
}
componentWillUnmount() {
log(`\nchild WillUnmount`, 7);
}
componentDidCatch(err) {
log(`child DidCatch`, err);
}
render() {
log(`child render`);
return (
<div className="child">
<h1>child-lifecycle-order</h1>
</div>
);
}
}
export default Child;
import React, { Component } from "react";
import Child from "./child";
import log from "../utils/log";
class Parent extends Component {
constructor() {
super();
this.state = {
show: true
};
// this.toggoleShow = this.toggoleShow.bind(this);
log(`parent constructor`, 0);
}
// new API
// getDerivedStateFromProps() {
// log(`child getDerivedStateFromProps`, 11);
// }
// getSnapshotBeforeUpdate() {
// log(`child getSnapshotBeforeUpdate`, 22);
// }
// old API
componentWillMount() {
log(`parent WillMount`, 1);
}
// UNSAFE_componentWillMount() {
// log(`parent UNSAFE_WillMount`, 1);
// }
componentDidMount() {
log(`parent DidMount`, 2);
}
componentWillReceiveProps() {
log(`parent WillReceiveProps`, 3);
}
// UNSAFE_componentWillReceiveProps() {
// log(`parent UNSAFE_WillReceiveProps`, 3);
// }
shouldComponentUpdate() {
log(`parent shouldComponentUpdate`, 4);
return true;
// return true or false;
}
componentWillUpdate() {
log(`parent WillUpdate`, 5);
}
// UNSAFE_componentWillUpdate() {
// log(`parent UNSAFE_WillUpdate`, 5);
// }
componentDidUpdate() {
log(`parent DidUpdate`, 6);
}
componentWillUnmount() {
log(`\n\nparent WillUnmount`, 7);
}
componentDidCatch(err) {
log(`parent DidCatch`, err);
}
// toggoleShow() {
// const { show } = this.state;
// this.setState({
// show: !show
// });
// }
toggoleShow = () => {
const { show } = this.state;
this.setState({
show: !show
});
};
render() {
log(`parent render`);
const { show } = this.state;
return (
<div className="parent">
<h1>parent-lifecycle-order</h1>
{/* <button onClick={this.toggoleShow.bind(this)}>toggoleShow</button> */}
{/* <button onClick={() => this.toggoleShow}>toggoleShow</button> */}
<button onClick={this.toggoleShow}>toggoleShow</button>
{show && <Child />}
</div>
);
}
}
export default Parent;
import React, { useState, useEffect } from "react";
import "./styles.css";
import Parent from "./components/parent";
export default function App() {
const [show, setShow] = useState(true);
const toggoleShow = () => {
setShow(!show);
};
useEffect(() => {
// Update the document title using the browser API
let flag = true;
if (flag) {
document.title = `react hooks ${show}`;
}
// cancel promise
return () => (flag = false);
}, [show]);
return (
<div className="App">
<h1>react-parent-child-lifecycle-order</h1>
<button onClick={toggoleShow}>toggoleShow</button>
{show && <Parent />}
</div>
);
}
xgqfrms 2012-2020
www.cnblogs.com 发布文章使用：只允许注册用户才可以访问！
最新文章
- 关于把.net 2.0的项目升级到.net4.0遇到的一些问题
- log4j PatternLayout 输出解析
- js获取项目根目录的方法
- 连接MySQL数据库(android、php、MySQL)
- web开发中目录路径问题的解决
- LINQ to SQL语句
- [tty与uart]1.Linux中tty框架与uart框架之间的调用关系剖析
- VS2012中进行Web性能和负载测试
- Linux - CentOS 6.3 (x86_64)安装过程详细图解
- 网站加载有商务通、商桥，定义js函数触发快商通代码
- cocos2d-x Tests讲解 Particle System（粒子系统）
- python之路--内置函数, 匿名函数
- Ubuntu 16.04下安装zsh和oh-my-zsh
- 批处理数据库（利用batch插入2w条数据）
- 黄聪：AngularJS如何在filter中相互调用filter
- 《算法导论》——MergeSort
- Tcp连接的七次握手浅析
- Elasticsearch Java Rest Client API 整理总结 (一)——Document API
- nodejs npm install -g 全局安装
- Java第三阶段学习（十二、HttpServletRequest与HttpServletResponse）