React性能优化完全指南：从基础到高级技巧实战解析

一、React渲染机制深度解析

1. Virtual DOM与Diff算法原理

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

// 模拟Virtual DOM更新过程
class VirtualDOMDemo extends React.Component {
  state = { count: 0 };
  
  // 模拟shouldComponentUpdate
  shouldComponentUpdate(nextProps, nextState) {
    console.log('当前状态:', this.state.count, '新状态:', nextState.count);
    return this.state.count !== nextState.count;
  }
  
  handleClick = () => {
    this.setState({ count: this.state.count + 1 });
    console.log('状态更新触发重渲染');
  };
  
  render() {
    return (
      <div style={{ padding: '20px', border: '1px solid #ccc' }}>
        <h3>Virtual DOM 演示</h3>
        <p>计数: {this.state.count}</p>
        <button onClick={this.handleClick}>增加计数</button>
        <ChildComponent count={this.state.count} />
      </div>
    );
  }
}

// 子组件 - 演示props变化时的渲染
class ChildComponent extends React.Component {
  renderCount = 0;
  
  render() {
    this.renderCount++;
    console.log(`子组件渲染次数: ${this.renderCount}`);
    
    return (
      <div style={{ marginTop: '10px', padding: '10px', background: '#f5f5f5' }}>
        <p>子组件 - 接收的计数: {this.props.count}</p>
        <p>子组件渲染次数: {this.renderCount}</p>
      </div>
    );
  }
}

export default VirtualDOMDemo;

2. React Fiber架构与并发特性

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

// 使用并发特性优化大型列表渲染
function ConcurrentFeatureDemo() {
  const [tab, setTab] = useState('home');
  const [isPending, startTransition] = useTransition();
  const [list, setList] = useState([]);
  
  // 模拟大数据量操作
  const generateLargeList = () => {
    const largeList = [];
    for (let i = 0; i < 5000; i++) {
      largeList.push(`项目 ${i + 1}`);
    }
    return largeList;
  };
  
  const handleTabChange = (newTab) => {
    if (newTab === 'large') {
      // 使用startTransition标记非紧急更新
      startTransition(() => {
        console.log('开始生成大型列表...');
        setList(generateLargeList());
        setTab(newTab);
      });
    } else {
      setTab(newTab);
    }
  };
  
  return (
    <div style={{ padding: '20px' }}>
      <h3>React并发特性演示</h3>
      
      <div style={{ marginBottom: '20px' }}>
        <button 
          onClick={() => handleTabChange('home')}
          style={{ marginRight: '10px' }}
        >
          首页
        </button>
        <button 
          onClick={() => handleTabChange('about')}
          style={{ marginRight: '10px' }}
        >
          关于
        </button>
        <button 
          onClick={() => handleTabChange('large')}
          disabled={isPending}
        >
          {isPending ? '加载中...' : '大型列表'}
        </button>
      </div>
      
      {isPending && <div>正在加载大型列表...</div>}
      
      <div>
        {tab === 'home' && <HomeTab />}
        {tab === 'about' && <AboutTab />}
        {tab === 'large' && <LargeList list={list} />}
      </div>
    </div>
  );
}

function HomeTab() {
  return <div>首页内容 - 轻量级组件</div>;
}

function AboutTab() {
  return <div>关于页面 - 另一个轻量级组件</div>;
}

function LargeList({ list }) {
  return (
    <div style={{ maxHeight: '400px', overflow: 'auto' }}>
      <h4>大型列表 ({list.length} 个项目)</h4>
      <ul>
        {list.map((item, index) => (
          <li key={index} style={{ padding: '5px 0' }}>
            {item}
          </li>
        ))}
      </ul>
    </div>
  );
}

export default ConcurrentFeatureDemo;

二、组件级性能优化技巧

1. React.memo与Props优化

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

// 基础组件 - 未优化版本
const ExpensiveComponent = ({ user, onClick }) => {
  console.log('昂贵的子组件渲染');
  
  // 模拟昂贵的计算
  const expensiveCalculation = () => {
    let result = 0;
    for (let i = 0; i < 1000000; i++) {
      result += i;
    }
    return result;
  };
  
  const calculatedValue = expensiveCalculation();
  
  return (
    <div style={{ padding: '15px', border: '2px solid blue', margin: '10px 0' }}>
      <h4>昂贵的组件</h4>
      <p>用户名: {user.name}</p>
      <p>计算结果: {calculatedValue}</p>
      <button onClick={onClick}>点击回调</button>
    </div>
  );
};

// 优化版本 - 使用React.memo
const OptimizedExpensiveComponent = memo(({ user, onClick }) => {
  console.log('优化后的昂贵子组件渲染');
  
  const expensiveCalculation = () => {
    let result = 0;
    for (let i = 0; i < 1000000; i++) {
      result += i;
    }
    return result;
  };
  
  const calculatedValue = expensiveCalculation();
  
  return (
    <div style={{ padding: '15px', border: '2px solid green', margin: '10px 0' }}>
      <h4>优化后的昂贵组件</h4>
      <p>用户名: {user.name}</p>
      <p>计算结果: {calculatedValue}</p>
      <button onClick={onClick}>点击回调</button>
    </div>
  );
});

