react-parent-child-lifecycle-order
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 发布文章使用:只允许注册用户才可以访问!
react-parent-child-lifecycle-order的更多相关文章
- [NHibernate]Parent/Child
系列文章 [Nhibernate]体系结构 [NHibernate]ISessionFactory配置 [NHibernate]持久化类(Persistent Classes) [NHibernate ...
- React (Native) Rendering Lifecycle
How Does React Native Work? The idea of writing mobile applications in JavaScript feels a little odd ...
- 服务启动Apache服务,错误Parent: child process exited with status 3 -- Aborting.解决
不能启动apache,或者使用wamp等集成包后,唯独apache服务启动后有停止,但是把东西搬到其他机器上却没事问题可能和网络有关,我查了很多资料首先找打apache的错误报告日志,发现现实诸多的调 ...
- XPath学习:parent,child
XPath 是一门在 XML 文档中查找信息的语言.XPath 可用来在 XML 文档中对元素和属性进行遍历. XPath 是 W3C XSLT 标准的主要元素,并且 XQuery 和 XPointe ...
- [React Fundamentals] Component Lifecycle - Updating
The React component lifecycle will allow you to update your components at runtime. This lesson will ...
- [React Fundamentals] Component Lifecycle - Mounting Usage
The previous lesson introduced the React component lifecycle mounting and unmounting. In this lesson ...
- [React Fundamentals] Component Lifecycle - Mounting Basics
React components have a lifecycle, and you are able to access specific phases of that lifecycle. Thi ...
- [React] React Fundamentals: Component Lifecycle - Updating
The React component lifecycle will allow you to update your components at runtime. This lesson will ...
- [React ] React Fundamentals: Component Lifecycle - Mounting Usage
The previous lesson introduced the React component lifecycle mounting and unmounting. In this lesson ...
- [React] React Fundamentals: Component Lifecycle - Mounting Basics
React components have a lifecycle, and you are able to access specific phases of that lifecycle. Thi ...
随机推荐
- Docker 中的网络功能介绍 外部访问容器 容器互联 配置 DNS
Docker 中的网络功能介绍 | Docker 从入门到实践 https://vuepress.mirror.docker-practice.com/network/ Docker 允许通过外部访问 ...
- Object level permissions support
django-guardian (1.1.1+) - Object level permissions support. Home - Django REST framework https://ww ...
- epoll在fork子进程中的问题
epoll_create 创建的 文件描述符和其他文件描述符一样,是被fork出的子进程继承的,那也就是子进程可以使用这个epoll fd添加感兴趣的io(epoll_ctl),然后是可以影响到父进程 ...
- 关闭(隐藏)VS2019控制台上文件路径的显示
昨天有个朋友问我,怎么关闭在运行程序后,控制台上显示的文件路径啊?啥??我突然不知道他说的说什么,然后我就自己随便打了几行运行了一下,才知道原来他说的是这个: 一开始我也没在意,我就告诉他,这个无所谓 ...
- HarmonyOS三方件开发指南(7)——compress组件
目录:1. 组件compress功能介绍2. 组件compress使用方法3. 组件compress开发实现 1. 组件compress功能介绍1.1. 组件介绍: compress是 ...
- docker通过dockerfile构建JDK最小镜像,Docker导出导入镜像
docker通过dockerfile构建JDK最小镜像,Docker导出导入镜像 一.docker通过dockerfile构建JDK最小镜像 1.1 下载JRE 1.2 解压JRE,删除相关不需要文件 ...
- java架构《并发线程高级篇二》
本章主要记录讲解并发线程的线程池.使用Executor框架自定义线程池. 自定义线程池使用Queue队列所表示出来的形式: 1 ArrayBlockingQueue<Runnable>(3 ...
- Spring cloud-Bus (消息总线)
<dependency> <groupId>org.springframework.cloud</groupId> <artifactId>spring ...
- Redis集群搭建很easy
前言 哨兵模式虽然让读写分离更加高可用,但单台服务器由于本身的内存和CPU瓶颈,对于高并发和大数据业务的应用场景还是远远不能满足:对于这种情况,有点经验的小伙伴会毫不犹豫的想到集群,搞他好几个节点,负 ...
- 漫画 | CPU战争40年,真正的王者终于现身!
上个世纪70年代,内存又慢又贵, 程序员得想尽一切办法节省内存. 那个时代的编译器也比较差劲 所以,70年代的程序员几乎都写得一手好汇编. 为了帮助程序员写好汇编,这个时候的CPU也有意把指令集做了增 ...