React 重新渲染：最佳性能的最佳实践-js教程-PHP中文网

React 重新渲染：最佳性能的最佳实践

DDD

发布： 2024-09-12 22:33:02

原创

977 人浏览过

React Re-Rendering: Best Practices for Optimal Performance

React 高效的渲染机制是其受欢迎的关键原因之一。然而，随着应用程序复杂性的增加，管理组件重新渲染对于优化性能变得至关重要。让我们探索优化 React 渲染行为并避免不必要的重新渲染的最佳实践。

1. 使用 React.memo() 作为函数式组件

React.memo() 是一个高阶组件，用于记忆功能组件的渲染。它通过对当前 props 与之前的 props 进行浅层比较来防止不必要的重新渲染。如果 props 没有改变，React 会跳过渲染组件并重用上次渲染的结果。

import React from 'react';

const MemoizedComponent = React.memo(function MyComponent(props) {
  // Component logic
});

登录后复制

2. 为类组件实现 PureComponent

如果您使用类组件，请考虑扩展 PureComponent 而不是 Component。 PureComponent 对 props 和 state 进行浅层比较，以确定组件是否应该更新。这有助于避免在 props 和状态未更改时不必要的重新渲染。

import React, { PureComponent } from 'react';

class MyComponent extends PureComponent {
  // Component logic
}

登录后复制

3. 避免内联函数定义

在渲染方法中定义函数可能会导致不必要的重新渲染。相反，在渲染方法之外定义函数或使用箭头函数来实现简洁的事件处理程序。

class MyComponent extends React.Component {
  handleClick = () => {
    // Handle click
  };

  render() {
    return <button onClick={this.handleClick}>Click me</button>;
  }
}

登录后复制

4. 使用 useCallback Hook 来记忆函数

useCallback 钩子用于记忆函数。它可以防止在每个渲染上不必要地重新创建函数，这可能导致依赖这些函数的子组件不必要地重新渲染。

import React, { useCallback } from 'react';

function MyComponent() {
  const handleClick = useCallback(() => {
    // Handle click
  }, []);

  return <button onClick={handleClick}>Click me</button>;
}

登录后复制

5. 利用 useMemo Hook 进行昂贵的计算

useMemo 钩子用于记忆昂贵的计算。它可以防止每次渲染时不必要地重新计算值，从而提高性能，特别是对于复杂的计算。

import React, { useMemo } from 'react';

function MyComponent({ items }) {
  const filteredItems = useMemo(() => items.filter(item => item.visible), [items]);

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

登录后复制

6. 在列表中正确使用键

渲染组件列表时，始终提供唯一的 key prop。 React 在协调过程中使用键来有效地识别元素。不正确或丢失的密钥可能会导致性能问题和意外行为。

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

登录后复制

7. 通过动态导入实现代码分割

代码分割允许您将应用程序的代码分割成更小的块。通过使用动态导入 (import())，您可以按需加载应用程序的各个部分，从而减少初始包大小并缩短加载时间。

import React, { lazy, Suspense } from 'react';

const MyComponent = lazy(() => import('./MyComponent'));

function App() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <MyComponent />
    </Suspense>
  );
}

登录后复制