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的监听,在日常开发的一些性能调优有比较好的一个作用,可以做一个记录。

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

往期好文推荐

相关推荐
阴阳怪气乌托邦几秒前
别再啃OA代码了!低代码"搭积木"式搞数智化,我直接少写500行
前端·低代码
__NK1 分钟前
【字节跳动高频面试题】不超过 N 的最大数拼接
面试·大厂·字节跳动·手撕
秋千码途3 分钟前
小架构step系列07:查找日志配置文件
spring boot·后端·架构
beelan4 分钟前
v-on的思考
前端
山河木马7 分钟前
前端学习C++之:.h(.hpp)与.cpp文件
前端·javascript·c++
用户9272472502197 分钟前
PHP + CSS + JS + JSON 数据采集与展示系统,支持伪静态
前端
努力只为躺平12 分钟前
一文搞懂 Promise 并发控制:批量执行 vs 最大并发数,实用场景全解析!
前端·javascript
李大玄14 分钟前
Google浏览器拓展工具 "GU"->google Utils
前端·javascript·github
爱编程的喵14 分钟前
从DOM0到事件委托:揭秘JavaScript事件机制的性能密码
前端·javascript·dom
蓝倾20 分钟前
京东批量获取商品SKU操作指南
前端·后端·api