HoRain云--React Memo
🎬 HoRain云小助手：个人主页
🔥 个人专栏: 《Linux 系列教程》《c语言教程》
⛺️生活的理想，就是为了理想的生活!
⛳️ 推荐
前些天发现了一个超棒的服务器购买网站，性价比超高，大内存超划算！忍不住分享一下给大家。点击跳转到网站。
专栏介绍
专栏名称 | 专栏介绍 |
《C语言》 | 本专栏主要撰写C干货内容和编程技巧，让大家从底层了解C，把更多的知识由抽象到简单通俗易懂。 |
《网络协议》 | 本专栏主要是注重从底层来给大家一步步剖析网络协议的奥秘，一起解密网络协议在运行中协议的基本运行机制！ |
《docker容器精解篇》 | 全面深入解析 docker 容器，从基础到进阶，涵盖原理、操作、实践案例，助您精通 docker。 |
《linux系列》 | 本专栏主要撰写Linux干货内容，从基础到进阶，知识由抽象到简单通俗易懂，帮你从新手小白到扫地僧。 |
《python 系列》 | 本专栏着重撰写Python相关的干货内容与编程技巧，助力大家从底层去认识Python，将更多复杂的知识由抽象转化为简单易懂的内容。 |
《试题库》 | 本专栏主要是发布一些考试和练习题库（涵盖软考、HCIE、HRCE、CCNA等） |
目录
⛳️ 推荐
专栏介绍
1. 基本使用
实例
2. 使用自定义比较函数
自定义比较函数的签名：
实例
3. 实际应用场景
4. 注意事项
5. 与 useMemo 和 useCallback 的区别
实例
小结
React.memo是一个高阶组件（Higher Order Component, HOC），用于优化函数组件的性能。它通过记忆组件的渲染输出，在组件的 props 没有变化时跳过重新渲染，从而提高性能。以下是React.memo的详细介绍和使用方法。
1. 基本使用
React.memo的基本使用方法是将一个函数组件作为参数传递给React.memo，并返回一个记忆化的组件。
实例
import React from 'react';
import ReactDOM from 'react-dom';
const MyComponent = React.memo((props) => {
console.log('Rendering MyComponent');
return <div>{props.text}</div>;
});
const App = () => {
const [count, setCount] = React.useState(0);
const [text, setText] = React.useState('Hello, world!');
return (
<div>
<button onClick={() => setCount(count + 1)}>Increment Count</button>
<MyComponent text={text} />
</div>
);
};
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);
在这个示例中，即使count状态发生变化，MyComponent也不会重新渲染，因为它的props没有变化。
2. 使用自定义比较函数
默认情况下，React.memo只会对比前后的props，如果没有变化则不会重新渲染。你可以通过传递一个自定义比较函数来更精确地控制重新渲染的逻辑。
自定义比较函数的签名：
function areEqual(prevProps, nextProps) { // 返回 true 表示相等，不需要重新渲染 // 返回 false 表示不相等，需要重新渲染 }实例
import React from 'react';
import ReactDOM from 'react-dom';
const MyComponent = React.memo((props) => {
console.log('Rendering MyComponent');
return <div>{props.text}</div>;
}, (prevProps, nextProps) => {
return prevProps.text === nextProps.text;
});
const App = () => {
const [count, setCount] = React.useState(0);
const [text, setText] = React.useState('Hello, world!');
return (
<div>
<button onClick={() => setCount(count + 1)}>Increment Count</button>
<MyComponent text={text} />
</div>
);
};
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);
在这个示例中，自定义比较函数检查text是否发生变化。如果text没有变化，MyComponent不会重新渲染。
3. 实际应用场景
React.memo非常适用于以下场景：
- 静态数据展示：组件接收的
props很少变化，但组件本身较为复杂，重新渲染成本高。 - 性能优化：在大列表或表格中，每个项目都是独立的组件，使用
React.memo可以避免不必要的重新渲染。 - 避免深度相等检查：自定义比较函数可以避免深度相等检查，特别是在
props包含大量数据时。
4. 注意事项
- 浅比较：默认情况下，
React.memo进行浅比较，这意味着它只会比较props的一级内容，嵌套对象需要自定义比较函数。 - 状态和上下文：
React.memo只关注props的变化，组件内部的状态和上下文的变化不会触发重新渲染。
5. 与useMemo和useCallback的区别
React.memo：用于记忆化整个组件，优化组件的渲染。useMemo：用于记忆化函数组件内部的值或计算结果。useCallback：用于记忆化函数组件内部的回调函数，避免不必要的重新创建。
实例
import React, { useState, useMemo, useCallback } from 'react';
import ReactDOM from 'react-dom';
const ChildComponent = React.memo(({ onClick, count }) => {
console.log('Rendering ChildComponent');
return <button onClick={onClick}>Count: {count}</button>;
});
const App = () => {
const [count, setCount] = useState(0);
const increment = useCallback(() => {
setCount(count + 1);
}, [count]);
const doubledCount = useMemo(() => count * 2, [count]);
return (
<div>
<p>Doubled Count: {doubledCount}</p>
<ChildComponent onClick={increment} count={count} />
</div>
);
};
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);
在这个示例中，useCallback和useMemo用于优化函数和计算结果，React.memo用于优化子组件的渲染。
小结
React.memo是一个强大的工具，可以有效地提高函数组件的性能，避免不必要的重新渲染。通过合理使用React.memo和自定义比较函数，你可以在不影响应用逻辑的情况下显著优化应用性能。
❤️❤️❤️本人水平有限，如有纰漏，欢迎各位大佬评论批评指正！😄😄😄
💘💘💘如果觉得这篇文对你有帮助的话，也请给个点赞、收藏下吧，非常感谢!👍 👍 👍
🔥🔥🔥Stay Hungry Stay Foolish 道阻且长,行则将至,让我们一起加油吧！🌙🌙🌙