SCU & PureComponent

前端知识

已于 2022-12-20 18:49:41 修改

阅读量98

点赞数

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

于 2022-12-20 18:30:42 首次发布

本文链接：https://blog.csdn.net/m0_71902265/article/details/128378393

版权

react 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

本文探讨了React应用中如何控制组件的render方法调用来提高性能。通过使用shouldComponentUpdate生命周期方法或PureComponent，可以避免不必要的渲染。当props或state改变时，仅在必要时更新组件，减少diff算法的计算，从而提升应用性能。通过实例展示了在父组件状态改变时，子组件如何利用PureComponent避免无谓的渲染。

摘要由CSDN通过智能技术生成

遇到的问题：

React 在 props 或 state 发生改变时，会调用 React 的 render 方法，会创建一颗不同的树。当一个组件的 render 函数调用时，子组件会重新渲染，子组件的 render 方法也会被调用，而子组件的 state 可能并没有改变过。依次推理，所有的组件都需要重新 render，进行 diff 算法，性能必然是很低的。调用 render 应该有一个前提，就是依赖的数据(state、props)发生改变时，再调用自己的 render 方法。

如何来控制render方法是否被调用呢?

shouldComponentUpdate

这是一个生命周期函数，在 render 函数执行之前调用。在这个生命周期函数中返回 false，就不会调用 render 函数，返回 true 的时候，调用 render 函数。

shouldComponentUpdate 有两个参数 nextProps (修改之后，最新的 props 属性)、nextState (修改之后，最新的 state 属性)

  shouldComponentUpdate(prevProps, prevState) {
    return prevProps.message !== this.props.message
  }

这样就可以防止父组件调用 render 函数，子组件也跟着调用 render 函数，提高了性能。但是也会产生一个问题：如果所有的类都需要手动实现 shouldComponentUpdate ，就会增加开发量，类组件继承 PureComponent 之后，默认实现了 shouldComponentUpdate ，就不需要手动写了。

父组件：

import React from "react"
import ChildCpn from "./cpn.js"
class App extends React.Component {
  state = {
    age: 18
  }
  add = () => {
    this.setState({
      age: this.state.age + 1
    })
  }
  render() {
    return (
      <div>
        <span>显示值:{this.state.age}</span>
        <button onClick={this.add}>点击</button>
        <ChildCpn />
      </div>
    )
  }
}
export default App

子组件：

import React, { PureComponent } from "react"
class ChildCpn extends PureComponent {
    render() {
        console.log("子组件render")
        return <div>子组件</div>
    }
}
export default ChildCpn

当父组件的值发生改变之后，字组件不会再调用 render 函数了。

类组件中可以使用 PureComponent，函数组件需要高阶组件memo