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

源码怎么实现的?

  1. ES6

React.Component

React.PureComponent

JSX, React.createElement() 语法糖

https://reactjs.org/docs/introducing-jsx.html

  1. 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

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

  1. React.Component 与 React.PureComponent(React之性能优化)

    前言 先说说 shouldComponentUpdate 提起React.PureComponent,我们还要从一个生命周期函数 shouldComponentUpdate 说起,从函数名字我们就能看 ...

  2. [React] React.PureComponent

    React.PureComponent is similar to React.Component. The difference between them is that React.Compone ...

  3. React.Component 和 React.PureComponent 、React.memo 的区别

    一 结论 React.Component 是没有做任何渲染优化的,但凡调用this.setState 就会执行render的刷新操作. React.PureComponent 是继承自Componen ...

  4. [React] PureComponent in React

    In this lesson, you will learn how to use PureComponent in React to reduce the number of times your ...

  5. 【react】---pureComponent的理解

    一.pureComponent的理解  pureComponent表示一个纯组件,可以用来优化react程序.减少render函数渲染的次数.提高性能 pureComponent进行的是浅比较,也就是 ...

  6. React性能优化 PureComponent

    为什么使用? React15.3中新加了一个 PureComponent 类,顾名思义, pure 是纯的意思, PureComponent 也就是纯组件,取代其前身 PureRenderMixin  ...

  7. [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 ...

  8. react 中的 PureComponent

    React.PureComponent最重要的一个用处就是优化React应用,因为它减少了应用中的渲染次数,所以对性能的提升是非常可观的. 原理:在普通的 componnet 组件中,shouldCo ...

  9. React性能优化之PureComponent 和 memo使用分析

    前言 关于react性能优化,在react 16这个版本,官方推出fiber,在框架层面优化了react性能上面的问题.由于这个太过于庞大,我们今天围绕子自组件更新策略,从两个及其微小的方面来谈rea ...

随机推荐

  1. Ajax编程基础

    目录 Ajax编程基础 传统网站中存在的问题 Ajax概述 Ajax的应用场景 Ajax的运行环境 Ajax运行原理及实现 Ajax运行原理 Ajax的实现步骤 1.创建Ajax对象 2.告诉Ajax ...

  2. Django 模型(数据库)-cmd下的操作

    Django 模型是与数据库相关的,与数据库相关的代码一般写在 models.py 中,Django 支持 sqlite3, MySQL, PostgreSQL等数据库,只需要在settings.py ...

  3. Mybatis报错:Could not find resource mybatis-conf.xml

    Mybatis报错:Could not find resource mybatis-conf.xml 报错截图: 报错内容: java.io.IOException: Could not find r ...

  4. Spring Filter过滤表单中的非法字符

    使用Spring Filter过滤表单中的非法字符 1 package test.filter; 2 3 import java.io.IOException; 4 import java.util. ...

  5. python基础学习2 函数变量与赋值

    学习的第一步,就是通常的输出函数:print() 1.基础主要学习了变量的赋值,变量名可以疑字母.数字.下划线(_)进行命名,但是不能以数字开头 变量的赋值:变量名 = 变量值 2.模块的导入,和调用 ...

  6. Language Guide (proto3) | proto3 语言指南(六)嵌套类型

    Nested Types - 嵌套类型 您可以在其他消息类型中定义和使用消息类型,如以下示例所示--这里的Result消息是在SearchResponse消息中定义的: message SearchR ...

  7. nginx及其常用实践方案

    nginx及其常用实践方案 1.概述 1.1 什么是nginx? 1.2 什么是反向代理? 2.nginx常用命令 3.ningx配置实践 3.1 nginx.conf基础配置项 3.2 http 反 ...

  8. Java面试(解答题二)

    1.一个用户具有多个角色,请查询出该表中具有该用户的所有角色的其他用户.备注:用户表:tb,角色字段为role,主键为id.请写出sql语句. 解答: 2.概述MVC体系结构 解答: MVC包括三类对 ...

  9. jvm 总体梳理

    jvm 总体梳理 1.类的加载机制 1.1什么是类的加载 1.2类的生命周期 1.3类加载器 1.4类加载机制 2.jvm内存结构 JVM内存模型 2.1jvm内存结构 2.2对象分配规则 3.GC算 ...

  10. Spring MVC——基础(简介,使用,地址映射)

    Spring MVC简介 重点Spring MVC的处理流程 Spring MVC特点 Spring MVC的使用 将相应的JAR包导入lib文件下 配置相关webxml 配置servlet-mvcx ...