React@16.x(15)PureComponent 和 memo

目录

  • 1,什么是 PureComponent
  • 2,什么是 memo
  • 3,举例
    • 3.2,优化1
    • 3.1,优化2-函数位置
  • 4,注意点
    • 4.1,为了提升效率,应该尽量使用 `PureComponent`
    • 4.2,不要直接改变之前的状态,而是覆盖
    • 4.3,为什么不进行深比较?

1,什么是 PureComponent

纯组件,为了避免不必要的渲染(运行 render)来提升效率。

优化思路:如果一个组件的状态和属性都没有变化,那就不用重新渲染。

具体实现:当某个组件 extends PureComponent 时,则该组件的 shouldComponentUpdate 中会对新旧属性和状态进行浅比较,如果都相等则不会重新渲染(return false)。

// 原理大致如下:
import React, { Component } from "react";export default class Task extends Component {shouldComponentUpdate(nextProps, nextState) {if (isEqual(this.props, nextProps) && isEqual(this.state, nextState)) {return false;}return true;}render() {}
}const isEqual = (obj1, obj2) => {for (const key in obj1) {if (obj1[key] !== obj2[key]) {return false}}return true
}

效果等于:

import React, { PureComponent } from "react";export default class Task extends PureComponent {render() {}
}

2,什么是 memo

React.memo 是一个HOC,相当于给函数组件套了一个 PureComponent,让函数组件也能进行优化。

// 大致原理:
import React, { PureComponent } from "react";function memo(funcComp) {return class Memo extends PureComponent {render() {return <>{funcComp(this.props)}</>}};
}

3,举例

一个展示列表的组件,逻辑很简单,结构如下:

-- TaskContainer-- TaskList-- Task-- TaskAdd(一个输入框,可以新增列表项)	

