优化 React 应用程序以获得更好性能的基本技术

介绍

随着现代 Web 应用程序变得越来越复杂，确保最佳性能变得越来越重要。 React 是一个用于构建用户界面的流行 JavaScript 库，它提供了各种策略来增强应用程序性能。无论您正在开发小型项目还是大型应用程序，了解并实施这些优化技术都可以带来更快的加载时间、更流畅的用户体验和更高效的资源使用。

在这篇文章中，我们将探索优化 React 应用程序的基本技术，从高效的状态管理和最小化重新渲染到利用代码分割和延迟加载。这些策略不仅有助于交付高性能应用程序，而且还有助于随着应用程序的增长保持可扩展性和响应能力。让我们深入探讨如何通过优化 React 应用程序的性能来充分利用它们。

1.使用React.memo：防止不必要的重新渲染

React.memo 是一个高阶组件，可以帮助防止功能组件不必要的重新渲染。它的工作原理是记住组件的渲染输出，并且仅在其 props 发生变化时重新渲染它。这可以带来显着的性能提升，特别是对于频繁渲染但其 props 不经常更改的组件。

例子

让我们看一个使用 React.memo 来避免不必要的重新渲染的示例：

import React, { useState } from 'react';

// A functional component that displays a count
const CountDisplay = React.memo(({ count }) => {
  console.log('CountDisplay rendered');
  return <div>Count: {count}</div>;
});

const App = () => {
  const [count, setCount] = useState(0);
  const [text, setText] = useState('');

  return (
    <div>
      <button onClick={() => setCount(count + 1)}>Increment Count</button>
      <CountDisplay count={count} />

      <input
        type="text"
        value={text}
        onChange={(e) => setText(e.target.value)}
        placeholder="Type something"
      />
    </div>
  );
};

export default App;

解释

• 当您单击“递增计数”按钮时，CountDisplay 组件将重新渲染，因为其 count 属性发生变化。
• 当您在输入字段中键入内容时，CountDisplay 组件不会重新渲染，因为即使父 App 组件重新渲染，其 count 属性仍保持不变。

2.使用useMemo和useCallback Hooks：Memoize昂贵的计算

React 的 useMemo 和 useCallback 钩子用于记忆昂贵的计算和函数，防止不必要的重新计算和重新渲染。这些钩子可以显着提高 React 应用程序的性能，尤其是在处理复杂计算或频繁渲染的组件时。

使用备忘录

useMemo 用于记忆值，因此仅当其依赖项之一发生更改时才会重新计算。

例子

import React, { useState, useMemo } from 'react';

const ExpensiveCalculationComponent = ({ num }) => {
  const expensiveCalculation = (n) => {
    console.log('Calculating...');
    return n * 2; // Simulate an expensive calculation
  };

  const result = useMemo(() => expensiveCalculation(num), [num]);

  return <div>Result: {result}</div>;
};

const App = () => {
  const [num, setNum] = useState(1);
  const [text, setText] = useState('');

  return (
    <div>
      <button onClick={() => setNum(num + 1)}>Increment Number</button>
      <ExpensiveCalculationComponent num={num} />

      <input
        type="text"
        value={text}
        onChange={(e) => setText(e.target.value)}
        placeholder="Type something"
      />
    </div>
  );
};

export default App;

解释

• 点击“递增数字”按钮会触发昂贵的计算，您将在控制台中看到“正在计算...”。
• 由于 useMemo，在输入字段中键入内容不会触发昂贵的计算。

使用回调

useCallback 用于记忆函数，因此仅当其依赖项之一发生更改时才会重新创建它。

例子

import React, { useState, useCallback } from 'react';

const Button = React.memo(({ handleClick, label }) => {
  console.log(`Rendering button - ${label}`);
  return <button onClick={handleClick}>{label}</button>;
});

const App = () => {
  const [count, setCount] = useState(0);
  const [text, setText] = useState('');

  const increment = useCallback(() => {
    setCount((prevCount) => prevCount + 1);
  }, []);

  return (
    <div>
      <Button handleClick={increment} label="Increment Count" />
      <div>Count: {count}</div>

      <input
        type="text"
        value={text}
        onChange={(e) => setText(e.target.value)}
        placeholder="Type something"
      />
    </div>
  );
};

export default App;

说明

