juejin小册|react|14 如何避免重复渲染？

最新推荐文章于 2024-10-03 17:40:56 发布
最新推荐文章于 2024-10-03 17:40:56 发布
阅读量57 收藏
点赞数
分类专栏： |Hadoop|R语言|操作系统| 数据库|云计算概论|计算机网络 前端八股文 文章标签： react.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43428283/article/details/135843864
版权
本文探讨React中重复渲染的问题，指出虽然React提供了一些避免重复渲染的方案，但实践中仍存在误区。文章强调了优化时机的重要性，指出只有在性能问题影响用户体验时才需要优化。内容包括优化时机分析、问题定位方法、常见问题与处理方案，如使用React.memo、PureComponent和不可变数据等。此外，还提到错误的优化实践，如在jsx中使用箭头函数导致的组件重复渲染。
摘要由CSDN通过智能技术生成

上一讲讲到，React 的性能问题通常有两类：一类是长列表，一类是重复渲染。这里再提一下长列表，它指的是你的页面渲染了很长的列表，通常有上百甚至上千行数据。长列表本身不是 React 特有的问题，无论是什么技术栈，都可能遇到。它的通用解决方案是采用虚拟滚动，业界做得比较好的解决方案有react-virtualized和react-window，已经非常成熟了。

那重复渲染的解决方案有没有这么成熟呢？不仅没有，甚至还存在一些误区。所以这一讲我们就这个主题来讲解下。

破题

在前面的生命周期与渲染流程等章节中都有提过避免重复渲染的具体方案，但为什么还是会发生重复渲染呢？因为当业务复杂度与项目规模还没有上升到引发页面性能下降时，这个问题不值得探讨，因为即使处理了也会白费功夫。这就让我想起了这句话：

过早的优化是万恶之源。
—— Donald Knuth 《计算机编程艺术》
互联网时代，是一个追求快速交付的时代。保证业务快速上线远比代码质量更为重要。只要业务能跑，性能往往是相对靠后的要求。这就需要我们明确优化时机的问题，即什么时候该做，什么时候不该做。

其次需要讨论如何排查问题页面，借助什么工具去定位？

然后就是一些常见忽略的点，即有哪些我们以为不会引发重渲染的写法，实际上会有问题？

