重生之我要当前端大王–react篇 01react性能优化
第二篇章 前端篇–react start!
前言
阅读本章,了解使用react组件化性能优化的三种方法
一、性能优化一之组件生命周期shouldComponentUpdate
shouldComponentUpdate 是 React 组件生命周期中的一个方法,它用于控制组件是否应该更新。当组件的 props 或 state 发生变化时,React 默认会重新渲染组件。但在某些情况下,你可能希望避免不必要的渲染,以提高应用的性能。
先了解一下这个生命周期,该组件在render函数调用前执行,接收俩个参数,第一个参数是新的props值,第二个值是新的state值,
该函数返回true,组件调用render函数重新渲染,返回false,不进行重新渲染
shouldComponentUpdate(newProps,newState){
console.log(newProps ,newState) return true//渲染
}
//可以对获取参数进行比较,控制要不要进行渲染
import React, { Component, PureComponent } from 'react'
export class ScuClass extends Component {
constructor(props){
super(props)
}
render() {
console.log('ScuClass')//每次渲染调用
return (
<>
<h3>{this.props.message}</h3>//渲染父组件传递的message
</>
)
}
shouldComponentUpdate(newProps,newState){
if(newProps.message!==this.props.message){//如果props.message改变了再调用render渲染,否则不渲染
return true//渲染
}
return false//不渲染
}
}
二、性能优化二之PureComponent
在 PureComponent 中,React 会在调用 render 方法之前,自动对组件的 props 和 state 进行浅比较。如果检测到 props 或 state 有变化,React 将重新渲染组件;如果没有变化,则不会重新渲染。
//父组件
import React, { Component, PureComponent } from 'react'
import { ScuClass } from './components/ScuClass';
import { ScuFun } from './components/ScuFun';
export class Scu extends PureComponent {//继承PureComponent
constructor(){
super()
this.state={
message:'xxm',
count:0
}
}
changeMessage(){
this.setState({
message:"react"
})
}
changeCount(){
this.setState({
count:this.state.count+1
})
}
render() {
console.log('scuRedner')
return (
<>
<ScuClass message={this.state.message}></ScuClass>
<button onClick={()=>{this.changeMessage()}}>change</button>
<hr />
<ScuFun count={this.state.count}></ScuFun>
<button onClick={()=>{this.changeCount()}}>change</button>
</>
)
}
}
//子组件
import React, { Component, PureComponent } from 'react'
export class ScuClass extends PureComponent {//继承PureComponent
constructor(props){
super(props)
}
render() {
console.log('ScuClass')
return (
<>
<h3>{this.props.message}</h3>
</>
)
}
}
三.性能优化之函数组件 memo
以上俩种方法是针对类组件进行性能优化,在函数组件中我们可以使用高阶函数memo进行性能优化,这与 PureComponent 的行为类似,但适用于函数组件。
import React, { memo } from 'react'
export const ScuFun= memo(//使用memo包裹函数组件,返回一个新组件
function ScuFun(props) {
console.log('ScuFun')
return (
<>
<h3>{props.count}</h3>
</>
)
}
)
总结
以上就是今天要讲的内容,简单演示如何对react组件进行性能优化,快打开你的vscode试试看,本文到此结束,你的点赞是我更新的动力。