增强你的React应用：利用成熟的技术释放最佳性能

**您好，开发人员** 👋，在快速发展的 Web 开发领域，React 已成为构建动态和交互式用户界面的强大工具。凭借其基于组件的架构和虚拟 DOM，React 使开发人员能够创建可扩展且高效的强大应用程序。但作为开发人员，我们经常会忽略对应用程序的优化 🥲。

优化应用程序与构建应用程序同样重要。在本文中，我们将讨论优化 React 应用程序的一些最佳实践以及如何在自己的项目中实现它们。

优化技术

优化 React.js 应用程序以实现低延迟需要结合改进感知和实际的加载和交互时间。以下是帮助您优化 React 应用程序的综合指南：

1. 代码分割和延迟加载

通过拆分代码，您可以在需要时仅加载应用程序的必要部分，这可以显著减少初始加载时间并提高应用程序的整体性能。使用 `Suspense` 进行补充，可以在组件加载时向最终用户实现加载状态，从而提高整体性能和体验。

代码分割：使用动态 import() 将代码分割成更小的块，从而允许应用程序仅加载必要的部分。

const OtherComponent = React.lazy(() => import("./OtherComponent"));

React.lazy 和 Suspense：利用 React 的 Suspense 来实现延迟加载的组件。

Loading...

2. 优化状态管理

明智地使用 Context API：虽然 Context API 非常适合传递状态，但频繁更改的过度使用可能会导致不必要的重新渲染。

**示例：明智地使用 Context API**

虽然 Context API 非常适合传递状态，但频繁更改会导致不必要的重新渲染。对于更复杂的状态管理需求，请考虑使用本地状态或其他状态管理库（如 Redux 或 Zustand）。

// Context API Example
const ThemeContext = React.createContext("light");

function App() {
  const [theme, setTheme] = useState("light");

  return (
    
      
    
  );
}

function Toolbar() {
  return (
    
      
    
  );
}

function ThemedButton() {
  const theme = useContext(ThemeContext);
  return (
    
  );
}

在此示例中，`ThemeContext` 用于传递主题状态。但是，如果主题频繁更改，则最好在需要它的组件内本地管理它，或者使用更复杂的状态管理解决方案。

使用 useMemo 和 useCallback 进行记忆：使用这些钩子可以防止在每次渲染时进行昂贵的计算和函数重新创建。 useMemo：此钩子会记忆计算的结果。它仅在其中一个依赖项发生变化时才重新计算值。这对于您不想在每次渲染时运行的昂贵计算非常有用。 useCallback：此钩子会记忆函数定义。它返回回调的记忆版本，该版本仅在其中一个依赖项发生变化时才会更改。这对于防止不必要的函数重新创建非常有用，这在将回调传递给依赖引用相等性来防止不必要渲染的优化子组件时非常重要。

const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);

const memoizedCallback = useCallback(() => {
  doSomething(a, b);
}, [a, b]);

3. 使用绩效衡量工具

React 开发者工具：这是衡量 React 应用程序性能的好方法。使用 React DevTools 中的分析器来识别性能瓶颈。

Web 性能 API：利用 Lighthouse 等工具深入了解 Web 性能。总分达到 80 分及以上有助于您构建高性能、可扩展且瓶颈很少的应用程序。

4. 优化渲染

优化 React 中的渲染对于维护流畅且响应迅速的用户界面至关重要。以下是一些可帮助您实现此目标的策略：

PureComponent 和 React.memo：这些工具有助于防止不必要的重新渲染。PureComponent 是类组件的基类，可对 props 和状态进行浅层比较。对于函数组件，可以使用 React.memo 包装组件，确保仅在其 props 发生变化时重新渲染。

// Using PureComponent for class components
class MyComponent extends React.PureComponent {
  render() {
    /* render using props */
  }
}

// Using React.memo for function components
const MyComponent = React.memo((props) => {
  /* render using props */
});

协调优化：React 的协调过程严重依赖键来识别哪些项目已更改、已添加或已删除。确保键稳定且唯一有助于 React 最大限度地减少重新渲染并高效更新 DOM。

