性能优化-react阻止子组件重渲染

因为父组件的状态变更会触发子组件的渲染,可以用shouldComponentUpdate或memo来阻止。下面就来介绍这两种方法。

类组件-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);

详细代码

子组件

js 复制代码
import { useEffect, memo } from "react";

const Child = ({ num }) => {
  useEffect(() => {
    console.log("渲染子组件");
  });

  return (
    <div>
      <h1>我是子组件</h1>
      <div>来自父组件的参数:{num}</div>
    </div>
  );
};
export default memo(Child);

父组件

js 复制代码
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;

好了,以上就是优化的两种方案。

相关推荐
安全系统学习2 分钟前
系统安全之大模型案例分析
前端·安全·web安全·网络安全·xss
涛哥码咖18 分钟前
chrome安装AXURE插件后无效
前端·chrome·axure
OEC小胖胖29 分钟前
告别 undefined is not a function:TypeScript 前端开发优势与实践指南
前端·javascript·typescript·web
行云&流水1 小时前
Vue3 Lifecycle Hooks
前端·javascript·vue.js
Sally璐璐1 小时前
零基础学HTML和CSS:网页设计入门
前端·css
老虎06271 小时前
JavaWeb(苍穹外卖)--学习笔记04(前端:HTML,CSS,JavaScript)
前端·javascript·css·笔记·学习·html
三水气象台1 小时前
用户中心Vue3网页开发(1.0版)
javascript·css·vue.js·typescript·前端框架·html·anti-design-vue
灿灿121381 小时前
CSS 文字浮雕效果:巧用 text-shadow 实现 3D 立体文字
前端·css
烛阴2 小时前
Babel 完全上手指南:从零开始解锁现代 JavaScript 开发的超能力!
前端·javascript
AntBlack2 小时前
拖了五个月 ,不当韭菜体验版算是正式发布了
前端·后端·python