性能优化-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);
详细代码
子组件

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;

好了,以上就是优化的两种方案。
在这里插入图片描述

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
React H5的性能优化是开发过程中非常要的一部分,下面是一些常见的优化策略: 1. 使用React.memo()来优化组件渲染React.memo()可以将组件包裹起来,以减少不必要的渲染。它会对组件的 props 进行浅比较,如果 props 没有变化,则不会渲染组件。 2. 使用shouldComponentUpdate()或React.PureComponent来避免不必要的渲染:这些方法可以在组件更新之前进行比较,如果 props 或 state 没有变化,则可以阻止组件渲染。 3. 避免在render()方法中进行昂贵的计算或操作:render()方法应该只负责渲染组件,不应该包含复杂的计算逻辑或操作。 4. 使用React.lazy()和React.Suspense来实现按需加载:将大型组件拆分为多个小组件,并使用React.lazy()和React.Suspense实现按需加载,可以减少初始加载时间。 5. 使用Key属性来优化列表渲染:在使用map()方法渲染列表时,为每个元素添加唯一的key属性,这样React可以更高效地更新列表。 6. 使用shouldComponentUpdate()或React.memo()来减少组件渲染:如果组件的props没有变化,则可以通过shouldComponentUpdate()或React.memo()阻止组件渲染。 7. 使用虚拟化技术来优化大型列表的渲染:使用React-virtualized或react-window等库可以只渲染可见区域内的列表项,以提高性能。 8. 使用性能分析工具来找出性能瓶颈:使用React DevTools或Chrome DevTools等工具可以帮助你分析组件渲染性能,找出潜在的性能问题。 以上是一些常见的React H5性能优化策略,你可以根据具体情况选择合适的方法来提升应用的性能。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值