• 点击“递增计数”按钮会触发递增功能，并且 Button 组件不会不必要地重新渲染。
• 由于 useCallback，在输入字段中键入内容不会导致 Button 组件重新渲染。

3. 延迟加载和代码分割：动态加载组件

延迟加载和代码分割是 React 中使用的技术，通过仅在需要时加载组件来提高应用程序的性能。这可以减少初始加载时间并改善整体用户体验。

- 使用 React.lazy 和 Suspense 进行延迟加载

React 提供了一个内置函数 React.lazy 来实现组件的延迟加载。它允许您将代码分割成更小的块并按需加载它们。

例子

import React, { Suspense } from 'react';

// Lazy load the component
const MyLazyComponent = React.lazy(() => import('./MayLazyComponent'));

const App = () => {
  return (
    <div>
      <h1>Welcome to My App</h1>

      {/* Suspense component wraps the lazy loaded component */}
      <Suspense fallback={<div>Loading...</div>}>
        <MyLazyComponent />
      </Suspense>
    </div>
  );
};

export default App;

解释

1.React.lazy：

• React.lazy 用于动态导入 LazyComponent。
• 导入语句返回一个解析为组件的承诺。

2、悬念：

• Suspense 组件用于包装延迟加载组件。
• 它提供了一个后备 UI（正在加载...）以在加载组件时显示。

- 使用 React.lazy 和 React Router 进行代码分割

您还可以使用 React Router 的延迟加载和代码分割来动态加载路由组件。

例子

import React, { Suspense } from 'react';
import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';

// Lazy load the components
const Home = React.lazy(() => import('./Home'));
const About = React.lazy(() => import('./About'));

const App = () => {
  return (
    <Router>
      <div>
        <h1>My App with React Router</h1>

        <Suspense fallback={<div>Loading...</div>}>
          <Routes>
            <Route path="/" element={<Home />} />
            <Route path="/about" element={<About />} />
          </Routes>
        </Suspense>
      </div>
    </Router>
  );
};

export default App;

解释

• 延迟加载路由组件：
  React.lazy 用于动态导入 Home 和 About 组件。

• 悬念和反应路由器：
  Suspense 组件包装了 Routes 组件，以便在加载路由组件时提供后备 UI。

4. Virtualize Long Lists: Renders only the visible items

Virtualizing long lists in React using libraries like react-window or react-virtualized can significantly improve performance by rendering only the visible items. This technique is essential for handling large datasets efficiently and ensuring a smooth user experience.

Example

import React from 'react';
import { List } from 'react-virtualized';

const rowRenderer = ({ index, key, style }) => (
  <div key={key} style={style}>
    Row {index}
  </div>
);

const App = () => {
  return (
    <List
      width={300}
      height={400}
      rowCount={1000}
      rowHeight={35}
      rowRenderer={rowRenderer}
    />
  );
};

export default App;

5. Debounce & Throttle Events: Limits the frequency of expensive operations

Debouncing and throttling are essential techniques to optimize performance in React applications by controlling the frequency of expensive operations. Debouncing is ideal for events like key presses, while throttling is more suited for continuous events like scrolling or resizing. Using utility libraries like Lodash can simplify the implementation of these techniques.

- Debounce

Debouncing ensures that a function is only executed once after a specified delay has passed since the last time it was invoked. This is particularly useful for events that trigger frequently, such as key presses in a search input field.

Example using Lodash

import React, { useState, useCallback } from 'react';
import debounce from 'lodash/debounce';

const App = () => {
  const [value, setValue] = useState('');

  const handleInputChange = (event) => {
    setValue(event.target.value);
    debouncedSearch(event.target.value);
  };

  const search = (query) => {
    console.log('Searching for:', query);
    // Perform the search operation
  };

  const debouncedSearch = useCallback(debounce(search, 300), []);

  return (
    <div>
      <input type="text" value={value} onChange={handleInputChange} />
    </div>
  );
};

export default App;

- Throttle

Throttling ensures that a function is executed at most once in a specified interval of time. This is useful for events like scrolling or resizing where you want to limit the rate at which the event handler executes.

Example using Lodash

import React, { useEffect } from 'react';
import throttle from 'lodash/throttle';