了解本专栏 订阅专栏 解锁全文 超级会员免费看
学习记录wanxiaowan
关注
专栏目录
订阅专栏
Next.js 开发指南 实战篇 | React Notes | 侧边栏笔记列表
sybh的博客
02-18 1099
本篇我们来实现 React Notes 的左侧侧边栏部分。客户端组件下移使用 Suspense。
前端八股文（3）53-84
VAN
09-12 1552
前端八股文
React/RN组件避免重复渲染的一些技巧
Mamong's blog
03-13 1624
这里我们只讨论Component和函数组件。我们知道Component是否发生重渲染是由shouldComponentUpdate决定的，默认情况下返true。自定义的Component会根据自身state和props是否发生变化，来决定自身是否需要重新渲染，这个过程往往需要进行深度比较的。而相对应的，PureComponent会通过shadowEqual对state和props进行浅比较，来决定是否需要重新渲染。一般而言，如果state和props没有发生变化，组件本身是不需要重新渲染的。
【React篇】父组件渲染时避免重复渲染子组件的3种处理方法
AI小美好
06-21 761
React父组件渲染时避免重复渲染子组件的3种处理方法
前端面试小册，包含Vue面试题，React面试题，JS面试题，HTTP面试题，工程化面试题，CSS面试题，算法面试题，大厂面试题
08-02
1. **requestAnimationFrame**：这是一个浏览器提供的API，用于优化动画和渲染。它在浏览器下次重绘之前调用指定的函数，确保动画平滑且不会过度消耗CPU资源。 2. **数据类型和类型转换**：JavaScript有七种原始...
关于React Hooks和Immutable性能优化的实践，我写了一本掘金小册
杨兴元的博客
12-19 1121
最近，我的第一本小册《React Hooks 与 Immutable 数据流实战》在掘金成功上线。各位期待的粉丝朋友久等了，两个月之前的计划一直拖到了现在，也经常在 GitHub 的 i...
前端面试之道PDF 下载
11-26
6. **前端框架**：React、Vue、Angular等主流框架的基本概念、组件化开发、状态管理以及生命周期。 7. **前端性能优化**：页面加载速度的优化策略，如延迟加载、代码分割、压缩资源等。 8. **浏览器工作原理**：...
一文弄懂 React 生命周期
老司机的后备箱
12-24 1028
通过本篇文章的学习，相信你能够对 React 生命周期执行的流程以及各个生命周期中能做的事情有一个全面的了解了，也希望能够帮助到你在工作或项目中正确运用 React 生命周期！！整理了75个JS高频面试题，并给出了答案和解析，基本上可以保证你能应付面试官关于JS的提问。
javascript常见100问|前端基础知识|offsetHeight-scrollHeight-clientHeight-区别，HTMLCollection-NodeList-区别，vue-com
VAN
04-01 1343
适用于兄弟组件，或者“距离”较远的组件。常用 API● 绑定事件 event.on(key, fn) 或 event.once(key, fn)● 触发事件 event.emit(key, data)● 解绑事件 event.off(key, fn)Vue 版本的区别● Vue 2.x 可以使用 Vue 实例作为自定义事件● Vue 3.x 需要使用第三方的自定义事件，例如 https://www.npmjs.com/package/event-emitter。
javascript常见100问|前端基础知识|13-14-options 请求Restful-API-method前端知识体系14-总结，软技能是否看过红宝书code review CR 检查什么
VAN
04-01 1248
● GET 查询● POST 新增● PATCH 更新● DELETE 删除完善的知识范围，包含了前端工程师常用的所有知识点合理的结构化，便于理解和记忆本章讲解前端基础知识相关的面试题，包括 HTML CSS JS HTTP Ajax 等知识点。这都是技术一面时的必考知识点。不能只说不足，就截止了。一定要通过不足，来突出自己的解决方案，以及未来的预期。这样给人的印象是：正式了自己的不足 + 有学习的态度 —— 非常好！本章讲解软技能相关面试题。
javascript常见100问|前端基础知识|问ajax-fetch-axios-区别请用 XMLHttpRequestfetch 实现 ajax节流和防抖px em rem vw/箭头函数的缺点
VAN
04-01 1224
HTML CSS JS HTTP 等基础知识是前端面试的第一步，基础知识不过关将直接被拒。本章将通过多个面试题，讲解前端常考的基础知识面试题，同时复习一些重要的知识点。
前端八股文-Nodejs介绍，组成，架构和依赖，特点，运行环境安装，包和NPM,NPM包的版本管理，V8 引擎 和 libuv 库，BFF 中间层，服务端渲染，
VAN
11-05 1221
前端学习
JavaScript教程|导出导入，import*,export default,
VAN
01-07 1031
这是我们在本节和前面章节中介绍的所有 export 类型：你可以阅读并回忆它们的含义来进行自查：在声明一个 class/function/… 之前：独立的导出：重新导出：export * from “module”（不会重新导出默认的导出）。export {default [as y]} from “module”（重新导出默认的导出）。
JavaScript基础教程|使用promise进行错误处理，try-catch,rethrowing,未处理的rejection,
VAN
01-05 1006
catch 处理 promise 中的各种 error：在 reject() 调用中的，或者在处理程序中抛出的 error。如果给定 .then 的第二个参数（即 error 处理程序），那么 .then 也会以相同的方式捕获 error。我们应该将 .catch 准确地放到我们想要处理 error，并知道如何处理这些 error 的地方。处理程序应该分析 error（可以自定义 error 类来帮助分析）并再次抛出未知的 error（它们可能是编程错误）。
JavaScript教程| 私有的和受保护的属性和方法，内部接口和外部接口受保护的 “waterAmount”
VAN
01-02 991
面向对象编程最重要的原则之一 —— 将内部接口与外部接口分隔开来。在开发比 “hello world” 应用程序更复杂的东西时，这是“必须”遵守的做法。为了理解这一点，让我们脱离开发过程，把目光转向现实世界。通常，我们使用的设备都非常复杂。但是，将内部接口与外部接口分隔开来可以让我们使用它们且没有任何问题。
[前端大厂面试详解] 百度 前端一面，h5新增特性，rem,vm,vh,less.sass,css权重，js声明变量的方式，js基本数据类型，
最新发布
VAN
10-03 975
header定义文档或者文档的头部内容，导航链接，网站标识，标题搜索栏等等nav定义导航的主要链接，方便用户在同一个页面内快速跳转，可以将整个网站链接放置在na标签当中的，放到页面的顶部或者侧边栏，用于展示网页的主要导航链接section:定义文档当中的借或者区域，标题，aside蛀牙用于表示和页面主要内容简介相关的部分，aside用于表示和页面主要内容间接相关的部分，figure标签用于将图像，图标，照片等和文档正文相关的内容，图像，图标，找片等和文档正文相关的内容独立出来。
JavaScript教程|F。prototype,构造器，
VAN
12-29 962
在本章中，我们简要介绍了为通过构造函数创建的对象设置 [[Prototype]] 的方法。稍后我们将看到更多依赖于此的高级编程模式。一切都很简单，只需要记住几条重点就可以清晰地掌握了：F.prototype 属性（不要把它与 [[Prototype]] 弄混了）在 new F 被调用时为新对象的 [[Prototype]] 赋值。F.prototype 的值要么是一个对象，要么就是 null：其他值都不起作用。
JavaScript基础教程| 模块 (Module)模块级作用域import.meta,Async 适用于内联脚本,外部脚本，nomodule,构建工具
VAN
01-06 961
一个模块（module）就是一个文件。一个脚本就是一个模块。就这么简单。模块可以相互加载，并可以使用特殊的指令 export 和 import 来交换功能，从另一个模块调用一个模块的函数：export 关键字标记了可以从当前模块外部访问的变量和函数。import 关键字允许从其他模块导入功能。例如，我们有一个 sayHi.js 文件导出了一个函数：export标记了可以从当前模块外部访问的变量和函数`);……
JavaScript基础教程|Proxy 和 Reflect，私有字段， 内部插槽包装函数：“apply“，不变量，使用 “set” 捕捉器进行验证
VAN
01-07 914
Proxy 是对象的包装器，将代理上的操作转发到对象，并可以选择捕获其中一些操作。它可以包装任何类型的对象，包括类和函数。……然后，我们应该在所有地方使用 proxy 而不是 target。代理没有自己的属性或方法。如果提供了捕捉器（trap），它将捕获操作，否则会将其转发给 target 对象。我们可以捕获：读取（get），写入（set），删除（deleteProperty）属性（甚至是不存在的属性）。函数调用（apply 捕捉器）。
前端学习-函数，形参和实参，函数声明提升，sort函数，递归，浅克隆，深克隆，全局变量，遮蔽效应，设计模式，css盒子模型，BFC,css解决高度塌陷，
VAN
11-10 901
前端学习
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

学习记录wanxiaowan

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值