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 (divbutton onClick{() setCount(count 1)}Increment Count/buttonMyComponent 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 (divbutton onClick{() setCount(count 1)}Increment Count/buttonMyComponent 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 (divpDoubled Count: {doubledCount}/pChildComponent 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 道阻且长,行则将至,让我们一起加油吧