// Props比较函数
const arePropsEqual = (prevProps, nextProps) => {
  return (
    prevProps.user.id === nextProps.user.id &&
    prevProps.user.name === nextProps.user.name &&
    prevProps.onClick === nextProps.onClick
  );
};

// 深度优化版本
const DeepOptimizedComponent = memo(OptimizedExpensiveComponent, arePropsEqual);

function MemoOptimizationDemo() {
  const [count, setCount] = useState(0);
  const [user, setUser] = useState({ id: 1, name: '张三' });
  
  // 未优化的回调函数 - 每次渲染都会创建新函数
  const handleClickBad = () => {
    console.log('点击处理');
  };
  
  // 使用useCallback优化的回调函数
  const handleClickGood = useCallback(() => {
    console.log('优化的点击处理');
  }, []);
  
  // 使用useMemo优化对象
  const optimizedUser = useMemo(() => ({ ...user }), [user.id, user.name]);
  
  return (
    <div style={{ padding: '20px' }}>
      <h2>React.memo 优化演示</h2>
      
      <div style={{ marginBottom: '20px' }}>
        <p>父组件计数: {count}</p>
        <button onClick={() => setCount(count + 1)}>
          增加计数 (触发父组件重渲染)
        </button>
        
        <button 
          onClick={() => setUser({ ...user, name: `用户${Date.now()}` })}
          style={{ marginLeft: '10px' }}
        >
          更新用户信息
        </button>
      </div>
      
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: '20px' }}>
        {/* 未优化组件 */}
        <div>
          <h4>未优化组件</h4>
          <ExpensiveComponent user={user} onClick={handleClickBad} />
        </div>
        
        {/* 基础优化组件 */}
        <div>
          <h4>React.memo优化</h4>
          <OptimizedExpensiveComponent user={user} onClick={handleClickGood} />
        </div>
        
        {/* 深度优化组件 */}
        <div>
          <h4>深度优化</h4>
          <DeepOptimizedComponent user={optimizedUser} onClick={handleClickGood} />
        </div>
      </div>
    </div>
  );
}

export default MemoOptimizationDemo;

2. useMemo与useCallback实战

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

// 数据筛选和排序的优化示例
function DataProcessingDemo() {
  const [users, setUsers] = useState([]);
  const [filter, setFilter] = useState('');
  const [sortBy, setSortBy] = useState('name');
  const [renderCount, setRenderCount] = useState(0);
  
  // 模拟数据加载
  useEffect(() => {
    const mockUsers = [
      { id: 1, name: '张三', age: 25, department: '技术部' },
      { id: 2, name: '李四', age: 30, department: '市场部' },
      { id: 3, name: '王五', age: 28, department: '技术部' },
      { id: 4, name: '赵六', age: 35, department: '人事部' },
      { id: 5, name: '钱七', age: 22, department: '市场部' },
    ];
    setUsers(mockUsers);
  }, []);
  
  // 未优化的处理函数 - 每次渲染都会重新计算
  const processDataBad = () => {
    console.log('未优化的数据处理执行');
    let processed = users.filter(user => 
      user.name.includes(filter) || user.department.includes(filter)
    );
    
    processed.sort((a, b) => {
      if (sortBy === 'name') return a.name.localeCompare(b.name);
      if (sortBy === 'age') return a.age - b.age;
      if (sortBy === 'department') return a.department.localeCompare(b.department);
      return 0;
    });
    
    return processed;
  };
  
  // 使用useMemo优化的数据处理
  const processedUsers = useMemo(() => {
    console.log('优化的数据处理执行');
    let processed = users.filter(user => 
      user.name.includes(filter) || user.department.includes(filter)
    );
    
    processed.sort((a, b) => {
      if (sortBy === 'name') return a.name.localeCompare(b.name);
      if (sortBy === 'age') return a.age - b.age;
      if (sortBy === 'department') return a.department.localeCompare(b.department);
      return 0;
    });
    
    return processed;
  }, [users, filter, sortBy]);
  
  // 使用useCallback优化的事件处理
  const handleFilterChange = useCallback((event) => {
    setFilter(event.target.value);
  }, []);
  
  const handleSortChange = useCallback((event) => {
    setSortBy(event.target.value);
  }, []);
  
  // 渲染计数
  useEffect(() => {
    setRenderCount(prev => prev + 1);
  });
  
  return (
    <div style={{ padding: '20px' }}>
      <h2>useMemo 和 useCallback 优化演示</h2>
      <p>组件渲染次数: {renderCount}</p>
      
      <div style={{ marginBottom: '20px' }}>
        <input
          type="text"
          placeholder="过滤用户名或部门..."
          value={filter}
          onChange={handleFilterChange}
          style={{ marginRight: '10px', padding: '5px' }}
        />
        
        <select value={sortBy} onChange={handleSortChange} style={{ padding: '5px' }}>
          <option value="name">按姓名排序</option>
          <option value="age">按年龄排序</option>
          <option value="department">按部门排序</option>
        </select>
      </div>
      
      <UserList users={processedUsers} />
    </div>
  );
}

