延迟加载和记忆化| ReactJS |第 1 部分

“纵有疾风来，人生不言弃”，这句话送给正在学习文章的朋友们，也希望在阅读本文《延迟加载和记忆化| ReactJS |第 1 部分》后，能够真的帮助到大家。我也会在后续的文章中，陆续更新文章相关的技术文章，有好的建议欢迎大家在评论留言，非常感谢！

ReactJS 上下文中延迟加载和记忆化的比较，包括定义、用例和示例：

---

延迟加载

定义

React 中的延迟加载是指仅在需要时加载组件或资源的做法，而不是在初始页面加载时加载。这减少了初始加载时间并提高了性能。

要点

目标：减少初始包大小并优化性能。

使用时：对于不立即需要的组件或资产（例如，隐藏选项卡中的模态或图像）。

React 功能：使用 React.lazy 和 Suspense 实现。

示例：延迟加载组件

从 'react' 导入 React, { Suspense };

const HeavyComponent = React.lazy(() => import('./HeavyComponent'));

const App = () => {
返回（

欢迎使用我的应用程序

正在加载...}>



);
};

导出默认应用程序；

行为：HeavyComponent 仅在渲染时才会加载。

---

记忆

定义

React 中的记忆化是缓存函数或组件渲染结果的过程，以避免不必要的重新计算或重新渲染。它通过防止冗余操作来帮助提高性能。

要点

目标：避免昂贵的重新计算或重新渲染。

使用时：对于计算成本较高的函数或重复接收相同 props 的组件。

React 功能：使用 useMemo、useCallback 和 React.memo 实现。

示例：记忆组件

从 'react' 导入 React, { useMemo };

const ExpenseCalculation = ({ number }) => {
const 计算 = (num) => {
console.log('正在计算...');
返回数字*2； // 模拟昂贵的操作
};

const result = useMemo(() =>calculate(number), [number]);

返回

结果：{结果};
};

导出默认的 ExpenseCalculation;

行为：calculate仅在number属性改变时执行，避免冗余计算。

---

何时使用每个？

延迟加载：
当您的应用程序具有可以推迟到需要时使用的大型组件或资源（例如仪表板图表或包含大量图像的图库）时使用。

记忆：
当您的应用程序执行重复计算或由于道具或状态未更改而不必要地重新渲染组件时使用。

好了，本文到此结束，带大家了解了《延迟加载和记忆化| ReactJS |第 1 部分》，希望本文对你有所帮助！关注golang学习网公众号，给大家分享更多文章知识！