让 React 应用运行更快的 10 个方法

🌟 优化 React 应用程序的性能并不一定是一项艰巨的任务。以下是您可以实施的 10 个快速方法，以确保您的 React 应用程序运行得更快、更流畅。每个技巧都附有实际示例和代码片段。✨🚀

1. 使用 React.PureComponent

`React.PureComponent` 自动对 props 和 state 进行浅层比较，以防止不必要的重新渲染。🔍⚡️💡

例子：

import React from 'react';

class PureChild extends React.PureComponent {
  render() {
    console.log('Rendered PureChild');
    return {this.props.text};
  }
}

function App() {
  const [count, setCount] = React.useState(0);

  return (
    
      
      
    
  );
}

export default App;

2. 推迟非关键资产

延迟加载图像或视频等资产以缩短初始加载时间。📸⏳🛠

例子：

import React, { Suspense } from 'react';

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

function App() {
  return (
    Loading...

}> ); } export default App;

3. 使用 React.memo 作为功能组件

通过使用“React.memo”包装功能组件来防止重新渲染。🧠⚙️💻

例子：

import React from 'react';

const MemoizedComponent = React.memo(({ value }) => {
  console.log('Rendered MemoizedComponent');
  return {value};
});

function App() {
  const [state, setState] = React.useState(0);

  return (
    
      
      
    
  );
}

export default App;

4. 实现代码分割

使用动态导入将代码拆分为更小的包，从而减少初始加载时间。📦⚡️✨

例子：

import React, { Suspense } from 'react';

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

function App() {
  return (
    Loading...

}> ); } export default App;

5.优化图像

使用优化的图像格式（如 WebP）并利用 Cloudinary 或 Imgix 等工具进行即时图像优化。🖼🚀📲

例子：

6. 使用 Service Worker

使用服务工作线程缓存资产和 API 响应，以便加快后续加载速度。🔧📂⚡️

例子：

if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/service-worker.js')
    .then(() => console.log('Service Worker Registered'))
    .catch((error) => console.log('Service Worker Registration Failed', error));
}

7. 使用 useMemo 和 useCallback Hooks

记住昂贵的计算或函数，以避免每次渲染时重新计算。🧮🛠📈

例子：

import React from 'react';

function App() {
  const [count, setCount] = React.useState(0);

  const expensiveCalculation = React.useMemo(() => {
    console.log('Calculating...');
    return count * 2;
  }, [count]);

  return (
    
      
      Result: {expensiveCalculation}
    
  );
}

export default App;

8. 避免在 JSX 中使用匿名函数

JSX 中的匿名函数在每次渲染时都会创建新实例，从而导致潜在的性能问题。🚫🔄🔧

例子：

function App() {
  const [count, setCount] = React.useState(0);

  const increment = () => setCount(count + 1);

  return (
    
      
    
  );
}

export default App;

9. 使用虚拟列表

要渲染长列表，请使用“react-window”或“react-virtualized”等库来仅渲染可见项目。📜⚡️🖥

例子：

import React from 'react';
import { FixedSizeList as List } from 'react-window';

function Row({ index, style }) {
  return Row {index};
}

function App() {
  return (
    
      {Row}
    
  );
}

export default App;

10. 利用 react-query 获取数据

`react-query` 有效地管理服务器状态和缓存，减少不必要的网络请求。🔄🌐📉

例子：

import { useQuery } from 'react-query';

function fetchData() {
  return fetch('https://api.example.com/data').then((res) => res.json());
}

function App() {
  const { data, isLoading } = useQuery('fetchData', fetchData);

  if (isLoading) return Loading...;

  return {JSON.stringify(data)};
}

export default App;

🚀 通过实施这些快速成功的方法，您将确保您的 React 应用不仅速度快，而且可扩展且用户友好。从这些技巧开始，观察您的应用性能飙升！🌟🔥

CLIS.CC