重生之我要当前端大王–react篇 01react性能优化

重生之我要当前端大王–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试试看，本文到此结束，你的点赞是我更新的动力。