第8课: 性能优化

React性能优化技术详解

课程简介

本课程将深入讲解React性能优化的核心概念和实践技巧。通过学习本课程，你将掌握如何识别性能瓶颈、应用优化策略，以及使用React提供的性能优化工具来提升应用性能。

核心知识点

1. 性能优化的基本原理

• React渲染机制与性能瓶颈
• 虚拟DOM与diff算法
• 组件重渲染的触发条件
• 性能度量与分析工具

2. React.memo - 组件记忆

// 使用React.memo优化函数组件
import React, { memo } from 'react';

// 普通函数组件，每次父组件渲染都会重新渲染
function RegularComponent({ name }) {
  console.log('RegularComponent渲染');
  return 
{name}
;
}

// 使用memo包装的组件，只有当props变化时才会重新渲染
const MemoizedComponent = memo(function MemoizedComponent({ name }) {
  console.log('MemoizedComponent渲染');
  return 
{name}
;
});

// 自定义比较函数
const CustomMemoizedComponent = memo(
  function CustomMemoizedComponent({ name, age }) {
    console.log('CustomMemoizedComponent渲染');
    return 
{name} - {age}
;
  },
  (prevProps, nextProps) => {
    // 自定义比较逻辑
    return prevProps.name === nextProps.name && prevProps.age === nextProps.age;
  }
);

export { RegularComponent, MemoizedComponent, CustomMemoizedComponent };

3. useMemo - 计算结果记忆

// 使用useMemo优化计算密集型操作
import React, { useState, useMemo } from 'react';

function ExpensiveCalculation() {
  const [count, setCount] = useState(0);
  const [input, setInput] = useState('');
  
  // 计算密集型操作
  const expensiveResult = useMemo(() => {
    console.log('执行计算密集型操作');
    let result = 0;
    for (let i = 0; i < 100000000; i++) {
      result += i;
    }
    return result;
  }, []); // 依赖数组为空，只在组件首次渲染时执行
  
  // 依赖count的计算
  const countRelatedResult = useMemo(() => {
    console.log('执行count相关计算');
    return count * 2;
  }, [count]); // 只在count变化时重新计算
  
  return (
    

      
计算结果: {expensiveResult}
      
Count相关结果: {countRelatedResult}
       setCount(count + 1)}>增加Count: {count}
       setInput(e.target.value)}
        placeholder="输入文本"
      />
    
  );
}

export default ExpensiveCalculation;

4. useCallback - 函数记忆

// 使用useCallback优化函数传递
import React, { useState, useCallback, memo } from 'react';

// 子组件，使用memo包装
const ChildComponent = memo(function ChildComponent({ onButtonClick, item }) {
  console.log('ChildComponent渲染');
  return (
    

      
{item}
      点击我
    
  );
});

function ParentComponent() {
  const [count, setCount] = useState(0);
  const [items, setItems] = useState(['Item 1', 'Item 2']);
  
  // 普通函数 - 每次渲染都会创建新函数
  const regularFunction = () => {
    console.log('普通函数执行');
    setCount(count + 1);
  };
  
  // 使用useCallback包装的函数 - 只在依赖项变化时创建新函数
  const memoizedFunction = useCallback(() => {
    console.log('记忆函数执行');
    setCount(count + 1);
  }, [count]); // 依赖count
  
  // 优化版本 - 使用函数式更新避免依赖count
  const optimizedFunction = useCallback(() => {
    console.log('优化函数执行');
    setCount(prevCount => prevCount + 1);
  }, []); // 空依赖数组
  
  return (
    

      
Count: {count}
      
      
使用普通函数:
      
      
      
使用useCallback:
      
      
      
使用优化的useCallback:
      
      
       setItems([...items, `Item ${items.length + 1}`])}>
        添加项目
      
    
  );
}

export default ParentComponent;

5. 代码分割与懒加载

// 使用React.lazy和Suspense实现代码分割
import React, { lazy, Suspense, useState } from 'react';

// 懒加载组件
const LazyComponent = lazy(() => import('./LazyComponent'));
const AnotherLazyComponent = lazy(() => import('./AnotherLazyComponent'));

function CodeSplittingExample() {
  const [showLazy, setShowLazy] = useState(false);
  const [showAnotherLazy, setShowAnotherLazy] = useState(false);
  
  return (
    

      
代码分割示例
      
       setShowLazy(true)}>
        加载第一个懒组件
      
      
       setShowAnotherLazy(true)}>
        加载第二个懒组件
      
      
      {/* 使用Suspense包裹懒加载组件 */}
      加载中...
}>
        {showLazy && }
        {showAnotherLazy && }