React 性能优化总结

xiaotianyi
5,343 阅读6分钟

React 性能优化总结

总结了以下几个方面在react上的性能优化

  • 常见的性能问题场景

  • 时刻注意代码的潜在性能问题

  • 注意可重构的代码，组件化

  • 了解如何使用工具定位性能问题

常见的性能问题场景

  • JavaScript 语言采用的是单线程模型，也就是说，所有任务只能在一个线程上完成，一次只能做一件事。如果页面比较复杂，添加了大量的计算，并且还添加了Canvas(Canvas 是一个非常受欢迎的表现方式，同时也是WebGL的入口。它能绘制图形，图片，展示动画，甚至是处理视频内容)的绘制，那页面加载可能会卡顿，有可能会呈现出假死状态。

    解决方案：在Worker中使用OffscreenCanvas或者将页面渲染时大量的计算放在Worker中。 首先我们先了解几个概念（以在Worker中用OffscreenCanvas为列）

    • Workers 是一个Web版的线程——它允许你在幕后运行你的代码。将你的一部分代码放到Worker中可以给你的主线程更多的空闲时间，这可以提高你的用户体验度

    • OffscreenCanvas并不依赖DOM。

      1. 一种是在 Worker 线程创建一个 OffscreenCanvas 做后台渲染，然后再把渲染好的缓冲区 Transfer 回主线程显示。
      2. 一种是主线程从当前 DOM 树中的 Canvas 元素产生一个 OffscreenCanvas，再把这个 OffscreenCanvas 发送给 Worker 线程进行渲染，渲染的结果直接 Commit 到浏览器的 Display Compositor 输出到当前窗口，相当于在 Worker 线程直接更新 Canvas 元素的内容。

    • OffscreenCanvas学习文档。
      另外web workers学习文档请去官网了解

      总结: 学习成本比较低，在耗性能的计算和渲染放在Worker中，确实能提升用户体验度

  • dom节点层次多，而且深，更改state或者更改redux,导致与该数据无相关的dom节点多次render。

  • js处理数据过于复杂。定义的状态数据层次过于深。导致对比或者遍历数据消耗性能。

时刻注意代码的潜在性能问题

  • {...this.props} 不要滥用，请只传递component需要的props，传得太多，或者层次传得太深，都会加重shouldComponentUpdate里面的数据比较负担。

  • 方法绑定的使用

    1. 方法直接绑定在dom节点中
    <div onClick={this.tap.bind(this)} />
    1. 方法绑定放在constructor中
    constructor(props) {
    super(props);
    this.tap= this.tap.bind(this);
}
    1. 箭头函数
    tap = ()=>{};
<div onClick={this.tap} />

    tap =(value)=> {};
<div onClik={()=>this.tap(value)} />

    总结：
     1.由于绑定是在render中执行，而render是会执行多次的，每次bind和箭头函数都会产生一个新的函数，因而带来了额外的开销
    2.使用构造器bind的方法，每个实例都可以有效地共享函数体，从而更加有效的使用内存。但当要绑定的函数较多时，这种方法又显得相对的枯燥和无聊。所以，在知道实例不多，函数体不大的前提下，使用箭头函数更加快捷。
    3.综合三种写法，第三种是目前最优写法

  • 数组遍历map

    map里面添加key，并且key不要使用index（可变的）,尽量使用稳定常量作为key。使用index作为key，只是会让代码不报错，其他一无是处。
每当组件的props或state改变时, React会重新创建一个virtual DOM, 与上一个作对比, 如果发现两个virtual DOM不完全相同, 则React就会做reconcile, 把有差异的地方更新到真实的DOM上。
使用常量作为key

  • 尽量少用不可控的refs、DOM操作。

  • props和state的数据尽可能简单明了，扁平化。便于数据对比，数组遍历从而减小带来的性能消耗。

  • 使用return null而不是CSS的display:none来控制节点的显示隐藏。保证同一时间页面的DOM节点尽可能的少。

注意可重构的代码，组件化

  • 组件分类
  • 可复用性
  • 足够细
  • 耦合度低

组件分类

在开发前期可以根据业务场景将组件分类

  • 展示类组件（没有任何交互，只是纯展示数据）
  • 交互类组件（页面交互操作比较频繁）
  • 数据类组件（比如dva，redux，基本在搭建框架时已模块化）
  • 高阶组件（对原有组件的保护，更利于后续的迭代开发）

可复用性

这里我们就要说一下有状态组件和无状态组件的区别了 就如上所说的展示类组件，这种我们就可以把它归类为无状态组件，举个列子

import React from 'react';

const PicModal = props => {
  const { title = '', content = '', picUrl = '', deviceName = '' } = props;
  return (
    <div>
      <span>title</span>
      <span>content</span>
      <span>deviceName</span>
      {picUrl !== '' ? <img src={picUrl}/> : null}
    </div>
  );
};

export default PicModal;

这样我们就可以自己封装一个modal组件，根据业务场景不断的迭代优化。 而上面的交互类组件大多数情况下都是有状态组件，维护自身的状态值。但是要实现可复用性，组件之间的耦合度肯定是要低的。组件自己控制自己内部的state。这样setState只用局部更新视图。减小性能消耗。
注意：千万不要在父组件定义state,传值给子组件。
1.降低组件之间的耦合度
2.便于后续的组件迭代

足够细

根据业务场景将组件拆分的足够细。

  • 可读性强
  • 维护性高
  • 便于复用

耦合度低

下面举一个移动端的列子，web端大多数都会有这种情况，点击项目id列表中projectId,projectList改变。

解决方案：组件1和组件2是通过projectId进行联动。如果我们拿到这个需求，首先组件化1和2，组件1通过点击id，在父组件中执行getProjectList方法,从而实现渲染组件2。根据组件1中id的state渲染组件1

这样父组件与子组件耦合度很低，子组件自己维护自己的状态值
兄弟组件之间互不影响，通过父组件通信

如果拆分业务组件的思路不清晰，盲目的将状态值放在父组件中，这样耦合度会大大增加，组件的复用性会大大降低。

了解如何使用工具定位性能问题

  • chrome插件 redux devtools
  • chrome插件 react devtools
avatar
文章
阅读
粉丝