// 优化的用户列表组件
const UserList = React.memo(({ users }) => {
  console.log('UserList 渲染');
  
  return (
    <div>
      <h3>用户列表 ({users.length} 人)</h3>
      <ul style={{ listStyle: 'none', padding: 0 }}>
        {users.map(user => (
          <UserListItem key={user.id} user={user} />
        ))}
      </ul>
    </div>
  );
});

// 优化的用户列表项组件
const UserListItem = React.memo(({ user }) => {
  console.log(`UserListItem ${user.id} 渲染`);
  
  return (
    <li style={{ 
      padding: '10px', 
      margin: '5px 0', 
      border: '1px solid #ddd',
      borderRadius: '4px'
    }}>
      <strong>{user.name}</strong> - 年龄: {user.age} - 部门: {user.department}
    </li>
  );
});

export default DataProcessingDemo;

三、状态管理优化策略

1. 状态拆分与局部状态

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

// 错误的状态管理 - 所有状态放在一起
function BadStateManagement() {
  const [globalState, setGlobalState] = useState({
    user: { name: '用户', age: 25 },
    theme: 'light',
    notifications: [],
    sidebar: { collapsed: false },
    pageData: { title: '页面标题', content: '内容' }
  });
  
  const updateUser = (userData) => {
    setGlobalState(prev => ({
      ...prev,
      user: { ...prev.user, ...userData }
    }));
  };
  
  const toggleTheme = () => {
    setGlobalState(prev => ({
      ...prev,
      theme: prev.theme === 'light' ? 'dark' : 'light'
    }));
  };
  
  console.log('BadStateManagement 整体渲染');
  
  return (
    <div style={{ padding: '20px', border: '2px solid red', margin: '10px 0' }}>
      <h3>错误的状态管理</h3>
      <UserProfile 
        user={globalState.user} 
        onUpdate={updateUser} 
      />
      <ThemeToggle 
        theme={globalState.theme} 
        onToggle={toggleTheme} 
      />
    </div>
  );
}

// 正确的状态管理 - 状态拆分
function GoodStateManagement() {
  const [user, setUser] = useState({ name: '用户', age: 25 });
  const [theme, setTheme] = useState('light');
  
  const updateUser = (userData) => {
    setUser(prev => ({ ...prev, ...userData }));
  };
  
  const toggleTheme = () => {
    setTheme(prev => prev === 'light' ? 'dark' : 'light');
  };
  
  console.log('GoodStateManagement 渲染');
  
  return (
    <div style={{ padding: '20px', border: '2px solid green', margin: '10px 0' }}>
      <h3>正确的状态管理</h3>
      <UserProfile user={user} onUpdate={updateUser} />
      <ThemeToggle theme={theme} onToggle={toggleTheme} />
    </div>
  );
}

// 用户资料组件
const UserProfile = React.memo(({ user, onUpdate }) => {
  console.log('UserProfile 渲染');
  
  return (
    <div style={{ padding: '10px', background: '#f0f0f0', margin: '10px 0' }}>
      <h4>用户资料</h4>
      <p>姓名: {user.name}</p>
      <p>年龄: {user.age}</p>
      <button onClick={() => onUpdate({ age: user.age + 1 })}>
        增加年龄
      </button>
    </div>
  );
});

// 主题切换组件
const ThemeToggle = React.memo(({ theme, onToggle }) => {
  console.log('ThemeToggle 渲染');
  
  return (
    <div style={{ padding: '10px', background: '#f0f0f0', margin: '10px 0' }}>
      <h4>主题切换</h4>
      <p>当前主题: {theme}</p>
      <button onClick={onToggle}>
        切换主题
      </button>
    </div>
  );
});

// 状态管理优化演示组件
function StateManagementDemo() {
  return (
    <div style={{ padding: '20px' }}>
      <h2>状态管理优化策略</h2>
      <BadStateManagement />
      <GoodStateManagement />
    </div>
  );
}

export default StateManagementDemo;

2. Context优化与选择器模式

import React, { createContext, useContext, useReducer, useMemo, useCallback } from 'react';

// 未优化的Context
const UnoptimizedContext = createContext();

function UnoptimizedContextProvider({ children }) {
  const [state, setState] = useState({
    user: { id: 1, name: '张三', preferences: { theme: 'light' } },
    notifications: [],
    settings: { language: 'zh-CN' }
  });
  
  const value = { state, setState };
  
  return (
    <UnoptimizedContext.Provider value={value}>
      {children}
    </UnoptimizedContext.Provider>
  );
}

// 优化的Context - 拆分Context
const UserContext = createContext();
const SettingsContext = createContext();
const NotificationsContext = createContext();

function OptimizedContextProvider({ children }) {
  const [user, setUser] = useState({ id: 1, name: '张三', preferences: { theme: 'light' } });
  const [settings, setSettings] = useState({ language: 'zh-CN' });
  const [notifications, setNotifications] = useState([]);
  
  // 使用useMemo优化Context值
  const userValue = useMemo(() => ({ user, setUser }), [user]);
  const settingsValue = useMemo(() => ({ settings, setSettings }), [settings]);
  const notificationsValue = useMemo(() => ({ notifications, setNotifications }), [notifications]);
  
  return (
    <UserContext.Provider value={userValue}>
      <SettingsContext.Provider value={settingsValue}>
        <NotificationsContext.Provider value={notificationsValue}>
          {children}
        </NotificationsContext.Provider>
      </SettingsContext.Provider>
    </UserContext.Provider>
  );
}

