React PureComponent All In One
React PureComponent All In One
import React, {
// useState,
// useEffect,
// Component,
PureComponent,
} from "react";
// import "./style.css";
// pccs, PureComponent Class With Constructor
class App extends PureComponent {
constructor(props) {
super(props);
this.state = {};
}
render() {
const {
id,
name,
} = props;
return (
<>
<div>
<p>id = {id || 2020}</p>
<p>name = {name || xgqfrms}</p>
</div>
</>
);
}
}
export default App;
// pcs, PureComponent Class
class PCSApp extends PureComponent {
state = { }
render() {
return (
<>
<p>Hello, React Pure Component!</p>
</>
);
}
}
// export default PCSApp;
// pcsf, PureComponent Class FlowType
// type P = {
// str: string,
// };
// type S = {
// int: number,
// };
// class PCSFApp extends PureComponent<P, S> {
// state = { }
// render() {
// return (
// <>
// <p>pcsf, PureComponent Class FlowType</p>
// </>
// );
// }
// }
// export default PCSFApp;
PureComponent
https://reactjs.org/docs/react-api.html
UMD (CJS, global, AMD, CMD) + ESM
源码怎么实现的?
- ES6
React.Component
React.PureComponent
JSX, React.createElement() 语法糖
https://reactjs.org/docs/introducing-jsx.html
- ES5
create-react-class
https://reactjs.org/docs/react-without-es6.html
createElement()
createFactory()
https://reactjs.org/docs/react-without-jsx.html
Class Components vs Function Components (React Hooks)
https://reactjs.org/tutorial/tutorial.html
- Class Components
https://reactjs.org/docs/react-component.html
React.PureComponent 浅比较
https://reactjs.org/docs/react-component.html#shouldcomponentupdate
https://reactjs.org/docs/react-component.html#forceupdate
immutable objects 深比较
https://facebook.github.io/immutable-js/
React Lifecycle
很少使用到
shouldComponentUpdate(nextProps, nextState)
https://reactjs.org/docs/react-component.html#rarely-used-lifecycle-methods
refs
https://reactjs.org/docs/components-and-props.html
https://reactjs.org/docs/state-and-lifecycle.html
https://reactjs.org/docs/composition-vs-inheritance.html
xgqfrms 2012-2020
www.cnblogs.com 发布文章使用:只允许注册用户才可以访问!
React PureComponent All In One的更多相关文章
- React.Component 与 React.PureComponent(React之性能优化)
前言 先说说 shouldComponentUpdate 提起React.PureComponent,我们还要从一个生命周期函数 shouldComponentUpdate 说起,从函数名字我们就能看 ...
- [React] React.PureComponent
React.PureComponent is similar to React.Component. The difference between them is that React.Compone ...
- React.Component 和 React.PureComponent 、React.memo 的区别
一 结论 React.Component 是没有做任何渲染优化的,但凡调用this.setState 就会执行render的刷新操作. React.PureComponent 是继承自Componen ...
- [React] PureComponent in React
In this lesson, you will learn how to use PureComponent in React to reduce the number of times your ...
- 【react】---pureComponent的理解
一.pureComponent的理解 pureComponent表示一个纯组件,可以用来优化react程序.减少render函数渲染的次数.提高性能 pureComponent进行的是浅比较,也就是 ...
- React性能优化 PureComponent
为什么使用? React15.3中新加了一个 PureComponent 类,顾名思义, pure 是纯的意思, PureComponent 也就是纯组件,取代其前身 PureRenderMixin ...
- [React] Use React.memo with a Function Component to get PureComponent Behavior
A new Higher Order Component (HOC) was recently released in React v16.6.0 called React.memo. This be ...
- react 中的 PureComponent
React.PureComponent最重要的一个用处就是优化React应用,因为它减少了应用中的渲染次数,所以对性能的提升是非常可观的. 原理:在普通的 componnet 组件中,shouldCo ...
- React性能优化之PureComponent 和 memo使用分析
前言 关于react性能优化,在react 16这个版本,官方推出fiber,在框架层面优化了react性能上面的问题.由于这个太过于庞大,我们今天围绕子自组件更新策略,从两个及其微小的方面来谈rea ...
随机推荐
- 简单监控liunx中cpu、内存、磁盘及发送邮件参考
shell脚本 vim jk.sh #命名脚本名 #!/bin/bash time=`date "+%Y-%m-%d %H:%M:%S"` #定义时间 echo & ...
- (05)-Python3之--运算符操作
1.算数运算 num_a = 100 num_b = 5000 # 加法 + print(num_a + num_b) # 减法 - print(num_a - num_b) # 乘法 * print ...
- ADB命令连接逍遥模拟器
注:打开模拟器开发者模式 ->USB调试模式 1.先进入逍遥模拟器安装目录(MEmu文件夹下),如:D:\Program Files\Microvirt\MEmu 2.在CMD下输入:adb c ...
- Angular入门到精通系列教程(14)- Angular 编译打包 & Docker发布
目录 1. 概要 2. 编译打包 2.1. 基本打包命令 2.2. 打包部署到二级目录 3. Angular站点的发布 3.1. web服务器发布 3.2. 使用docker发布 4. 总结 环境: ...
- 让绝对定位的div居中
最近看到一个问题就是让绝对定位的div居中,在尝试了top:50%:left:50%:后发现,居中是有问题的并不是想象中的样子 需要再加两句margin-top:-盒子高度的一般px margin- ...
- 配置HDFS的HA
配置前准备: -- 配置hadoop -- 配置ZooKeeper,传送门:https://www.cnblogs.com/zhqin/p/11906106.html 安装配置好hadoop和ZooK ...
- 源码 redis 分布式锁
https://github.com/SPSCommerce/redlock-py/tree/master/redlock
- Linux命令——netcat
简介 netcat的简写是nc,被设计为一个简单.可靠的网络工具,主要作用如下: 1 实现任意TCP/UDP端口的侦听,nc可以作为server以TCP或UDP方式侦听指定端口 2 端口的扫描,nc可 ...
- SpringMVC 通过commons-fileupload实现文件上传
目录 配置 web.xml SpringMVC配置文件 applicationContext.xml 文件上传 Controller 上传实现一 上传实现二 测试 依赖 配置 web.xml < ...
- IntelliJ IDEA 20 岁了!20 年前的第 1 版曝光…
IntelliJ IDEA 最近发布了 20 周年庆典: https://www.jetbrains.com/lp/intellijidea-20-anniversary/ IntelliJ IDEA ...