react-parent-child-lifecycle-order

react parent child lifecycle order

live demo

https://33qrr.csb.app/

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的更多相关文章

  1. [NHibernate]Parent/Child

    系列文章 [Nhibernate]体系结构 [NHibernate]ISessionFactory配置 [NHibernate]持久化类(Persistent Classes) [NHibernate ...

  2. React (Native) Rendering Lifecycle

    How Does React Native Work? The idea of writing mobile applications in JavaScript feels a little odd ...

  3. 服务启动Apache服务,错误Parent: child process exited with status 3 -- Aborting.解决

    不能启动apache,或者使用wamp等集成包后,唯独apache服务启动后有停止,但是把东西搬到其他机器上却没事问题可能和网络有关,我查了很多资料首先找打apache的错误报告日志,发现现实诸多的调 ...

  4. XPath学习:parent,child

    XPath 是一门在 XML 文档中查找信息的语言.XPath 可用来在 XML 文档中对元素和属性进行遍历. XPath 是 W3C XSLT 标准的主要元素,并且 XQuery 和 XPointe ...

  5. [React Fundamentals] Component Lifecycle - Updating

    The React component lifecycle will allow you to update your components at runtime. This lesson will ...

  6. [React Fundamentals] Component Lifecycle - Mounting Usage

    The previous lesson introduced the React component lifecycle mounting and unmounting. In this lesson ...

  7. [React Fundamentals] Component Lifecycle - Mounting Basics

    React components have a lifecycle, and you are able to access specific phases of that lifecycle. Thi ...

  8. [React] React Fundamentals: Component Lifecycle - Updating

    The React component lifecycle will allow you to update your components at runtime. This lesson will ...

  9. [React ] React Fundamentals: Component Lifecycle - Mounting Usage

    The previous lesson introduced the React component lifecycle mounting and unmounting. In this lesson ...

  10. [React] React Fundamentals: Component Lifecycle - Mounting Basics

    React components have a lifecycle, and you are able to access specific phases of that lifecycle. Thi ...

随机推荐

  1. Docker 中的网络功能介绍 外部访问容器 容器互联 配置 DNS

    Docker 中的网络功能介绍 | Docker 从入门到实践 https://vuepress.mirror.docker-practice.com/network/ Docker 允许通过外部访问 ...

  2. Object level permissions support

    django-guardian (1.1.1+) - Object level permissions support. Home - Django REST framework https://ww ...

  3. epoll在fork子进程中的问题

    epoll_create 创建的 文件描述符和其他文件描述符一样,是被fork出的子进程继承的,那也就是子进程可以使用这个epoll fd添加感兴趣的io(epoll_ctl),然后是可以影响到父进程 ...

  4. 关闭(隐藏)VS2019控制台上文件路径的显示

    昨天有个朋友问我,怎么关闭在运行程序后,控制台上显示的文件路径啊?啥??我突然不知道他说的说什么,然后我就自己随便打了几行运行了一下,才知道原来他说的是这个: 一开始我也没在意,我就告诉他,这个无所谓 ...

  5. HarmonyOS三方件开发指南(7)——compress组件

    目录:1. 组件compress功能介绍2. 组件compress使用方法3. 组件compress开发实现 1. 组件compress功能介绍1.1.  组件介绍:        compress是 ...

  6. docker通过dockerfile构建JDK最小镜像,Docker导出导入镜像

    docker通过dockerfile构建JDK最小镜像,Docker导出导入镜像 一.docker通过dockerfile构建JDK最小镜像 1.1 下载JRE 1.2 解压JRE,删除相关不需要文件 ...

  7. java架构《并发线程高级篇二》

    本章主要记录讲解并发线程的线程池.使用Executor框架自定义线程池. 自定义线程池使用Queue队列所表示出来的形式: 1 ArrayBlockingQueue<Runnable>(3 ...

  8. Spring cloud-Bus (消息总线)

    <dependency> <groupId>org.springframework.cloud</groupId> <artifactId>spring ...

  9. Redis集群搭建很easy

    前言 哨兵模式虽然让读写分离更加高可用,但单台服务器由于本身的内存和CPU瓶颈,对于高并发和大数据业务的应用场景还是远远不能满足:对于这种情况,有点经验的小伙伴会毫不犹豫的想到集群,搞他好几个节点,负 ...

  10. 漫画 | CPU战争40年,真正的王者终于现身!

    上个世纪70年代,内存又慢又贵, 程序员得想尽一切办法节省内存. 那个时代的编译器也比较差劲 所以,70年代的程序员几乎都写得一手好汇编. 为了帮助程序员写好汇编,这个时候的CPU也有意把指令集做了增 ...