React-Anwendung optimieren

Um eine React-Anwendung zu optimieren, können Sie mehrere Schlüsselstrategien verwenden, die sich auf Leistung, Reduzierung der Bundle-Größe, effizientes Rendering und allgemeine Benutzererfahrung konzentrieren. Hier ist eine Aufschlüsselung der Optimierungstechniken speziell für React:

1. Code-Splitting

Mit der Codeaufteilung können Sie Ihre App in kleinere Teile aufteilen, die nach Bedarf geladen werden können, anstatt die gesamte Anwendung auf einmal zu laden. Dies verbessert die anfängliche Ladezeit.

• React.lazy: Verwenden Sie die integrierte Lazy-Loading-Funktion von React, um Komponenten dynamisch zu importieren.

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

  function App() {
    return (
      <react.suspense fallback="{<div">Loading...}>
        <lazycomponent></lazycomponent>
      </react.suspense>
    );
  }

• React Loadable: Alternativ können Sie eine Bibliothek wie react-loadable für erweiterte Optionen zur Codeaufteilung verwenden.

2. Auswendiglernen und Verhindern unnötiger erneuter Renderings

Das Vermeiden unnötiger erneuter Renderings ist entscheidend für die Verbesserung der Leistung in React-Anwendungen.

• React.memo: Funktionskomponenten mit React.memo umschließen, um zu verhindern, dass sie erneut gerendert werden, wenn sich ihre Requisiten nicht geändert haben.

  const MyComponent = React.memo(({ value }) => {
    return <div>{value}</div>;
  });

• useMemo: Merken Sie sich teure Berechnungen, damit sie nicht bei jedem Rendern neu berechnet werden, sofern dies nicht erforderlich ist.

  const computedValue = useMemo(() => expensiveComputation(value), [value]);

• useCallback: Merken Sie sich Funktionen, um zu vermeiden, dass jedes Mal neue Referenzen übergeben werden, insbesondere wenn sie als Abhängigkeiten in untergeordneten Komponenten oder Effekten verwendet werden.

  const handleClick = useCallback(() => {
    console.log('Clicked');
  }, []);

3. Verwenden Sie eine effiziente Zustandsverwaltung

Der Umgang mit dem Status auf eine Art und Weise, die unnötiges Rendern vermeidet, kann die Leistung erheblich verbessern.

• useReducer: Erwägen Sie bei komplexer Zustandslogik die Verwendung von useReducer anstelle von useState, um mehr Kontrolle über Zustandsänderungen zu erhalten.

  const [state, dispatch] = useReducer(reducer, initialState);

• Komponentenaufteilung: Teilen Sie Komponenten auf, sodass nur der notwendige Teil neu gerendert wird, wenn sich der Status ändert.

4. Lange Listen virtualisieren

Das Rendern langer Listen oder Tabellen kann die Leistung verlangsamen. Verwenden Sie Listenvirtualisierungstechniken, um nur das zu rendern, was auf dem Bildschirm sichtbar ist.

• react-window oder react-virtualized: Mit diesen Bibliotheken können Sie große Datensätze durch Virtualisierung von Listen effizient rendern.

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

  const MyList = ({ items }) => (
    <list height="{500}" itemcount="{items.length}" itemsize="{35}" width="{300}">
      {({ index, style }) => <div style="{style}">{items[index]}</div>}
    </list>
  );

5. Baumschütteln

Stellen Sie sicher, dass Ihre Anwendung nur die Teile von Bibliotheken importiert, die zur Reduzierung der Bundle-Größe verwendet werden.

• ES6-Importe: Importieren Sie nur die Module, die Sie benötigen, aus Bibliotheken (wie lodash, moment.js usw.) und nicht die gesamte Bibliothek.

  // Instead of this:
  import _ from 'lodash';

  // Do this:
  import debounce from 'lodash/debounce';

6. Lazy Load Images

Bilder sind oft die größten Assets auf einer Seite. Verwenden Sie Lazy Loading, um das Laden von Bildern zu verzögern, bis sie im Ansichtsfenster angezeigt werden.