// 选择器Hook - 避免不必要的重渲染
function useUserSelector(selector) {
  const { user } = useContext(UserContext);
  return useMemo(() => selector(user), [user, selector]);
}

function useSettingsSelector(selector) {
  const { settings } = useContext(SettingsContext);
  return useMemo(() => selector(settings), [settings, selector]);
}

// 使用选择器的组件
function UserProfileWithSelector() {
  const userName = useUserSelector(user => user.name);
  const userTheme = useUserSelector(user => user.preferences.theme);
  const language = useSettingsSelector(settings => settings.language);
  
  console.log('UserProfileWithSelector 渲染');
  
  return (
    <div style={{ padding: '15px', border: '1px solid blue', margin: '10px 0' }}>
      <h4>使用选择器的用户资料</h4>
      <p>姓名: {userName}</p>
      <p>主题: {userTheme}</p>
      <p>语言: {language}</p>
    </div>
  );
}

// 直接使用Context的组件
function UserProfileDirect() {
  const { user } = useContext(UserContext);
  const { settings } = useContext(SettingsContext);
  
  console.log('UserProfileDirect 渲染');
  
  return (
    <div style={{ padding: '15px', border: '1px solid green', margin: '10px 0' }}>
      <h4>直接使用Context的用户资料</h4>
      <p>姓名: {user.name}</p>
      <p>主题: {user.preferences.theme}</p>
      <p>语言: {settings.language}</p>
    </div>
  );
}

// Context优化演示
function ContextOptimizationDemo() {
  const [count, setCount] = useState(0);
  
  return (
    <OptimizedContextProvider>
      <div style={{ padding: '20px' }}>
        <h2>Context 优化策略</h2>
        
        <div style={{ marginBottom: '20px' }}>
          <p>父组件计数: {count}</p>
          <button onClick={() => setCount(count + 1)}>
            触发父组件重渲染
          </button>
        </div>
        
        <UserProfileWithSelector />
        <UserProfileDirect />
        
        <ContextUpdateDemo />
      </div>
    </OptimizedContextProvider>
  );
}

// 演示Context更新的组件
function ContextUpdateDemo() {
  const { setUser } = useContext(UserContext);
  const { setSettings } = useContext(SettingsContext);
  
  const updateUserName = useCallback(() => {
    setUser(prev => ({
      ...prev,
      name: `用户${Date.now()}`
    }));
  }, [setUser]);
  
  const updateLanguage = useCallback(() => {
    setSettings(prev => ({
      ...prev,
      language: prev.language === 'zh-CN' ? 'en-US' : 'zh-CN'
    }));
  }, [setSettings]);
  
  return (
    <div style={{ padding: '15px', border: '1px solid orange', margin: '10px 0' }}>
      <h4>Context 更新操作</h4>
      <button onClick={updateUserName} style={{ marginRight: '10px' }}>
        更新用户名
      </button>
      <button onClick={updateLanguage}>
        切换语言
      </button>
    </div>
  );
}

export default ContextOptimizationDemo;

四、代码分割与懒加载

1. React.lazy与Suspense

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

// 模拟重组件
const HeavyComponent = lazy(() => {
  return new Promise(resolve => {
    // 模拟网络延迟
    setTimeout(() => {
      resolve({
        default: () => {
          // 模拟重组件的昂贵渲染
          const startTime = performance.now();
          while (performance.now() - startTime < 100) {
            // 阻塞100ms模拟昂贵计算
          }
          
          return (
            <div style={{ padding: '20px', border: '2px solid purple' }}>
              <h3>重量级组件</h3>
              <p>这个组件加载和渲染都很昂贵</p>
              <p>加载时间: {new Date().toLocaleTimeString()}</p>
            </div>
          );
        }
      });
    }, 1000);
  });
});

// 错误边界组件
class ErrorBoundary extends React.Component {
  state = { hasError: false };
  
  static getDerivedStateFromError(error) {
    return { hasError: true };
  }
  
  componentDidCatch(error, errorInfo) {
    console.error('组件加载错误:', error, errorInfo);
  }
  
  render() {
    if (this.state.hasError) {
      return (
        <div style={{ padding: '20px', border: '2px solid red' }}>
          <h3>组件加载失败</h3>
          <button onClick={() => this.setState({ hasError: false })}>
            重试
          </button>
        </div>
      );
    }
    
    return this.props.children;
  }
}

