React中shouldComponentUpdate的使用

最新推荐文章于 2025-05-13 14:45:49 发布

小周同学:

最新推荐文章于 2025-05-13 14:45:49 发布

阅读量1.5k

点赞数

CC 4.0 BY-SA版权

分类专栏： react 文章标签： react.js

本文链接：https://blog.csdn.net/weixin_58495461/article/details/120182802

react 专栏收录该内容

19 篇文章

订阅专栏

本文探讨了React组件生命周期中的shouldComponentUpdate方法，如何通过纯组件(PureComponent)和function组件的React.memo实现组件更新优化，避免不必要的渲染。通过浅比较props和state，控制组件更新策略。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

shouldComponentUpdate：而生命周期中有一个叫做shouldComponentUpdate的，从名字就可以看出来：组件是否应该更新，如果我们返回false的话，那么react是不会去进行diff流程，也不会去对比props，更不会去更新用户界面上的组件了。

我们平时可以通过继承PurComponent组件来达到一个简单的优化效果，继承了PurComponent之后会对props进行一层浅比较，在props没有改变的情况下不会去重新走diff更新流程。
而我们在使用function组件的时候也可以通过React.memo达到相同的效果。

//otherContent.js
export default class OtherContent extends PureComponent {
  render() {
    console.log("otherContent render")
    return (
      <>
        <div>other content</div>
      </>
    )
  }
}

1.在App.js中引入需要展示的组件

在这里插入图片描述
2.在子组件中定义方法，触发diff算法

import { Component } from 'react'

export default class ContextContent extends Component {
  constructor(...args) {
    super(...args)
    this.state = {
      num: 0
    }
  }
  fn() {
    this.setState({
      num: 1
    })
  }
  shouldComponentUpdate(nextProps, nextState) {
  //nextProps:表示下一个props
  //nextState:表示下一个state的值
    if (nextState.num !== this.state.num) {
      return true
    }
    return false
  }


  render() {

    console.log("Context render")

    return (
      <div>
        {this.state.num}
        <button onClick={this.fn.bind(this)}>点击</button>
      </div>)


  }
}