React Profiler 性能优化工具

前端小二哥

已于 2022-12-14 15:53:11 修改

阅读量1.5k

点赞数 23

分类专栏： React性能优化文章标签： react.js 性能优化 javascript

于 2022-11-28 15:19:36 首次发布

本文链接：https://blog.csdn.net/qq_44588612/article/details/128078622

版权

React性能优化专栏收录该内容

4 篇文章 0 订阅

订阅专栏

文章の目录

前言
组件渲染问题
Profiler 查看 reRender 原因
写在最后

前言

项目开发时，难免会遇到一些组件卡顿的情况，那么如何能快速定位到问题组件、了解组件性能，并做出相应调整呢，本篇文章将以一个小demo为例，讲述 React 官方推荐的工具 Profiler;
demo示例如下代码所示：

父组件

import { useState } from 'react';
import './App.css';
import Display from './component/Display';
function App () {
  const [count, setCount] = useState(0)
  const [text, setText] = useState(0)
  const hangeChange = (e) => {
    setText(e.target.value)
  }
  console.log('父组件App渲染了--------------------------------')
  return (
    <div className="App">
      <div style={{ marginTop: 50 }}>
        <input value={text} onChange={hangeChange} />
        <br />
      </div>
      <Display text={text} />
      <div style={{ marginTop: 50 }}>
        <div style={{ marginTop: 10 }}> {count} </div>
        <button onClick={() => { setCount(count + 1) }}>+1</button>
      </div>
    </div>
  );
}

export default App;

子组件

import React,{memo} from 'react'
const Display = (props) => {
  const { text } = props
  console.log('子组件Display渲染了--------------------------------')

  return <div>{text}</div>
}
export default memo(Display)

组件渲染问题

打开应用后，看到如下界面：
在这里插入图片描述
进行如下操作：

在文本框的0后输入123
点击三次+1按钮

操作完成后，查看控制台输出：
在这里插入图片描述
由上图可以看出，在input框中输入123时，App 组件内部的状态改变，所以子组件 Display 的 porp 改变，因此父组件子组件依次渲染，然而当点击按钮+1时，子组件 Display 的状态、prop 并未改变却进行了渲染；说明此组件的问题是进行了不必要的re-render

Profiler 查看 reRender 原因

如果你安装了 React-dev-tools 在chrome 浏览器控制台可以打开profiler 工具栏，如下图所示：
在这里插入图片描述

点击reload按钮

按以下步骤操作：
在文本框的0后输入123
点击三次+1按钮
点击 stop profiling 按钮

此时我们可以看到工具记录的信息如下图所示：
在这里插入图片描述

A区记录了提交的次数
B区记录了应用内组件的状态
C区记录了每次提交的信息

我们点击按钮时，提交信息在最后三次，我们点击A区的最后一次提交，在C取查看提交信息：
在这里插入图片描述
从B区(光标放到组件上)、C区的信息能看出 Display 组件的re-render 是由于父组件的更新，此时我们可以考虑用 React.memo 包裹子 Display 组件进行优化，代码如下所示：

import React,{memo} from 'react'
const Display = (props) => {
  const { text } = props
  console.log('子组件Display渲染了--------------------------------')
  return <div>{text}</div>
}
export default memo(Display)