function LazyLoadingDemo() {
  const [showHeavy, setShowHeavy] = useState(false);
  const [loadAttempts, setLoadAttempts] = useState(0);
  
  const handleToggle = () => {
    setShowHeavy(prev => !prev);
    if (!showHeavy) {
      setLoadAttempts(prev => prev + 1);
    }
  };
  
  return (
    <div style={{ padding: '20px' }}>
      <h2>代码分割与懒加载演示</h2>
      
      <div style={{ marginBottom: '20px' }}>
        <button onClick={handleToggle}>
          {showHeavy ? '隐藏' : '显示'} 重量级组件
        </button>
        <p>加载尝试次数: {loadAttempts}</p>
      </div>
      
      <ErrorBoundary>
        <Suspense fallback={
          <div style={{ 
            padding: '40px', 
            textAlign: 'center',
            border: '2px dashed #ccc'
          }}>
            <h3>🚀 组件加载中...</h3>
            <p>这需要一些时间，请耐心等待</p>
            <div style={{ 
              width: '100%', 
              height: '4px', 
              background: '#f0f0f0',
              marginTop: '20px'
            }}>
              <div style={{
                width: '70%',
                height: '100%',
                background: '#007acc',
                animation: 'loading 1.5s infinite'
              }}></div>
            </div>
          </div>
        }>
          {showHeavy && <HeavyComponent />}
        </Suspense>
      </ErrorBoundary>
      
      <style>
        {`
          @keyframes loading {
            0% { transform: translateX(-100%); }
            100% { transform: translateX(250%); }
          }
        `}
      </style>
    </div>
  );
}

export default LazyLoadingDemo;

2. 动态导入与路由分割

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

// 动态导入页面组件
const Home = React.lazy(() => import('./pages/Home'));
const About = React.lazy(() => import('./pages/About'));
const Products = React.lazy(() => import('./pages/Products'));
const Contact = React.lazy(() => import('./pages/Contact'));

// 加载中组件
const LoadingSpinner = () => (
  <div style={{ 
    display: 'flex', 
    justifyContent: 'center', 
    alignItems: 'center', 
    height: '200px' 
  }}>
    <div style={{
      width: '40px',
      height: '40px',
      border: '4px solid #f3f3f3',
      borderTop: '4px solid #007acc',
      borderRadius: '50%',
      animation: 'spin 1s linear infinite'
    }}></div>
  </div>
);

// 模拟页面组件
const MockHome = () => (
  <div style={{ padding: '20px' }}>
    <h2>首页</h2>
    <p>这是首页内容，按需加载</p>
  </div>
);

const MockAbout = () => (
  <div style={{ padding: '20px' }}>
    <h2>关于我们</h2>
    <p>关于页面内容</p>
  </div>
);

const MockProducts = () => (
  <div style={{ padding: '20px' }}>
    <h2>产品列表</h2>
    <p>产品页面包含大量组件</p>
  </div>
);

const MockContact = () => (
  <div style={{ padding: '20px' }}>
    <h2>联系我们</h2>
    <p>联系表单页面</p>
  </div>
);

// 路由配置
const routeConfig = [
  { path: '/', component: MockHome, name: '首页' },
  { path: '/about', component: MockAbout, name: '关于' },
  { path: '/products', component: MockProducts, name: '产品' },
  { path: '/contact', component: MockContact, name: '联系' },
];

function RouteBasedCodeSplitting() {
  return (
    <Router>
      <div style={{ minHeight: '100vh' }}>
        {/* 导航 */}
        <nav style={{ 
          padding: '20px', 
          background: '#f5f5f5',
          borderBottom: '1px solid #ddd'
        }}>
          <h1>代码分割路由演示</h1>
          <div>
            {routeConfig.map(route => (
              <Link
                key={route.path}
                to={route.path}
                style={{
                  marginRight: '15px',
                  padding: '8px 16px',
                  textDecoration: 'none',
                  color: '#007acc',
                  border: '1px solid #007acc',
                  borderRadius: '4px'
                }}
              >
                {route.name}
              </Link>
            ))}
          </div>
        </nav>
        
        {/* 路由内容 */}
        <main>
          <Suspense fallback={<LoadingSpinner />}>
            <Routes>
              {routeConfig.map(route => (
                <Route
                  key={route.path}
                  path={route.path}
                  element={<route.component />}
                />
              ))}
            </Routes>
          </Suspense>
        </main>
      </div>
      
      <style>
        {`
          @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
          }
        `}
      </style>
    </Router>
  );
}

export default RouteBasedCodeSplitting;

五、高级优化技巧

1. 虚拟列表与窗口化

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

// 虚拟列表组件
function VirtualList({ 
  items, 
  itemHeight = 50, 
  containerHeight = 400,
  overscan = 5 
}) {
  const [scrollTop, setScrollTop] = useState(0);
  
  // 计算可见区域
  const visibleRange = useMemo(() => {
    const startIndex = Math.floor(scrollTop / itemHeight);
    const visibleItemCount = Math.ceil(containerHeight / itemHeight);
    const endIndex = startIndex + visibleItemCount + overscan;
    
    return {
      start: Math.max(0, startIndex - overscan),
      end: Math.min(items.length, endIndex)
    };
  }, [scrollTop, items.length, itemHeight, containerHeight, overscan]);
  
  // 可见项
  const visibleItems = useMemo(() => {
    return items.slice(visibleRange.start, visibleRange.end);
  }, [items, visibleRange.start, visibleRange.end]);
  
  // 总高度
  const totalHeight = items.length * itemHeight;
  
  // 偏移量
  const offsetY = visibleRange.start * itemHeight;
  
  const handleScroll = useCallback((event) => {
    setScrollTop(event.target.scrollTop);
  }, []);
  
  return (
    <div 
      style={{ 
        height: containerHeight, 
        overflow: 'auto',
        border: '1px solid #ccc'
      }}
      onScroll={handleScroll}
    >
      <div style={{ height: totalHeight, position: 'relative' }}>
        <div style={{ transform: `translateY(${offsetY}px)` }}>
          {visibleItems.map((item, index) => (
            <VirtualListItem
              key={item.id}
              item={item}
              style={{ height: itemHeight }}
              absoluteIndex={visibleRange.start + index}
            />
          ))}
        </div>
      </div>
    </div>
  );
}

