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

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

写出更优雅的react组件

• 一、存在问题
• 二、解决办法
• • • 类组件的解决方法
    • • 1、 shouldComponentUpdate（React 类组件的一个生命周期）
      • 2、PureComponent + Immutable.js（进阶版）
      • • （1）为什么有了PureComponent这个方法
        • （2）PureComponent 与 Component 的区别点
        • （3）PureComponent用法
        • （4）Immutable.js
    • 函数组件的解决方法
    • • 1、：“函数版”shouldComponentUpdate/PureComponent
      • • （1）调用姿势
        • （2）举例使用过程
        • （3） 和shouldComponentUpdate 的不同点
      • 2、useMemo：更加“精细”的 memo
      • • （1） ()和 React.useMemo()的区别
        • （2）调用姿势

一、存在问题

一个父组件下面有几个子组件，更改其中一个子组件的数据，其它所有子组件都会重新渲染。
举例：比如说一个父组件（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的内容：{}</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<