• react-lazyload: Verwenden Sie die react-lazyload-Bibliothek zum einfachen verzögerten Laden von Bildern.

  import LazyLoad from 'react-lazyload';

  const ImageComponent = () => (
    <lazyload height="{200}" once>
      <img src="image-url.jpg" alt="React-Anwendung optimieren">
    </lazyload>
  );

• Intersection Observer: Sie können auch die Intersection Observer API verwenden, um Bilder langsam zu laden, sobald sie sichtbar werden.

  const LazyImage = ({ src, alt }) => {
    const [inView, setInView] = useState(false);
    const imgRef = useRef(null);

    useEffect(() => {
      const observer = new IntersectionObserver(([entry]) => {
        if (entry.isIntersecting) {
          setInView(true);
          observer.disconnect();
        }
      });
      observer.observe(imgRef.current);
    }, []);

    return <img ref="{imgRef}" src="%7BinView" : alt="{alt}">;
  };

7. JavaScript minimieren

• Verwenden Sie Terser oder die integrierte Minimierung von Webpack, um die Größe Ihrer JavaScript-Bundles während des Erstellungsprozesses zu reduzieren.

• React App erstellen minimiert automatisch Code für Produktions-Builds:
  

  npm run build

8. Bündelanalyse

Analysieren Sie die Größe Ihrer JavaScript-Bundles, um Bereiche zu identifizieren, in denen Sie sich verbessern können.

• Verwenden Sie webpack-bundle-analyzer, um Ihre Bundles zu visualisieren und zu sehen, welche Bibliotheken den meisten Platz beanspruchen.

  npm install --save-dev webpack-bundle-analyzer

In Ihrer Webpack-Konfiguration:

  const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');
  module.exports = {
    plugins: [
      new BundleAnalyzerPlugin()
    ]
  };

9. Nicht verwendetes CSS reduzieren

• Verwenden Sie Tools wie PurgeCSS, um nicht verwendetes CSS aus Ihrem Bundle zu entfernen. Sie können es in Ihre Webpack- oder PostCSS-Konfiguration integrieren.

  npm install @fullhuman/postcss-purgecss

Beispiel für eine PostCSS-Konfiguration:

  const purgecss = require('@fullhuman/postcss-purgecss')({
    content: ['./src/**/*.js', './public/index.html'],
    defaultExtractor: content => content.match(/[\w-/:]+(?



<h3>
  
  
  10. <strong>Netzwerkanfragen optimieren</strong>
</h3>

<p>Die Reduzierung der Anzahl der Netzwerkanfragen und die Optimierung von API-Aufrufen können zu erheblichen Leistungsverbesserungen führen.</p>

• Debouncing API Calls: Use debouncing to limit how often API requests are sent during user input.

  const fetchResults = debounce((query) => {
    // API call logic
  }, 300);

• Caching API Data: Use libraries like SWR or React Query to cache API requests and avoid refetching data unnecessarily.

  import useSWR from 'swr';

  const fetcher = url => fetch(url).then(res => res.json());

  const MyComponent = () => {
    const { data, error } = useSWR('/api/data', fetcher);

    if (error) return <div>Error loading data</div>;
    if (!data) return <div>Loading...</div>;
    return <div>{data.message}</div>;
  };

11. Use React Fragments

Avoid adding unnecessary elements to the DOM by using React Fragments ( and >) when wrapping multiple elements.

const MyComponent = () => (
  
    <h1>Title</h1>
    <p>Content</p>
  >
);

12. Profiling and Performance Testing

Use the React Developer Tools profiler to identify performance bottlenecks in your app.

• React Profiler: In Chrome or Firefox, open the React DevTools and switch to the "Profiler" tab. Record a session and analyze where components are re-rendering and consuming more time.

---

Conclusion

Optimizing a React application requires careful attention to performance, bundle size, and rendering efficiency. By employing techniques like code splitting, memoization, lazy loading, tree shaking, and minimizing network requests, you can significantly improve the performance of your app. Make sure to regularly analyze and test your app’s performance to catch any potential inefficiencies.

Das obige ist der detaillierte Inhalt vonReact-Anwendung optimieren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!