// 虚拟列表项
const VirtualListItem = React.memo(({ item, style, absoluteIndex }) => {
  // 模拟昂贵的渲染
  const renderStart = performance.now();
  while (performance.now() - renderStart < 2) {
    // 阻塞2ms模拟复杂渲染
  }
  
  return (
    <div style={{
      ...style,
      display: 'flex',
      alignItems: 'center',
      padding: '0 15px',
      borderBottom: '1px solid #eee',
      background: absoluteIndex % 2 === 0 ? '#f9f9f9' : 'white'
    }}>
      <span style={{ fontWeight: 'bold', marginRight: '10px' }}>
        {absoluteIndex + 1}.
      </span>
      <span>{item.name}</span>
      <span style={{ marginLeft: 'auto', color: '#666' }}>
        {item.email}
      </span>
    </div>
  );
});

// 虚拟列表演示
function VirtualListDemo() {
  const [itemCount, setItemCount] = useState(1000);
  const [useVirtual, setUseVirtual] = useState(true);
  
  // 生成测试数据
  const items = useMemo(() => {
    return Array.from({ length: itemCount }, (_, index) => ({
      id: index,
      name: `用户 ${index + 1}`,
      email: `user${index + 1}@example.com`
    }));
  }, [itemCount]);
  
  // 普通列表（对比用）
  function NormalList({ items }) {
    return (
      <div style={{ height: 400, overflow: 'auto', border: '1px solid #ccc' }}>
        {items.map((item, index) => (
          <div
            key={item.id}
            style={{
              height: 50,
              display: 'flex',
              alignItems: 'center',
              padding: '0 15px',
              borderBottom: '1px solid #eee',
              background: index % 2 === 0 ? '#f9f9f9' : 'white'
            }}
          >
            <span style={{ fontWeight: 'bold', marginRight: '10px' }}>
              {index + 1}.
            </span>
            <span>{item.name}</span>
            <span style={{ marginLeft: 'auto', color: '#666' }}>
              {item.email}
            </span>
          </div>
        ))}
      </div>
    );
  }
  
  return (
    <div style={{ padding: '20px' }}>
      <h2>虚拟列表优化演示</h2>
      
      <div style={{ marginBottom: '20px' }}>
        <label>
          项目数量:
          <input
            type="number"
            value={itemCount}
            onChange={(e) => setItemCount(parseInt(e.target.value) || 0)}
            style={{ margin: '0 10px', padding: '5px' }}
          />
        </label>
        
        <label>
          <input
            type="checkbox"
            checked={useVirtual}
            onChange={(e) => setUseVirtual(e.target.checked)}
            style={{ marginRight: '5px' }}
          />
          使用虚拟列表
        </label>
      </div>
      
      <div style={{ marginBottom: '10px' }}>
        <p>
          当前显示: {itemCount} 个项目 | 
          模式: {useVirtual ? '虚拟列表' : '普通列表'}
        </p>
      </div>
      
      {useVirtual ? (
        <VirtualList items={items} />
      ) : (
        <NormalList items={items} />
      )}
      
      <div style={{ marginTop: '20px', padding: '10px', background: '#f5f5f5' }}>
        <h4>性能说明:</h4>
        <ul>
          <li>虚拟列表只渲染可见区域的项目，大幅提升性能</li>
          <li>普通列表会渲染所有项目，在数据量大时性能急剧下降</li>
          <li>尝试调整项目数量观察两种模式的差异</li>
        </ul>
      </div>
    </div>
  );
}

export default VirtualListDemo;

2. Web Worker与离屏计算

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

// 创建Web Worker
const createWorker = (workerFunction) => {
  const workerCode = `
    self.onmessage = function(e) {
      const result = (${workerFunction.toString()})(e.data);
      self.postMessage(result);
    };
  `;
  
  const blob = new Blob([workerCode], { type: 'application/javascript' });
  return new Worker(URL.createObjectURL(blob));
};

// 昂贵的计算函数
const expensiveCalculation = (data) => {
  const { numbers, operation } = data;
  
  console.log('Web Worker: 开始计算', numbers.length, '个数字');
  
  const startTime = performance.now();
  
  let result;
  switch (operation) {
    case 'sum':
      result = numbers.reduce((acc, num) => acc + num, 0);
      break;
    case 'average':
      const sum = numbers.reduce((acc, num) => acc + num, 0);
      result = sum / numbers.length;
      break;
    case 'max':
      result = Math.max(...numbers);
      break;
    case 'min':
      result = Math.min(...numbers);
      break;
    default:
      result = 0;
  }
  
  // 模拟更复杂的计算
  for (let i = 0; i < 1000000; i++) {
    Math.sqrt(i) * Math.random();
  }
  
  const endTime = performance.now();
  console.log(`Web Worker: 计算完成，耗时 ${(endTime - startTime).toFixed(2)}ms`);
  
  return {
    result,
    calculationTime: endTime - startTime,
    dataSize: numbers.length
  };
};

