写出更优雅的react组件（避免重复渲染）

最新推荐文章于 2025-12-22 18:03:39 发布

原创

最新推荐文章于 2025-12-22 18:03:39 发布 · 1.5k 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#react #react组件 #re-render

本文探讨了React组件存在的重复渲染问题及其影响，详细介绍了如何通过shouldComponentUpdate、PureComponent、React.memo以及useMemo来优化组件，减少不必要的重渲染。包括shouldComponentUpdate的自定义逻辑、PureComponent的浅比较以及Immutable.js的深比较，还有函数组件的React.memo和useMemo的使用策略。

一、存在问题

一个父组件下面有几个子组件，更改其中一个子组件的数据，其它所有子组件都会重新渲染。
举例：比如说一个父组件（Parent.js）下面有两个子组件(ChildA.js、ChildB.js)。代码如下
（1）、ChildA.js文件：

import React from "react";
export default class ChildA extends React.Component {
   
   
  render() {
   
   
    console.log("ChildA 的render方法执行了");
    return (
      <div className="childA">
        子组件A的内容：
        {
   
   this.props.text}
      </div>
    );
  }
}

（2）、ChildB.js文件：

import React from "react";
export default class ChildB extends React.Component {
   
   
  render() {
   
   
    console.log("ChildB 的render方法执行了");
    return (
      <div className="childB">
        子组件B的内容：
        {
   
   this.props.text}
      </div>
    );
  }
}

(3)、 Parent.js文件：在共同的父组件 Parent.js 中，会将 ChildA 和 ChildB 组合起来，并分别向其中注入数据

import React from "react";
import ChildA from './ChildA'
import ChildB from './ChildB'
class Parent extends React.Component {
   
   
  state = {
   
   
    textA: '我是A的文本',
    textB: '我是B的文本'
  }

最低0.47元/天解锁文章