React 中的 PureComponent 和 Component 对比

最新推荐文章于 2023-12-31 17:29:05 发布

诗渊

最新推荐文章于 2023-12-31 17:29:05 发布

阅读量312

点赞数

分类专栏： React 文章标签： react

本文链接：https://blog.csdn.net/u014607184/article/details/108081858

版权

本文探讨了React中PureComponent的作用，它通过浅比较优化组件渲染。对比示例显示了PureComponent如何根据props和state的变化决定是否重新渲染。同时，文章提醒在处理引用类型数据和复杂数据结构时，PureComponent可能不适用，需要适当选择或自定义shouldComponentUpdate方法。

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

PureComponent的作用：

PureComponent 其实是在内部帮我们简单实现了一下shouldComponentUpdate的功能，以便提供组件的性能；这里的简单指是：对prop和state做浅比较，若浅比较结果相同，则该组件以及其子组件不做render；否则，render。

对比示例：

// index.jsx
import React, {
    Component } from "react";
import ReactDOM from "react-dom";

import './style.css';

import  SubPage1  from "../components/SubPage1/SubPage1";
import  SubPage2  from "../components/SubPage2/SubPage2";

class PageA extends Component {
   
    constructor(props) {
   
        super();
        this.state = {
   
            outerNum: 0,
            innerNum: 0,
        }
    }
    addOuterClick = () => {
   
        console.log("===== addOuterClick =====");
        this.setState({
   
            outerNum: ++this.state.outerNum
        })
    }

    addInnerClick = () => {
   
        console.log("===== addInnerClick =====");
        this.setState