function WebWorkerDemo() {
  const [numbers, setNumbers] = useState([]);
  const [operation, setOperation] = useState('sum');
  const [result, setResult] = useState(null);
  const [isCalculating, setIsCalculating] = useState(false);
  const [calculationMethod, setCalculationMethod] = useState('worker');
  const workerRef = useRef(null);
  
  // 初始化Web Worker
  useEffect(() => {
    workerRef.current = createWorker(expensiveCalculation);
    
    workerRef.current.onmessage = (e) => {
      setResult(e.data);
      setIsCalculating(false);
    };
    
    workerRef.current.onerror = (error) => {
      console.error('Web Worker 错误:', error);
      setIsCalculating(false);
    };
    
    return () => {
      if (workerRef.current) {
        workerRef.current.terminate();
      }
    };
  }, []);
  
  // 生成测试数据
  const generateNumbers = useCallback((count) => {
    const newNumbers = Array.from({ length: count }, () => 
      Math.floor(Math.random() * 1000)
    );
    setNumbers(newNumbers);
    setResult(null);
  }, []);
  
  // 使用Web Worker计算
  const calculateWithWorker = useCallback(() => {
    if (!workerRef.current) return;
    
    setIsCalculating(true);
    workerRef.current.postMessage({
      numbers,
      operation
    });
  }, [numbers, operation]);
  
  // 在主线程计算（会阻塞UI）
  const calculateInMainThread = useCallback(() => {
    setIsCalculating(true);
    
    // 使用setTimeout让UI有机会更新加载状态
    setTimeout(() => {
      const startTime = performance.now();
      const calculationResult = expensiveCalculation({ numbers, operation });
      const endTime = performance.now();
      
      setResult({
        ...calculationResult,
        uiBlockedTime: endTime - startTime
      });
      setIsCalculating(false);
    }, 100);
  }, [numbers, operation]);
  
  const handleCalculate = useCallback(() => {
    if (calculationMethod === 'worker') {
      calculateWithWorker();
    } else {
      calculateInMainThread();
    }
  }, [calculationMethod, calculateWithWorker, calculateInMainThread]);
  
  return (
    <div style={{ padding: '20px' }}>
      <h2>Web Worker 性能优化演示</h2>
      
      <div style={{ marginBottom: '20px' }}>
        <button 
          onClick={() => generateNumbers(1000000)}
          style={{ marginRight: '10px' }}
        >
          生成100万数字
        </button>
        
        <button 
          onClick={() => generateNumbers(5000000)}
          disabled={isCalculating}
        >
          生成500万数字
        </button>
        
        <div style={{ marginTop: '10px' }}>
          <span>当前数据量: {numbers.length.toLocaleString()} 个数字</span>
        </div>
      </div>
      
      <div style={{ marginBottom: '20px' }}>
        <label>
          计算操作:
          <select 
            value={operation} 
            onChange={(e) => setOperation(e.target.value)}
            style={{ marginLeft: '10px', padding: '5px' }}
          >
            <option value="sum">求和</option>
            <option value="average">平均值</option>
            <option value="max">最大值</option>
            <option value="min">最小值</option>
          </select>
        </label>
        
        <label style={{ marginLeft: '20px' }}>
          计算方式:
          <select 
            value={calculationMethod} 
            onChange={(e) => setCalculationMethod(e.target.value)}
            style={{ marginLeft: '10px', padding: '5px' }}
          >
            <option value="worker">Web Worker</option>
            <option value="main">主线程</option>
          </select>
        </label>
      </div>
      
      <div style={{ marginBottom: '20px' }}>
        <button 
          onClick={handleCalculate}
          disabled={isCalculating || numbers.length === 0}
          style={{ 
            padding: '10px 20px',
            background: isCalculating ? '#ccc' : '#007acc',
            color: 'white',
            border: 'none',
            borderRadius: '4px'
          }}
        >
          {isCalculating ? '计算中...' : '开始计算'}
        </button>
      </div>
      
      {isCalculating && (
        <div style={{ 
          padding: '10px', 
          background: '#fff3cd', 
          border: '1px solid #ffeaa7',
          marginBottom: '20px'
        }}>
          {calculationMethod === 'worker' 
            ? '🔧 在Web Worker中计算，UI保持响应...' 
            : '⚠️ 在主线程计算，UI可能会卡顿...'}
        </div>
      )}
      
      {result && (
        <div style={{ 
          padding: '15px', 
          background: '#d1ecf1', 
          border: '1px solid #bee5eb',
          borderRadius: '4px'
        }}>
          <h3>计算结果</h3>
          <p>操作: {operation}</p>
          <p>结果: {result.result}</p>
          <p>计算耗时: {result.calculationTime.toFixed(2)}ms</p>
          <p>数据量: {result.dataSize.toLocaleString()} 个数字</p>
          {result.uiBlockedTime && (
            <p style={{ color: '#dc3545' }}>
              UI阻塞时间: {result.uiBlockedTime.toFixed(2)}ms
            </p>
          )}
        </div>
      )}
      
      <div style={{ marginTop: '20px', padding: '15px', background: '#f8f9fa' }}>
        <h4>性能对比说明:</h4>
        <ul>
          <li><strong>Web Worker</strong>: 在后台线程计算，不阻塞UI</li>
          <li><strong>主线程</strong>: 直接在主线程计算，会阻塞UI交互</li>
          <li>尝试在计算过程中点击按钮或输入文本，体验差异</li>
        </ul>
      </div>
    </div>
  );
}