{
  items.map((item) => );
}

通过实施这些技术，您可以显著减少应用程序中不必要的渲染次数，从而提高性能并带来更流畅的用户体验。

5.网络优化

软件包分析使用 Webpack Bundle Analyzer 等工具来识别和删除大型或不必要的依赖项。您可以将其视为代码包的放大镜，显示哪些依赖项占用了最多的空间。软件包越轻，加载时间越快！

HTTP/2：如果您的服务器尚未使用 HTTP/2，那么是时候升级了！此协议允许通过单个连接同时发送多个请求，从而增强您的应用的性能。无需再排队等待加载资产 - 这就像快速结账您的应用资源一样。

长期缓存：使用 Cache-Control 标头将资源在浏览器中存储更长时间，有助于减少提供资源所需的时间和带宽。这可减少重复下载并缩短回访用户的加载时间。

CDN 和资产优化：内容分发网络 (CDN) 就像在每个主要城市都有一个分发中心，用于分发您应用的静态文件（无论是图片、CSS 还是 JavaScript）。CDN 会从距离用户最近的服务器提供资产，从而缩短加载时间。除此之外，ImageOptim 等工具可以帮助您缩小图片大小，同时又不会降低质量，确保您的应用外观清晰，加载速度快。

6. 使用虚拟化列表

React Virtualized 或 React Window：渲染长列表？使用 React Virtualized 或 React Window 等库仅显示可见项目。这可保持 DOM 轻量，并使滚动变得顺畅！

7. 尽量减少不必要的重新渲染

使用 shouldComponentUpdate 和 React.PureComponent：通过实现 shouldComponentUpdate 或使用 React.PureComponent 来防止不必要的重新渲染。这可确保您的组件仅在需要时更新，从而提高性能。

避免使用额外节点的片段：通过将子组件包装在.它使你的 DOM 保持干净和高效。

8.优化CSS

CSS-in-JS 解决方案：使用 Styled-components 或 Emotion 等库来帮助确定 CSS 范围并最大限度地减少其对 DOM 的影响，同时优化捆绑包大小。

代码拆分 CSS：使用 Webpack 等工具按组件或路由拆分 CSS。这可确保用户仅下载他们所访问页面所需的样式，从而减少初始加载时间。

缩小 CSS：使用 cssnano 或 PostCSS 等工具删除空格、注释和冗余规则，缩小 CSS 文件以便更快地交付。

9. 优化服务器端渲染（SSR）

使用 Next.js：使用 Next.js 简化性能优化，它包括对服务器端渲染、静态站点生成和其他最佳实践的内置支持，以加快您的 React 应用的速度。

关键 CSS 和定制响应：仅加载当前视图所需的 CSS 和内容，确保更快的初始绘制和更流畅的用户体验。这就像在银盘上提供必需品一样！

10.其他最佳实践

限制和去抖动用户输入：使用限制和去抖动等技术来限制用户输入触发操作的频率，通过减少不必要的重新渲染和事件来提高性能。

Web Workers：将密集计算卸载到 Web Workers 以保持主线程空闲，确保您的应用即使在繁重处理期间也能保持响应。

环境配置：在 Webpack 配置中将 NODE_ENV 设置为“production”以启用 React 的优化渲染，最大限度地减少捆绑包大小并提高用户性能。

结论

总之，通过实施本文概述的策略，您有可能对 React 应用程序的性能产生重大影响。这些优化不仅可以减少延迟并改善用户体验，还可以带来用户会欣赏的可衡量增强。在您继续微调和完善应用程序时，请记住衡量这些优化的影响的重要性，以确保它们确实提供了所需的结果。有了这些工具和技术，创建闪电般快速且引人入胜的 React 应用程序的旅程将成为一次令人兴奋且有益的冒险。

如果你已经读到了现在，非常感谢你的阅读！如果有任何评论请留下你的评论✌️

不要忘记收藏此博客以备将来使用 📌

与作者联系：

GitHub

叽叽喳喳

CLIS.CC