const App = () => {
  useEffect(() => {
    const handleScroll = throttle(() => {
      console.log('Scrolling...');
      // Perform scroll operation
    }, 200);

    window.addEventListener('scroll', handleScroll);

    return () => {
      window.removeEventListener('scroll', handleScroll);
    };
  }, []);

  return (
    <div style={{ height: '2000px' }}>
      Scroll down to see the effect
    </div>
  );
};

export default App;

6. Optimize Images and Assets: Reduces the load time

Optimizing images and assets involves compressing files, using modern formats, serving responsive images, and implementing lazy loading. By following these techniques, you can significantly reduce load times and improve the performance of your React application.

Use the loading attribute for images to enable native lazy loading or use a React library like react-lazyload.

Example

import React from 'react';
import lazyImage from './lazy-image.webp';

const LazyImage = () => {
  return (
    <div>
      <img
        src={lazyImage}
        alt="Lazy Loaded"
        loading="lazy" // Native lazy loading
        style={{ width: '100%', maxWidth: '300px' }}
      />
    </div>
  );
};

export default LazyImage;

7. Avoid Inline Functions and Object Literals:

Avoiding inline functions and object literals is important for optimizing performance in React applications. By using useCallback to memoize functions and defining objects outside of the render method, you can minimize unnecessary re-renders and improve the efficiency of your components.

Example

// 1. Inline Function

// Problematic Code:
 <button onClick={() => setCount(count + 1)}>Increment</button>

// Optimized Code:
  // Use useCallback to memoize the function
  const handleClick = useCallback(() => {
    setCount((prevCount) => prevCount + 1);
  }, []);

 <button onClick={handleClick}>Increment</button>

// 2. Inline Object Literals

// Problematic Code:
    <div style={{ padding: '20px', backgroundColor: '#f0f0f0' }}>
      <p>Age: {age}</p>
    </div>

// Optimized Code:
    const styles = {
         container: {
             padding: '20px',
             backgroundColor: '#f0f0f0',
        },
    };

    <div style={styles.container}>
      <p>Age: {age}</p>
    </div>

8. Key Attribute in Lists: React identify which items have changed

When rendering lists in React, using the key attribute is crucial for optimal rendering and performance. It helps React identify which items have changed, been added, or removed, allowing for efficient updates to the user interface.

Example without key attribute

In this example, the key attribute is missing from the list items. React will not be able to efficiently track changes in the list, which could lead to performance issues and incorrect rendering.

    <ul>
      {items.map((item) => (
        <li>{item}</li>
      ))}
    </ul>

Example with key attribute as index

In the optimized code, the key attribute is added to each

element. The key value should be a unique identifier for each item. In this case, the index of the item is used as the key. However, it's recommended to use a unique identifier (e.g., item.id) if available, as using indices can cause issues if the list items are reordered or changed.

   <ul>
      {items.map((item, index) => (
        <li key={index}>{item}</li>
      ))}
    </ul>

Example with Unique Identifiers:

In this example, each list item has a unique id which is used as the key. This approach provides a more reliable way to track items and handle list changes, especially when items are dynamically added, removed, or reordered.

    <ul>
      {items.map((item) => (
        <li key={item.id}>{item.name}</li>
      ))}
    </ul>

9. Use Production Build:

Always use the production build for your React app to benefit from optimizations like minification and dead code elimination.

Build Command: npm run build

10. Profile and Monitor Performance:

Profiling and monitoring performance are crucial for ensuring that your React application runs smoothly and efficiently. This involves identifying and addressing performance bottlenecks, ensuring that your application is responsive and performs well under various conditions.

- Use React Developer Tools

React Developer Tools is a browser extension that provides powerful tools for profiling and monitoring your React application. It allows you to inspect component hierarchies, analyze component renders, and measure performance.

- Analyze Performance Metrics

Use the performance metrics provided by React Developer Tools to identify slow components and unnecessary re-renders. Look for:

• 渲染时间：每个组件渲染需要多长时间。
• 组件更新：组件重新渲染的频率。
• 交互：用户交互对性能的影响

最后的想法

实施这些优化技术可以极大地增强 React 应用程序的性能，从而加快加载时间、更流畅的交互并全面改善用户体验。定期分析和监控，再加上这些技术的仔细应用，可确保您的 React 应用程序在增长时保持高性能和可扩展性。

以上是优化 React 应用程序以获得更好性能的基本技术的详细内容。更多信息请关注PHP中文网其他相关文章！