发布于

React性能优化实战技巧：useMemo、useCallback与渲染优化心得

作者

React性能优化实战技巧：useMemo、useCallback与渲染优化心得

React应用的性能优化是前端开发中的重要课题。本文将分享React性能优化的实战技巧，重点关注Hooks的正确使用和渲染优化策略。

React渲染机制理解

渲染触发条件

// 理解什么会触发重新渲染
function ParentComponent() {
  const [count, setCount] = useState(0);
  const [name, setName] = useState('John');
  
  // ❌ 每次渲染都会创建新的对象
  const userInfo = {
    name: name,
    timestamp: Date.now()
  };
  
  // ❌ 每次渲染都会创建新的函数
  const handleClick = () => {
    setCount(count + 1);
  };
  
  return (
    <div>
      <ChildComponent userInfo={userInfo} onClick={handleClick} />
      <button onClick={() => setCount(count + 1)}>Count: {count}</button>
    </div>
  );
}

// 子组件会因为props变化而重新渲染
function ChildComponent({ userInfo, onClick }) {
  console.log('ChildComponent rendered'); // 每次都会执行
  return <div onClick={onClick}>{userInfo.name}</div>;
}

优化后的版本

// ✅ 优化后的实现
function ParentComponent() {
  const [count, setCount] = useState(0);
  const [name, setName] = useState('John');
  
  // 使用useMemo缓存对象
  const userInfo = useMemo(() => ({
    name: name,
    timestamp: Date.now()
  }), [name]); // 只有name变化时才重新创建
  
  // 使用useCallback缓存函数
  const handleClick = useCallback(() => {
    setCount(prev => prev + 1); // 使用函数式更新
  }, []); // 空依赖数组，函数永远不变
  
  return (
    <div>
      <MemoizedChild userInfo={userInfo} onClick={handleClick} />
      <button onClick={handleClick}>Count: {count}</button>
    </div>
  );
}

// 使用React.memo包装子组件
const MemoizedChild = React.memo(function ChildComponent({ userInfo, onClick }) {
  console.log('ChildComponent rendered'); // 只在props真正变化时执行
  return <div onClick={onClick}>{userInfo.name}</div>;
});

useMemo深度应用

计算密集型操作优化

function ExpensiveComponent({ items, filter }) {
  // ❌ 每次渲染都会执行昂贵的计算
  const expensiveValue = items
    .filter(item => item.category === filter)
    .map(item => ({ ...item, processed: true }))
    .sort((a, b) => a.priority - b.priority);
  
  return <div>{expensiveValue.length} items</div>;
}

// ✅ 使用useMemo优化
function OptimizedExpensiveComponent({ items, filter }) {
  const expensiveValue = useMemo(() => {
    console.log('Computing expensive value...'); // 只在依赖变化时执行
    
    return items
      .filter(item => item.category === filter)
      .map(item => ({ ...item, processed: true }))
      .sort((a, b) => a.priority - b.priority);
  }, [items, filter]);
  
  return <div>{expensiveValue.length} items</div>;
}

复杂对象比较优化

function UserProfile({ user, settings }) {
  // 使用useMemo避免不必要的对象创建
  const userDisplayInfo = useMemo(() => {
    return {
      fullName: `${user.firstName} ${user.lastName}`,
      avatar: user.avatar || '/default-avatar.png',
      theme: settings.theme,
      locale: settings.locale
    };
  }, [user.firstName, user.lastName, user.avatar, settings.theme, settings.locale]);
  
  // 复杂的样式计算
  const computedStyles = useMemo(() => {
    const baseStyles = {
      backgroundColor: settings.theme === 'dark' ? '#333' : '#fff',
      color: settings.theme === 'dark' ? '#fff' : '#333'
    };
    
    if (user.isPremium) {
      baseStyles.border = '2px solid gold';
      baseStyles.boxShadow = '0 0 10px rgba(255, 215, 0, 0.3)';
    }
    
    return baseStyles;
  }, [settings.theme, user.isPremium]);
  
  return (
    <div style={computedStyles}>
      <img src={userDisplayInfo.avatar} alt={userDisplayInfo.fullName} />
      <h2>{userDisplayInfo.fullName}</h2>
    </div>
  );
}

useCallback实战技巧

事件处理函数优化

function TodoList({ todos, onToggle, onDelete }) {
  const [filter, setFilter] = useState('all');
  
  // ❌ 每次渲染都创建新函数
  const handleFilterChange = (newFilter) => {
    setFilter(newFilter);
  };
  
  // ✅ 使用useCallback优化
  const handleFilterChange = useCallback((newFilter) => {
    setFilter(newFilter);
  }, []);
  
  // 复杂的事件处理逻辑
  const handleTodoAction = useCallback((todoId, action) => {
    switch (action) {
      case 'toggle':
        onToggle(todoId);
        break;
      case 'delete':
        onDelete(todoId);
        break;
      default:
        break;
    }
  }, [onToggle, onDelete]);
  
  const filteredTodos = useMemo(() => {
    switch (filter) {
      case 'completed':
        return todos.filter(todo => todo.completed);
      case 'active':
        return todos.filter(todo => !todo.completed);
      default:
        return todos;
    }
  }, [todos, filter]);
  
  return (
    <div>
      <FilterButtons onFilterChange={handleFilterChange} currentFilter={filter} />
      {filteredTodos.map(todo => (
        <TodoItem
          key={todo.id}
          todo={todo}
          onAction={handleTodoAction}
        />
      ))}
    </div>
  );
}

