文章の目录
前言
定制化开发项目开发时,定制化开发难免会遇到一些组件卡顿的情况,定制化开发那么如何能快速定位到问题组件、定制化开发了解组件性能,定制化开发并做出相应调整呢,定制化开发本篇文章将以一个小demo为例,讲述 官方推荐的工具 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;
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 子组件
import React,{memo} from 'react'const Display = (props) => { const { text } = props console.log('子组件Display渲染了--------------------------------') return <div>{text}</div>}export default memo(Display)
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
组件渲染问题
打开应用后,看到如下界面:
进行如下操作:
- 在文本框的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)
- 1
- 2
- 3
- 4
- 5
- 6
- 7
代码优化后使用工具 reload,可以看到在最后一次提交时,尽管App组件更新,但是 Display 组件 Did not render,此时便达到了优化组件渲染的目的;
参考:
写在最后
在实际的项目中,如果遇到问题组件,我们应该学会使用 Profiler 组件定位问题组件,查看组件 re-render 原因有的放矢,这样才能提高解决问题的效率;
当然React 官方也提供了 Profiler API,具体使用方法见以下链接:
🥂(❁´◡`❁)您的点赞👍➕评论📝➕收藏⭐是作者创作的最大动力🤞