写点什么

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

2021 年 3 月 07 日

性能!!让你的 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]

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

2021 年 3 月 07 日 23:411475

评论

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

工具集系列 02|还在为海报设计、LOGO 设计发愁?这些在线工具值得收藏

一尘观世界

效率工具 设计 海报 课程封面 知识付费

C语言if分支结构

C语言技术网-码农有道

C语言 C语言if分支结构

探寻融云多年领先的秘密:不断创新贴近开发者真实需求

DT极客

Linux学习-2020.05.11

Flychen

工具集系列|值得收藏的几个免费在线学习国外网站

一尘观世界

学习 工具 网站 提升

C语言常量、变量和关键字

C语言技术网-码农有道

C语言 常量 变量 关键字

“随大流”的你是不会成功的

小天同学

个人成长 思考 写作平台 感悟 坚持

JavaScript 学习笔记——数据类型

zjlulsum

Java 学习 前端 类型推断 入门

NIO 看破也说破(三)—— 不同的IO模型

小眼睛聊技术

Java 学习 深度思考 程序员 架构

对话 CTO | 喜茶也有 CTO?听陈霈霖讲讲茶饮中的技术甜度

ONES 王颖奇

研发管理 CTO 零售

当前的经济形势,如何让自己免于风险?

鼎玉谷

放假了,你还会打开钉钉么?

无箭的丘比特

高效工作 团队管理 企业文化 个人成长 技术管理

ShedLock:一个轻量级的定时任务协调组件

kk

定时任务 shedlock

Python程序性能分析和火焰图

ElvinYang

危机过后,「表格文档协同」需要具备什么能力?

Geek_Willie

前端开发 开发者工具 Excel

从技术层面理解对于区块链技术的10.24集体学习讲话

MaxHu

区块链 智能合约 以太坊 加密货币 去中心化网络

每个人都应该知道的性能参数

ElvinYang

Python网络编程socket 简易聊天窗

Flychen

C语言运算符

C语言技术网-码农有道

C语言 运算符

认识数据产品经理(二 数据产品经理的稀缺性)

马踏飞机747

大数据 互联网 数据分析 产品经理

【解析+示例】2种方法,通过SpreadJS在前端实现甘特图

Geek_Willie

前端开发 甘特图 SpreadJS 表格控件

给应届毕业生们的七点建议

Neco.W

大学生日常 工作 应届毕业

DDD 实践手册(6. Bounded Context - 限界上下文)

Joshua

企业架构 设计模式 领域驱动设计 DDD 架构模式

对话 CTO | 听快看漫画 CTO 李润超讲重塑漫画产业的技术推动力

ONES 王颖奇

研发管理 CTO 动画 文化

Using R for everything: 方差分解(Variation partition)变量筛选与显著性标注

洗衣机用户不会用洗衣机

数据分析 R

如何扩大我们的英语词汇量

七镜花园-董一凡

学习

如何高效阅读

ElvinYang

前端有未来吗?

欧雷

前端 前端开发

C语言输入和输出

C语言技术网-码农有道

C语言 输入 输出

目光聚集之处,金钱必将追随

Tom

学习 个人成长 思考 读书

接口限流算法有哪些,看完这篇又能和面试官互扯了~

不才陈某

Java 分布式 后端

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