const TodoItem = React.memo(({ todo, onAction }) => {
  return (
    <div>
      <span>{todo.text}</span>
      <button onClick={() => onAction(todo.id, 'toggle')}>
        {todo.completed ? 'Undo' : 'Complete'}
      </button>
      <button onClick={() => onAction(todo.id, 'delete')}>Delete</button>
    </div>
  );
});

自定义Hook中的优化

// 自定义Hook的性能优化
function useDebounce(value, delay) {
  const [debouncedValue, setDebouncedValue] = useState(value);
  
  useEffect(() => {
    const handler = setTimeout(() => {
      setDebouncedValue(value);
    }, delay);
    
    return () => {
      clearTimeout(handler);
    };
  }, [value, delay]);
  
  return debouncedValue;
}

function useOptimizedSearch(initialQuery = '') {
  const [query, setQuery] = useState(initialQuery);
  const [results, setResults] = useState([]);
  const [loading, setLoading] = useState(false);
  
  const debouncedQuery = useDebounce(query, 300);
  
  // 使用useCallback缓存搜索函数
  const search = useCallback(async (searchQuery) => {
    if (!searchQuery.trim()) {
      setResults([]);
      return;
    }
    
    setLoading(true);
    try {
      const response = await fetch(`/api/search?q=${encodeURIComponent(searchQuery)}`);
      const data = await response.json();
      setResults(data.results);
    } catch (error) {
      console.error('Search failed:', error);
      setResults([]);
    } finally {
      setLoading(false);
    }
  }, []);
  
  useEffect(() => {
    search(debouncedQuery);
  }, [debouncedQuery, search]);
  
  // 返回稳定的引用
  return useMemo(() => ({
    query,
    setQuery,
    results,
    loading,
    search
  }), [query, results, loading, search]);
}

React.memo高级用法

自定义比较函数

// 复杂props的比较优化
const ComplexComponent = React.memo(({ user, settings, data }) => {
  return (
    <div>
      <h2>{user.name}</h2>
      <p>Theme: {settings.theme}</p>
      <div>Data items: {data.length}</div>
    </div>
  );
}, (prevProps, nextProps) => {
  // 自定义比较逻辑
  return (
    prevProps.user.name === nextProps.user.name &&
    prevProps.settings.theme === nextProps.settings.theme &&
    prevProps.data.length === nextProps.data.length
  );
});

// 使用shallowEqual进行浅比较
import { shallowEqual } from 'react-redux';

const ShallowComponent = React.memo(({ items }) => {
  return (
    <ul>
      {items.map(item => (
        <li key={item.id}>{item.name}</li>
      ))}
    </ul>
  );
}, shallowEqual);

条件渲染优化

function ConditionalRenderingOptimized({ showDetails, user, stats }) {
  // 将条件渲染的部分拆分成独立组件
  const UserBasicInfo = useMemo(() => (
    <div>
      <h2>{user.name}</h2>
      <p>{user.email}</p>
    </div>
  ), [user.name, user.email]);
  
  return (
    <div>
      {UserBasicInfo}
      {showDetails && <UserDetails user={user} stats={stats} />}
    </div>
  );
}

const UserDetails = React.memo(({ user, stats }) => {
  return (
    <div>
      <p>Joined: {user.joinDate}</p>
      <p>Posts: {stats.postCount}</p>
      <p>Followers: {stats.followerCount}</p>
    </div>
  );
});

列表渲染优化

虚拟滚动实现

function VirtualizedList({ items, itemHeight = 50, containerHeight = 400 }) {
  const [scrollTop, setScrollTop] = useState(0);
  
  const visibleItems = useMemo(() => {
    const startIndex = Math.floor(scrollTop / itemHeight);
    const endIndex = Math.min(
      startIndex + Math.ceil(containerHeight / itemHeight) + 1,
      items.length
    );
    
    return items.slice(startIndex, endIndex).map((item, index) => ({
      ...item,
      index: startIndex + index
    }));
  }, [items, scrollTop, itemHeight, containerHeight]);
  
  const totalHeight = items.length * itemHeight;
  const offsetY = Math.floor(scrollTop / itemHeight) * itemHeight;
  
  const handleScroll = useCallback((e) => {
    setScrollTop(e.target.scrollTop);
  }, []);
  
  return (
    <div
      style={{ height: containerHeight, overflow: 'auto' }}
      onScroll={handleScroll}
    >
      <div style={{ height: totalHeight, position: 'relative' }}>
        <div style={{ transform: `translateY(${offsetY}px)` }}>
          {visibleItems.map(item => (
            <VirtualizedItem
              key={item.id}
              item={item}
              height={itemHeight}
            />
          ))}
        </div>
      </div>
    </div>
  );
}

