React 性能反模式：5个致使应用速度变慢的错误！

Source: Dev.to

你的 React 应用运行缓慢，却找不到原因？

你可能认为自己已经遵循了最佳实践，但一些常见的开发模式实际上在暗中降低了应用的性能。

在本文中，我们将揭示 5 种潜伏的反模式，它们悄悄拖慢了 React 应用的速度，并展示如何修复它们，以获得更快、更流畅的用户体验。

1. Context 导致大量重新渲染

问题

在单个 context 中放入所有内容。

解决方案

按关注点拆分多个 context。

---

2. 在 Props 中内联创建对象/数组

问题

将内联对象/数组作为 props 传递给组件。

第一个解决方案

在组件外部定义常量。

第二个解决方案

对动态值使用 useMemo。

---

3. 在巨大的列表中一次性渲染所有内容

问题

一次性显示完整列表。

解决方案

使用 React Window 或 React Virtualized 对列表进行虚拟化。

---

4. 未对昂贵的计算进行记忆化

问题

在渲染期间进行计算。

解决方案

将计算包装在 useMemo 中。

---

5. JSX 中的匿名函数

问题

每次渲染时都会创建新函数。

解决方案

使用事件委托或通过 useCallback 对回调进行记忆化。