9月7日-8日,相约 2023 腾讯全球数字生态大会!聚焦产业未来发展新趋势! 了解详情
写点什么

性能!!让你的 React 组件跑得再快一点

  • 2021-03-07
  • 本文字数:3597 字

    阅读完需:约 12 分钟

性能!!让你的 React 组件跑得再快一点

性能和渲染(Render)正相关


React 基于虚拟 DOM 和高效 Diff 算法的完美配合,实现了对 DOM 最小粒度的更新。大多数情况下,React 对 DOM 的渲染效率足以我们的业务日常。但在个别复杂业务场景下,性能问题依然会困扰我们。此时需要采取一些措施来提升运行性能,其很重要的一个方向,就是避免不必要的渲染(Render)


渲染(Render)时影响性能的点


React 处理 render 的基本思维模式是每次一有变动就会去重新渲染整个应用。在 Virtual DOM 没有出现之前,最简单的方法就是直接调用 innerHTML。Virtual DOM 厉害的地方并不是说它比直接操作 DOM 快,而是说不管数据怎么变,都会尽量以最小的代价去更新 DOM。React 将 render 函数返回的虚拟 DOM 树与老的进行比较,从而确定 DOM 要不要更新、怎么更新。当 DOM 树很大时,遍历两棵树进行各种比对还是相当耗性能的,特别是在顶层 setState 一个微小的修改,默认会去遍历整棵树。尽管 React 使用高度优化的 Diff 算法 ,但是这个过程仍然会损耗性能。


渲染(Render)何时会被触发

○ 组件挂载


React 组件构建并将 DOM 元素插入页面的过程称为挂载。当组件首次渲染的时候会调用 render,这个过程不可避免。


○ setState() 方法被调用


setState 是 React 中最常用的命令,通常情况下,执行 setState 会触发 render。但是这里有个点值得关注,执行 setState 的时候一定会重新渲染吗?答案是不一定。当 setState 传入 null 的时候,并不会触发 render ,可以运行下面的 Demo 来佐证:


