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