React组件重新渲染监听

最近在学习react的项目中,发现了对于react组件重新渲染的一个判断技巧,所以更文做一篇记录,主要写的是类组件和函数组件在重新渲染时候的一个监听,类组件用到的是shouldComponentUpdate,函数组件用到的是告诫组件memo,在本文分别记录一下并且做出解释

ShouldComponentUpdate

shouldComponentUpdate是React一个比较重要生命周期方法,它在组件接收到新的props或state时被调用,判断是否需要重新渲染组件。默认情况下,React在props或state发生变化时,组件都需要重新渲染。但是,在某些情况下,可能希望避免不必要的重新渲染,以提高性能,所以可以利用shouldComponentUpdate来进行判断,返回false,则不用重新进行渲染。

代码如下

js 复制代码
class MyComponent extends React.Component {
  shouldComponentUpdate(nextProps, nextState) {
    if (this.props.value === nextProps.value) {
      return false;
    }
    return true;
  }
  
  render() {
    return <div>{this.props.value}</div>;
  }
}

在上面的例子中,如果组件的value属性没有发生变化,shouldComponentUpdate方法将返回false,从而避免不必要的重新渲染。如果value属性发生变化,shouldComponentUpdate方法将返回true,从而触发重新渲染。

没有shouldComponentUpdate方法,React也会默认返回true,也可以看成props或state发生变化时都需要重新渲染组件。

只有当我们在需要优化性能时,才需要实现shouldComponentUpdate方法。

shouldComponentUpdate 是类组件的生命周期函数,不适用于函数式组件。在函数式组件中,我们通常使用 React.memo 来实现。

高阶组件memo

React.memo 是一个高阶组件,他会对组件的变化进行分析,如果每次组件输入已经发生了变化,那么就会重新渲染子组件,所以在日常开发中可以用 React.memo 来有效地减少组件的不必要渲染,提高在开发中的组件性能,也可以用来监听某些传值的改变,从而触发某些事件。

下面是示例代码

js 复制代码
import React from 'react';

function MyComponent(props) {
  // ... 组件逻辑 ...

  return (
    // ... 组件 JSX ...
  );
}

export default React.memo(MyComponent);

在这个例子中,我们将 React.memo挂载到MyComponent 上,并将其返回值作为导出的默认组件。这样,每次 MyComponent 的输入变化时,React.memo 都会进行浅层比较,如果输入没有变化,就会跳过组件的重新渲染。

React.memo 是于函数 React 的高阶组件。和类组件中的 shouldComponentUpdate 方法比较相同,但是它是用于函数组件的。

当使用 React.memo 包裹函数组件时,它会通过浅层比较 props 的方式来决定是否重新渲染组件。如果 props 没有发生变化,那么就会使用之前的渲染结果,避免不必要的渲染。

使用示例:

javascript 复制代码
import React from 'react';

const MyComponent = React.memo(function MyComponent(props) {
  // 组件的渲染逻辑
  return (
    // JSX
  );
});

或者,你可以使用箭头函数的写法:

javascript 复制代码
import React from 'react';

const MyComponent = React.memo((props) => {
  // 组件的渲染逻辑
  return (
    // JSX
  );
});

总结

本文对比了react中类组件和函数组件在重新渲染监听的一个效果,可以看到都无论是shouldComponentUpdate还是memo都能在浅表层面对接入数据props的监听,在日常开发的一些性能调优有比较好的一个作用,可以做一个记录。

🙏 感谢您花时间阅读这篇文章!如果觉得有趣或有收获,请关注我的更新,给个喜欢和分享。您的支持是我写作的最大动力!

往期好文推荐

相关推荐
大猫会长6 分钟前
mac中创建 .command 文件,执行node服务
前端·chrome
旧时光_6 分钟前
Zustand 状态管理库完全指南 - 进阶篇
前端·react.js
snakeshe10108 分钟前
深入理解useState:批量更新与非函数参数支持
前端
windliang8 分钟前
Cursor 排查 eslint 问题全过程记录
前端·cursor
boleixiongdi9 分钟前
# Bsin-App Uni:面向未来的跨端开发框架深度解析
前端
G等你下课12 分钟前
AJAX请求跨域问题
前端·javascript·http
前端西瓜哥13 分钟前
pixijs 的填充渲染错误,如何处理?
前端
snakeshe101014 分钟前
6-1. 实现 useState
前端
呆呆没有脑袋16 分钟前
深入浅出 JavaScript 闭包:从核心概念到框架实践
前端
snakeshe101017 分钟前
用100行代码实现React useState钩子:多状态管理揭秘
前端