class App extends React.Component {  state = {    a: 1  };
render() { console.log("render"); return ( <React.Fragement> <p>{this.state.a}</p> <button onClick={() => { this.setState({ a: 1 }); // 这里并没有改变 a 的值 }} > Click me </button> <button onClick={() => this.setState(null)}>setState null</button> <Child /> </React.Fragement> ); }}
复制代码


○ 父组件重新渲染


只要父组件重新渲染了,即使传入子组件的 props 未发生变化,那么子组件也会重新渲染,进而触发 render



我们对上面的 demo 进行稍微的修改,可以看出当点击按钮的时候,Child 组件的 props 并没有发生变化,但是也触发了 render 方法:


const Child = () => {  console.log("child render");  return<div>child</div>;};
class App extends React.Component { state = { a: 1 };
render() { console.log("render"); return ( <React.Fragement> <p>{this.state.a}</p> <button onClick={() => { this.setState({ a: 1 }); }} > Click me </button> <button onClick={() => this.setState(null)}>setState null</button> <Child /> </React.Fragement> ); }}
复制代码


优化 Render 我们能做什么?


上文描述的 React 组件渲染机制其实是一种较好的做法,很好地避免了在每一次状态更新之后,需要去手动执行重新渲染的相关操作。鱼和熊掌不可兼得,带来方便的同时也会存在一些问题,当子组件过多或者组件的层级嵌套过深时,因为反反复复重新渲染状态没有改变的组件,可能会增加渲染时间又会影响用户体验,此时就需要对 React 的 render 进行优化。


上面说了不必要的 render 会带来性能问题,因此我们的主要优化思路就是减少不必要的 render。


○ shouldComponentUpdate 和 PureComponent


在 React 类组件中,可以利用 shouldComponentUpdate 或者 PureComponent 来减少因父组件更新而触发子组件的 render,从而达到目的。shouldComponentUpdate 来决定是否组件是否重新渲染,如果不希望组件重新渲染,返回 false 即可。


在 React 中 PureComponet 的源码为

if (this._compositeType === CompositeTypes.PureClass) {  shouldUpdate = !shallowEqual(prevProps, nextProps) || ! shallowEqual(inst.state, nextState);}
复制代码


看函数名就能够理解,PureComponet 通过对 props 和 state 的浅比较结果来实现 shouldComponentUpdate,当对象包含复杂的数据结构时,可能就不灵了,对象深层的数据已改变却没有触发 render。


看到这里,顺便看一下 shallowEqual 是如何实现的。


const hasOwnProperty = Object.prototype.hasOwnProperty;
/** * is 方法来判断两个值是否是相等的值,为何这么写可以移步 MDN 的文档 * https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/is */function is(x: mixed, y: mixed): boolean { if (x === y) { return x !== 0 || y !== 0 || 1 / x === 1 / y; } else { return x !== x && y !== y; }}
function shallowEqual(objA: mixed, objB: mixed): boolean { // 首先对基本类型进行比较 if (is(objA, objB)) { returntrue; }
if (typeof objA !== 'object' || objA === null || typeof objB !== 'object' || objB === null) { returnfalse; }
const keysA = Object.keys(objA); const keysB = Object.keys(objB);
// 长度不相等直接返回false if (keysA.length !== keysB.length) { returnfalse; }
// key相等的情况下,再去循环比较 for (let i = 0; i < keysA.length; i++) { if ( !hasOwnProperty.call(objB, keysA[i]) || !is(objA[keysA[i]], objB[keysA[i]]) ) { returnfalse; } }
returntrue;}
复制代码


○ 利用高阶组件


在函数组件中,并没有 shouldComponentUpdate 这个生命周期,可以利用高阶组件,封装一个类似 PureComponet 的功能


const shouldComponentUpdate = arePropsEqual =>BaseComponent => {  class ShouldComponentUpdate extends React.Component {    shouldComponentUpdate(nextProps) {      return arePropsEqual(this.props, nextProps)    }
render() { return<BaseComponent {...this.props} /> } }
ShouldComponentUpdate.displayName = `Pure(${BaseComponent.displayName})`; return ShouldComponentUpdate;}
const Pure = BaseComponent => { const hoc = shouldComponentUpdate( (props, nextProps) => !shallowEqual(props, nextProps) )
return hoc(BaseComponent);}
复制代码


使用 Pure 高阶组件的时候,只需要对我们的子组件进行装饰即可。


import React from'react';
const Child = (props) =><div>{props.name}</div>;
exportdefault Pure(Child);
复制代码


○ 使用 React.memo


React.memo 是 React 16.6 新的一个 API,用来缓存组件的渲染,避免不必要的更新,其实也是一个高阶组件,与 PureComponent 十分类似,但不同的是, React.memo 只能用于函数组件 。


基本用法

import { memo } from'react';
function Button(props) { // Component code}
exportdefault memo(Button);
复制代码


高级用法

默认情况下其只会对 props 做浅层对比,遇到层级比较深的复杂对象时,表示力不从心了。对于特定的业务场景,可能需要类似 shouldComponentUpdate 这样的 API,这时通过 memo 的第二个参数来实现:


function arePropsEqual(prevProps, nextProps) {  // your code  return prevProps === nextProps;}
exportdefault memo(Button, arePropsEqual);
复制代码


注意:与 shouldComponentUpdate 不同的是,arePropsEqual 返回 true 时,不会触发 render,如果返回 false,则会。而 shouldComponentUpdate 刚好与其相反。


○ 合理拆分组件


微服务的核心思想是:以更轻、更小的粒度来纵向拆分应用,各个小应用能够独立选择技术、发展、部署。我们在开发组件的过程中也能用到类似的思想。试想当一个整个页面只有一个组件时,无论哪处改动都会触发整个页面的重新渲染。在对组件进行拆分之后,render 的粒度更加精细,性能也能得到一定的提升。


总结


本文主要介绍了如何减少不必要的 render 来提升 React 的性能。在实际开发过程中,前端性能问题可能并不常见,随着业务的复杂度增加,遇到性能问题的概率也会随之增加。


  • 减少 render 的次数 类组件可以使用 shouldComponentUpdate 或 PureComponent,函数组件可以利用高级组件的特性或者 React.memo

  • 对组件进行合理的拆分


在摸索这些解决方案的同时,我们能够学习到诸多经典的编程思想,从而更加合理的运用框架、技术解决业务问题。



头图:Unsplash

作者:天泽

原文:https://mp.weixin.qq.com/s/SGibfsr3YeO7ehrp4IGhZw

原文:性能!!让你的 React 组件跑得再快一点

来源:政采云前端团队 - 微信公众号 [ID:Zoo-Team]

转载:著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

活动推荐:

2023年9月3-5日,「QCon全球软件开发大会·北京站」 将在北京•富力万丽酒店举办。此次大会以「启航·AIGC软件工程变革」为主题,策划了大前端融合提效、大模型应用落地、面向 AI 的存储、AIGC 浪潮下的研发效能提升、LLMOps、异构算力、微服务架构治理、业务安全技术、构建未来软件的编程语言、FinOps 等近30个精彩专题。咨询购票可联系票务经理 18514549229(微信同手机号)。

2021-03-07 23:413509

评论

发布
暂无评论
发现更多内容

跨越速运运单分析系统入选2022中国数据智能最佳实践案例

StarRocks

数据分析 物流

自学数据分析——重新认识数据分析

搞大屏的小北

数据分析 数据分析可视化

web前端培训班怎么学习?

小谷哥

融云 x OHLA:「社交+游戏」双轮驱动,逐鹿中东陌生人社交

融云 RongCloud

社交 融云

自学web前端开发能找到好工作吗?

小谷哥

MySQL 慢查询日志分析(Filebeat+Elasticsearch+DataEase)

搞大屏的小北

MySQL慢查询 MySQL日志分析 MySQL日志可视化

中美顶级AI首次对话 送给人类的忠告引发关注

硬科技星球

美团餐饮SaaS基于StarRocks构建商家数据中台的探索

StarRocks

数据分析 零售

选择大数据培训学习技术之前有哪些准备

小谷哥

实践GoF的23种设计模式:命令模式

华为云开发者联盟

Go 开发 华为云 12 月 PK 榜

【年度评选】让我们为即将过去的 2022 划上圆满的句号

InfoQ写作社区官方

热门活动

自学数据分析——数据分析方法和模型

搞大屏的小北

数据分析方法 自学数据分析

论文复现丨基于ModelArts实现Text2SQL

华为云开发者联盟

人工智能 华为云 12 月 PK 榜

端到端流程打通企业经脉

元年技术洞察

数字化转型 流程 趋势研究 PaaS平台 方舟平台

InfoQ 写作社区 2022 年度优质企业号评选正式开启!

InfoQ写作社区官方

热门活动

YonBuilder开发之后端函数

YonBuilder低代码开发平台

后端 数据 开发 扩展 软件研发

华为应用市场公布2022年度榜单 原子化服务、车载应用首次上榜

最新动态

大数据培训机构怎么选择

小谷哥

隐私集合求交(PSI)协议研究综述

京东科技开发者

安全 密码学 安全多方计算 隐私集合求交 不经意传输

国内外开源数据可视化工具对比:DataEase 与 MetaBase 对比

搞大屏的小北

DataEase Metabase 开源数据可视化

火山引擎工具技术分享:用AI完成数据挖掘,零门槛完成SQL撰写

字节跳动数据平台

大数据 BI BI 分析工具 12 月 PK 榜

分布式系统关键路径延迟分析实践

百度Geek说

12 月 PK 榜 延时分析 关键路径 大型分布式系统延时优化

破解加密的LastPass数据库

神锁离线版

数据安全 密码 密码管理器 Lastpass 密码安全

AI技术实践 | 人脸核身在未成年人保护领域的实践应用

牵着蜗牛去散步

人工智能 腾讯云 腾讯 人脸识别 未成年保护

java培训学习后找不到工作的原因有哪些

小谷哥

海量请求下的接口并发解决方案

Java全栈架构师

Java 数据库 面试 后端 架构师

技术分享| anyRTC复盘一起看球场景

anyRTC开发者

CDN RTC 实时音视频 直播连麦 AI降噪

MySQL进阶:Innodb的RR到底有没有解决幻读?

程序员小毕

MySQL 数据库 程序员 后端 java面试

玩转OpenHarmony智能家居:如何实现树莓派“碰一碰”设备控制

OpenHarmony开发者

OpenHarmony

重磅 | 九科信息受邀参加2022中国互联网大会“数字政府论坛”

九科Ninetech

线上GC故障:CMSGC太频繁,你知道这是什么鬼?

Java永远的神

程序员 性能优化 JVM java面试 GC

  • 扫码添加小助手
    领取最新资料包
性能!!让你的 React 组件跑得再快一点_语言 & 开发_政采云前端团队_InfoQ精选文章