const VirtualizedItem = React.memo(({ item, height }) => {
  return (
    <div style={{ height, padding: '10px', borderBottom: '1px solid #eee' }}>
      <h4>{item.title}</h4>
      <p>{item.description}</p>
    </div>
  );
});

大列表优化策略

function OptimizedLargeList({ items, onItemClick }) {
  // 使用useCallback避免每次渲染创建新函数
  const handleItemClick = useCallback((itemId) => {
    onItemClick(itemId);
  }, [onItemClick]);
  
  // 分批渲染大列表
  const [visibleCount, setVisibleCount] = useState(50);
  
  const loadMore = useCallback(() => {
    setVisibleCount(prev => Math.min(prev + 50, items.length));
  }, [items.length]);
  
  const visibleItems = useMemo(() => {
    return items.slice(0, visibleCount);
  }, [items, visibleCount]);
  
  return (
    <div>
      {visibleItems.map(item => (
        <ListItem
          key={item.id}
          item={item}
          onClick={handleItemClick}
        />
      ))}
      {visibleCount < items.length && (
        <button onClick={loadMore}>Load More</button>
      )}
    </div>
  );
}

const ListItem = React.memo(({ item, onClick }) => {
  const handleClick = useCallback(() => {
    onClick(item.id);
  }, [item.id, onClick]);
  
  return (
    <div onClick={handleClick} className="list-item">
      <h3>{item.title}</h3>
      <p>{item.description}</p>
    </div>
  );
});

性能监控与调试

性能分析工具

// 性能监控Hook
function usePerformanceMonitor(componentName) {
  const renderCount = useRef(0);
  const startTime = useRef(performance.now());
  
  useEffect(() => {
    renderCount.current += 1;
    const endTime = performance.now();
    const renderTime = endTime - startTime.current;
    
    console.log(`${componentName} render #${renderCount.current}: ${renderTime.toFixed(2)}ms`);
    startTime.current = performance.now();
  });
  
  return renderCount.current;
}

// 使用示例
function MonitoredComponent({ data }) {
  const renderCount = usePerformanceMonitor('MonitoredComponent');
  
  return (
    <div>
      <p>Render count: {renderCount}</p>
      <p>Data length: {data.length}</p>
    </div>
  );
}

渲染原因追踪

// 追踪重新渲染的原因
function useWhyDidYouUpdate(name, props) {
  const previous = useRef();
  
  useEffect(() => {
    if (previous.current) {
      const allKeys = Object.keys({ ...previous.current, ...props });
      const changedProps = {};
      
      allKeys.forEach(key => {
        if (previous.current[key] !== props[key]) {
          changedProps[key] = {
            from: previous.current[key],
            to: props[key]
          };
        }
      });
      
      if (Object.keys(changedProps).length) {
        console.log('[why-did-you-update]', name, changedProps);
      }
    }
    
    previous.current = props;
  });
}

// 使用示例
function TrackedComponent(props) {
  useWhyDidYouUpdate('TrackedComponent', props);
  
  return <div>{props.children}</div>;
}

最佳实践总结

性能优化检查清单

// ✅ React性能优化最佳实践
const OptimizedComponent = React.memo(({ data, onAction }) => {
  // 1. 使用useMemo缓存计算结果
  const processedData = useMemo(() => {
    return data.filter(item => item.active).sort((a, b) => a.priority - b.priority);
  }, [data]);
  
  // 2. 使用useCallback缓存函数
  const handleAction = useCallback((id, type) => {
    onAction(id, type);
  }, [onAction]);
  
  // 3. 避免在渲染中创建对象
  const containerStyle = useMemo(() => ({
    padding: '20px',
    backgroundColor: '#f5f5f5'
  }), []);
  
  return (
    <div style={containerStyle}>
      {processedData.map(item => (
        <OptimizedItem
          key={item.id}
          item={item}
          onAction={handleAction}
        />
      ))}
    </div>
  );
});

总结

React性能优化的核心要点：

  1. 理解渲染机制：掌握什么会触发重新渲染
  2. 正确使用Hooks：useMemo用于值，useCallback用于函数
  3. 合理使用React.memo：避免不必要的组件重新渲染
  4. 优化列表渲染：虚拟滚动、分批加载等技术
  5. 性能监控：使用工具追踪性能问题

记住，性能优化要适度，过度优化可能会增加代码复杂度。始终以用户体验为导向，在性能和可维护性之间找到平衡点。

在 Twitter 上讨论 • 在 GitHub 上查看