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 ...
随机推荐
- C/C++ Lua通信
C/C++和Lua是如何进行通信的? http://www.luachina.cn/?post=38 2015-12-28 为了实现Lua和其他语言之间的通信,Lua虚拟机为C/C++提供了两个特性: ...
- pywin32 pywin32 docx文档转html页面 word doc docx 提取文字 图片 html 结构
https://blog.csdn.net/X21214054/article/details/78873338# python docx文档转html页面 - 程序猿tx - 博客园 https:/ ...
- css水平、垂直居中的写法
水平居中 行内元素: text-align: center 块级元素: margin: 0 auto position:absolute +left:50%+ transform:translateX ...
- 网页小实验——用canvas生成精灵动画图片
实验目标:借助canvas把一张国际象棋棋子图片转换为一组适用于WebGL渲染的精灵动画图片,不借助其他图片处理工具,不引用其他库只使用原生js实现. 初始图片如下: 一.图片分割 将初始图片分割为六 ...
- how2j SpringMVC学习心得
http://how2j.cn/k/springmvc/springmvc-form/618.html 注意 addProduct.jsp 是放在了WebContent(即web目录)下,访问的时候, ...
- 分布式缓存 — kafka
Kafka是一个分布式.支持分区的(partition).多副本的(replica),基于zookeeper协调的分布式消息系统,它的最大的特性就是可以实时的处理大量数据以满足各种需求场景:比如基于h ...
- 重绘和回流(Repaint & Reflow)总结,以及如何进行优化
1. 浏览器渲染机制 浏览器采用流式布局模型(Flow Based Layout) 浏览器会把HTML解析成DOM,把CSS解析成CSSOM,DOM和CSSOM合并就产生了渲染树(Render Tre ...
- 函数式编程(hashlib模块)
hashlib模块 一.hashlib模块 hashlib模块,主要用于加密相关的操作,在python3的版本里,代替了md5和sha模块,主要提供 SHA1, SHA224, SHA256, S ...
- linux 系统磁盘管理(主分区和逻辑分区)
摘要:linux系统磁盘管理主分区和逻辑分区 1.linux系统分区应了解的常识 硬盘分区实质上是对硬盘的一种格式化,然后才能使用硬盘保存各种信息,在创建分区时,就已经设置好了硬盘的各项物理参数,指定 ...
- UML——部署图
一.What 概念: 1.部署图:用来展示所开发系统的硬件配置和组成.软件布局的一个网络拓扑结构图. 2.组成元素:节点.连接.(补充:处理器.设备.节点属性和操作) 2.1节点(Node):是一个物 ...