React组件优化：如何防止无谓渲染影响性能

文章目录

引言
问题复现
问题解决
方案1.通过shouldComponentUpdate生命周期机制来判断
方案2.采用PureComponent模式实现功能
方案2的核心原理是纯组件模式
纯组件模式下存在一些功能限制

前言

在开发过程中,我们不可避免地会遇到层级式嵌套的关系组件.当我们使用Component时,如果父组件的状态或属性发生变化,不管子组件的状态或属性是否随之变化都会导致子组件进行状态或属性更新.这种机制虽然简洁直观但往往会产生不必要的渲染操作并造成性能上的损耗.本文将为大家介绍如何有效避免这些问题.

问题重现

先来看一下这个代码案例：
这可以帮助我们更容易理解主要增加了三个核心组件。当用户点击按钮时，系统会自动更新状态信息。

    import React, { Component } from 'react'
    
    export class Root extends Component {
    state = {
        num: 0
    }
    add = () => {
        this.setState({num: this.state.num + 1})
    }
    render() {
        return (