export default WebWorkerDemo;

六、性能监控与分析

1. React DevTools性能分析

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

// Profiler 回调函数
const onRenderCallback = (id, phase, actualDuration, baseDuration, startTime, commitTime) => {
  console.log('Profiler 数据:', {
    id,
    phase,
    actualDuration: `${actualDuration.toFixed(2)}ms`,
    baseDuration: `${baseDuration.toFixed(2)}ms`,
    startTime: `${startTime.toFixed(2)}ms`,
    commitTime: `${commitTime.toFixed(2)}ms`
  });
};

// 性能监控组件
function PerformanceMonitor() {
  const [renderCount, setRenderCount] = useState(0);
  const [isMonitoring, setIsMonitoring] = useState(false);
  
  const performanceData = useRef([]);
  
  const customOnRenderCallback = (id, phase, actualDuration, baseDuration, startTime, commitTime) => {
    if (isMonitoring) {
      performanceData.current.push({
        id,
        phase,
        actualDuration,
        baseDuration,
        startTime,
        commitTime,
        timestamp: Date.now()
      });
    }
  };
  
  const startMonitoring = () => {
    performanceData.current = [];
    setIsMonitoring(true);
  };
  
  const stopMonitoring = () => {
    setIsMonitoring(false);
    
    // 分析性能数据
    const data = performanceData.current;
    if (data.length > 0) {
      const totalDuration = data.reduce((sum, item) => sum + item.actualDuration, 0);
      const avgDuration = totalDuration / data.length;
      
      console.log('性能分析报告:', {
        '总渲染次数': data.length,
        '总耗时': `${totalDuration.toFixed(2)}ms`,
        '平均耗时': `${avgDuration.toFixed(2)}ms`,
        '最慢渲染': `${Math.max(...data.map(d => d.actualDuration)).toFixed(2)}ms`
      });
    }
  };
  
  return (
    <div style={{ padding: '20px' }}>
      <h2>React 性能监控</h2>
      
      <div style={{ marginBottom: '20px' }}>
        <button 
          onClick={startMonitoring}
          disabled={isMonitoring}
          style={{ marginRight: '10px' }}
        >
          开始监控
        </button>
        
        <button 
          onClick={stopMonitoring}
          disabled={!isMonitoring}
          style={{ marginRight: '10px' }}
        >
          停止监控
        </button>
        
        <button onClick={() => setRenderCount(prev => prev + 1)}>
          触发重渲染 ({renderCount})
        </button>
      </div>
      
      {isMonitoring && (
        <div style={{ 
          padding: '10px', 
          background: '#d4edda', 
          border: '1px solid #c3e6cb',
          marginBottom: '20px'
        }}>
          🎯 性能监控中... 打开浏览器控制台查看详细数据
        </div>
      )}
      
      <Profiler id="MonitoredComponent" onRender={customOnRenderCallback}>
        <MonitoredComponent renderCount={renderCount} />
      </Profiler>
    </div>
  );
}

// 被监控的组件
const MonitoredComponent = React.memo(({ renderCount }) => {
  const [localState, setLocalState] = useState(0);
  
  // 模拟一些计算
  const calculatedValue = useMemo(() => {
    let result = 0;
    for (let i = 0; i < 100000; i++) {
      result += Math.sqrt(i);
    }
    return result;
  }, []);
  
  return (
    <div style={{ padding: '20px', border: '2px solid #007acc' }}>
      <h3>被监控的组件</h3>
      <p>父组件渲染次数: {renderCount}</p>
      <p>本地状态: {localState}</p>
      <p>计算值: {calculatedValue.toFixed(2)}</p>
      
      <button onClick={() => setLocalState(prev => prev + 1)}>
        更新本地状态
      </button>
      
      <ChildComponent />
    </div>
  );
});

const ChildComponent = React.memo(() => {
  console.log('子组件渲染');
  
  return (
    <div style={{ 
      padding: '10px', 
      marginTop: '10px', 
      background: '#f8f9fa',
      border: '1px solid #dee2e6'
    }}>
      <p>子组件内容</p>
    </div>
  );
});

export default PerformanceMonitor;

七、总结与最佳实践

通过系统性地应用这些React性能优化技术，开发者可以：

1. 组件级优化

• 合理使用React.memo避免不必要的重渲染
• 正确使用useMemo和useCallback缓存计算和函数
• 通过状态拆分减少渲染范围

2. 架构级优化

• 实现代码分割和懒加载减少初始包体积
• 使用虚拟列表处理大数据量渲染
• 通过Web Worker卸载昂贵计算

3. 工具链支持

• 利用React DevTools进行性能分析
• 使用Profiler API监控生产环境性能
• 建立性能监控和警报系统

4. 开发规范

• 建立组件性能审查流程
• 制定状态管理最佳实践
• 培训团队掌握性能优化技能

通过掌握这些优化技术，开发者可以构建出高性能、可维护的React应用程序，为用户提供流畅的使用体验。