类组件-shouldComponentUpdate

注：变化需要在render中打印，在component中检测不到
核心代码: 子组件中用shouldComponentUpdate防止子组件重渲染

// 性能优化
shouldComponentUpdate(nextProps, nextState) {if (nextProps.num === this.props.num) return false;return true;
}

完整例子
父组件

export default class Index extends Component {state = {num1: 111,num2: 222,};render() {return (<div><button onClick={() => this.setState({ num1: this.state.num1 + 1 })}>修改num1</button><button onClick={() => this.setState({ num2: this.state.num2 + 1 })}>修改num2</button>// 子组件<Schild num={this.state.num1} /></div>);}
}

子组件

import { Component } from "react";
export default class Index extends Component {constructor(props) {super(props);}// 性能优化shouldComponentUpdate(nextProps, nextState) {if (nextProps.num === this.props.num) return false;return true;}render() {// 父组件的状态变更会触发子组件的渲染console.log("渲染子组件");return (<div><h3>s子组件</h3><div>来自父组件的num1：{this.props.num}</div></div>);}
}

函数组件-memo

可阻止子组件页面重渲染
核心代码：export default memo(Child);
详细代码
子组件

import { useEffect, memo } from "react";const Child = ({ num }) => {useEffect(() => {console.log("渲染子组件");});return (<div><h1>我是子组件</h1><div>来自父组件的参数：{num}</div></div>);
};
export default memo(Child);

父组件

import { useEffect, useState, useMemo } from "react";import Child from "./child";
const Home = () => {const [num1, setNum1] = useState(111);const [num2, setNum2] = useState(222);return (<div><h1>性能优化-usemome</h1><div>num1: {num1};num2: {num2};</div><button onClick={() => setNum1(num1 + 1)}>修改num1</button><button onClick={() => setNum2(num2 + 1)}>修改num2</button><Child num={num1} /></div>);
};
export default Home;