TaskContainer(console.log("container render");

import React, { Component } from "react";
import TaskAdd from "./TaskAdd";
import TaskList from "./TaskList";export default class TaskContainer extends Component {state = {list: Array.from(new Array(10)).map((item, index) => `任务${index}`),};render() {console.log("container render");return (<div><TaskAddchangeList={(newTask) => {this.setState({list: [...this.state.list, newTask],});}}></TaskAdd><TaskList list={this.state.list}></TaskList></div>);}
}

TaskList(console.log("list render");

import React, { Component } from "react";
import Task from "./Task";export default class TaskList extends Component {render() {console.log("list render");return (<div>{(this.props.list || []).map((m) => (<Task name={m} key={m}></Task>))}</div>);}
}

TaskAdd(console.log("add render");

import React, { Component } from "react";export default class TaskAdd extends Component {state = {taskName: "",};render() {console.log("add render");return (<div><inputvalue={this.state.taskName}onChange={(e) => {this.setState({ taskName: e.target.value });}}></input><button onClick={() => this.props.changeList(this.state.taskName)}>添加任务</button></div>);}
}

Task(console.log("task render");

import React, { Component } from "react";export default class Task extends Component {render() {console.log("task render");return <div>{this.props.name}</div>;}
}

使用:

import React, { Component, Component } from "react";
import TaskContainer from "./components/Pure/TaskContainer";export default class App extends Component {render() {return <TaskContainer></TaskContainer>;}
}

初次渲染时,打印结果:

container render
add render
list render
10次 task render

添加一个列表项时,打印结果:

container render
add render
list render
11次 task render

3.2,优化1

当添加一个列表项时,已经被渲染的10个 task 不应该再次渲染,因为它们自身没有发生任何变化。只应该渲染新增的那一个即可。

此时就可以用到 PureComponent

export default class Task extends Component {}
// 替换为
export default class Task extends PureComponent {}

这时再添加一个列表项时,在打印结果可以看到 Task 只渲染了一次(新增的)。

container render
add render
list render
task render

3.1,优化2-函数位置

注意到新增列表时,TaskAdd 组件在点击按钮后,不应该再次渲染(不应该打印 add render),因为它的状态和属性也没有发生变化。

也做下替换:

export default class TaskAdd extends Component {}
// 替换为
export default class TaskAdd extends PureComponent {}

发现结果并没有发生变化,add render 依旧会打印。

这时因为在 TaskContainer 中,给组件 TaskAdd 传递的属性 changeList 是直接写在组件上的。这样每次执行 TaskContainer.render() 时,都算作一个新的属性,所以 TaskAdd extends PureComponent 没有生效。

做以下替换即可:

export default class TaskContainer extends Component {render() {return (<div><TaskAddchangeList={(newTask) => {this.setState({list: [...this.state.list, newTask],});}}></TaskAdd></div>);}
}// 替换为
export default class TaskContainer extends Component {changeList = (newTask) => {this.setState({list: [...this.state.list, newTask],});};render() {return (<div><TaskAdd changeList={this.changeList}></TaskAdd></div>);}
}

4,注意点

4.1,为了提升效率,应该尽量使用 PureComponent

4.2,不要直接改变之前的状态,而是覆盖

旧的状态应该是不可变的(immutable),只能通过创建新状态来覆盖之前的状态。

举例,当使用 PureComponent 时,下面的代码不会更新数据。因为进行的是浅比较,此时数组地址相同。

this.state.task.push(xxx)
this.setState({task: this.state.task
})

换成下面的方式就可以了:产生了新数组。

this.setState({task: [...this.state.task, xxx]
})
// 或
this.setState({task: this.state.task.concat(xxx)
})

如果是对象的话:产生了新对象。

this.setState({obj: {...this.state.obj,b: xxx}
})
// 或
this.setState({obj: Object.assign({}, this.state.obj, {b: xxx})
})

4.3,为什么不进行深比较?

因为本来就是为了提升效率,减少 render 执行次数。深比较会比较费时,得不偿失。


以上。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/20670.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

vs2019 无法打开QT的UI文件

/* * --------------------------- Microsoft Visual StudioQt5.15.2\5.15.2\msvc2019_64 --------------------------- D:\QT_Project_vs\QtWidgetsApplication1\QtWidgetsApplication1\QtWidgetsApplication1.ui 无法打开文件。 --------------------------- 确定 -------…

解析Java中1000个常用类:Override类,你学会了吗?

在 Java 编程中,继承和多态是两个重要的概念。为了确保我们正确地覆盖父类的方法,Java 提供了 @Override 注解。虽然 @Override 看起来很简单,但在实际开发中,它能为我们提供很多便利并避免一些常见的错误。本文将详细介绍 @Override 注解的用途、用法及其在实际开发中的重…

基于LQR控制算法的电磁减振控制系统simulink建模与仿真

目录 1.课题概述 2.系统仿真结果 3.核心程序与模型 4.系统原理简介 5.完整工程文件 1.课题概述 基于LQR控制算法的电磁减振控制系统simulink建模与仿真。仿真输出控制器的收敛曲线。 2.系统仿真结果 3.核心程序与模型 版本&#xff1a;MATLAB2022a 08_029m 4.系统原理…

PySide6 GUI 学习笔记——常用类及控件使用方法(常用类坐标点QPoint)

控件是PySide设计好的能承载用户输入、输出的小窗体&#xff0c;将多个控件有机整合&#xff0c;能形成用户所需要的界面。而每一个控件&#xff0c;都有属于自己的属性、方法、信号、槽函数和事件&#xff08;event&#xff09;&#xff0c;且控件与控件之间又有继承关系。 G…

系统架构设计师【第5章】: 软件工程基础知识 (核心总结)

文章目录 5.1 软件工程5.1.1 软件工程定义5.1.2 软件过程模型5.1.3 敏捷模型5.1.4 统一过程模型&#xff08;RUP&#xff09;5.1.5 软件能力成熟度模型 5.2 需求工程5.2.1 需求获取5.2.2 需求变更5.2.3 需求追踪 5.3 系统分析与设计5.3.1 结构化方法5.3.2 面向对象…

Qt6 mathgl数学函数绘图

1. 程序环境 Qt6.5.1, mingw11.2mathgl 8.0.1: https://sourceforge.net/projects/mathgl/,推荐下载mathgl-8.0.LGPL-mingw.win64.7z,Windows环境尝试自己编译mathgl会缺失一些库,补充完整也可以自己编译,路径"D:\mathgl-8.0.LGPL-mingw.win64\bin"添加至系统环境…

复试不考机试,初试300分以上,上岸稳了?东北林业大学计算机考研考情分析!

东北林业大学&#xff08;Northeast Forestry University&#xff09;&#xff0c;简称东北林大&#xff08;NEFU&#xff09;&#xff0c;位于黑龙江省哈尔滨市&#xff0c;是一所以林科为优势、林业工程为特色的中华人民共和国教育部直属高校&#xff0c;由教育部、国家林业局…

Java多线程--volatile关键字

并发编程的三大特性 可见性有序性原子性 可见性 为什么会有可见性问题&#xff1f; 多核CPU 为了提升CPU效率&#xff0c;设计了L1&#xff0c;L2&#xff0c;L3三级缓存&#xff0c;如图。 如果俩个核几乎同时操作同一块内存&#xff0c;cpu1修改完&#xff0c;当下是对c…

Spring Cloud 应用框架

Spring Cloud 是基于 Spring Boot 的一套工具集&#xff0c;用于构建分布式系统中的常见模式。它提供了服务发现、配置管理、智能路由、服务熔断、负载均衡、全链路追踪等一系列功能&#xff0c;帮助开发者快速构建和部署分布式微服务架构。本文将详细介绍 Spring Cloud 的核心…

APISIX的安装与测试(springboot服务测试)

安装&#xff1a; 1.1安装依赖&#xff1a; curl https://raw.githubusercontent.com/apache/apisix/master/utils/install-dependencies.sh -sL | bash -1.2 安装 OpenResty yum-config-manager --add-repo https://openresty.org/package/centos/openresty.reposudo yum i…

英语翻译程序,可以对用户自己建立的词汇表进行增删查改

⑴ 自行建立一个包含若干英文单词的词汇表文件&#xff0c;系统初始化时导入内存&#xff0c;用于进行句子翻译。 ⑵ 用户可以输入单词或者句子&#xff0c;在屏幕上显示对应翻译结果。 ⑶ 用户可对词汇表进行添加和删除&#xff0c;并能将更新的词汇表存储到文件中。 #defi…

Adobe Acrobat DC无法卸载

控制版面、电脑管家等均无法卸载&#xff0c;使用自身的remove也不能卸载 解决方法&#xff1a;删除Adobe Acrobat DC的注册表 1、首先打开注册列表&#xff1a; 2、根据圈出来的信息&#xff0c;找到以下路径&#xff1a; 计算机\HKEY_LOCAL_MACHINE\SOFTWARE\Classes\Inst…

反序输出c++

题目描述 输入n个数,要求程序按输入时的逆序把这n个数打印出来&#xff0c;已知整数不超过100个。也就是说&#xff0c;按输入相反顺序打印这n个数。 输入 输入一行共有n个数&#xff0c;每个数之间用空格隔开。 输出 如题要求&#xff1a;一行&#xff0c;共有n个数&…

现如今AI大环境究竟怎样?

遇到难题不要怕&#xff01;厚德提问大佬答&#xff01; 厚德提问大佬答10 你是否对AI绘画感兴趣却无从下手&#xff1f;是否有很多疑问却苦于没有大佬解答带你飞&#xff1f;从此刻开始这些问题都将迎刃而解&#xff01;你感兴趣的话题&#xff0c;厚德云替你问&#xff0c;你…

车载电子电器架构 —— 智能座舱技术范围(万字长文精讲)

车载电子电器架构 —— 智能座舱技术范围 我是穿拖鞋的汉子,魔都中坚持长期主义的汽车电子工程师。 老规矩,分享一段喜欢的文字,避免自己成为高知识低文化的工程师: 屏蔽力是信息过载时代一个人的特殊竞争力,任何消耗你的人和事,多看一眼都是你的不对。非必要不费力证明…

远程连接服务器

远程连接只需要配置好地址、网关、安装openssl-devel与开启sshd服务即可远程连接。&#xff08;前提是配置策略允许的。防火墙默认开启&#xff09; libXdmcp-devellibXinerama-devellibXft-devellibXtst-devellibXrender-devellibXrandr-devellibXi-devel 这些文件在终端运行…

vs code 搭建 vue 开发环境

1. vs code 环境准备好 2. 安装vue环境&#xff1a; nodejs&#xff1a;官网下载安装后 输入 node -v 验证是否安装成功 vue-cli &#xff1a; 输入 npm install -g vue/cli 安装后&#xff0c;vue --versoin 验证 3. 创建项目并启动&#xff1a; 进入目标文件夹&#xf…

MySQL性能分析工具——EXPLAIN

性能分析工具——EXPLAIN 1、概述 定位了查询慢的SQL之后&#xff0c;我们就可以使用EXPLAIN或DESCRIBE工具做针对性的分析查询语句 。 DESCRIBE语句的使用方法与EXPLAIN语句是一样的&#xff0c;并且分析结果也是一样的。 MySQL中有专门负责优化SELECT语句的优化器模块&…

2023职称继续教育--“十四五”大数据产业发展规划

单选题&#xff08;共7题&#xff0c;每题5分&#xff09; 1、截至2021年4月&#xff0c;我国已经有&#xff08;&#xff09;个省级和地市级数据开放平台。 B、174 2、在“十四五”规划中&#xff0c;“大数据”出现过&#xff08;&#xff09;次。 C、43 3、我国已建设&…

如何成功完成一个Java项目答辩

目录 如何成功完成一个Java项目答辩一、准备阶段二、答辩阶段三、答辩后阶段 案例&#xff1a;在线图书管理系统项目背景需求分析系统架构设计核心功能展示关键代码展示测试结果遇到的问题及解决方案总结与未来展望 如何成功完成一个Java项目答辩 在编写这篇博客时&#xff0c…