使用自定义 Hooks 和 Memoization 优化 React 重新渲染

React 的虚拟 DOM 和渲染系统是构建动态用户界面的强大工具。然而，不必要的重新渲染会影响应用程序的性能。在本指南中，我们将探索使用自定义钩子和记忆技术优化 React 组件的实用策略。

理解 React 重新渲染

在深入研究优化技术之前，了解触发 React 重新渲染的原因至关重要：

用于性能优化的自定义钩子

1. useDeepComparison Hook

处理复杂对象或数组作为依赖项时会出现一个常见的性能问题：

const useDeepComparison = (value) => {
  const ref = useRef();

  if (!isEqual(value, ref.current)) {
    ref.current = value;
  }

  return ref.current;
};

// Usage Example
const MyComponent = ({ complexData }) => {
  const memoizedData = useDeepComparison(complexData);

  useEffect(() => {
    // This effect will only run when complexData actually changes
    performExpensiveOperation(memoizedData);
  }, [memoizedData]);
};

2. useThrottledCallback 钩子

为了处理滚动事件或实时数据等频繁更新：

const useThrottledCallback = (callback, delay) => {
  const [ready, setReady] = useState(true);
  const timeoutRef = useRef();

  return useCallback((...args) => {
    if (!ready) return;

    callback(...args);
    setReady(false);

    timeoutRef.current = setTimeout(() => {
      setReady(true);
    }, delay);
  }, [callback, delay, ready]);
};

// Usage Example
const ScrollComponent = () => {
  const handleScroll = useThrottledCallback(() => {
    // Handle scroll event
  }, 200);

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

有效的记忆策略

1. 使用 useMemo 进行值记忆

`useMemo` 钩子对于记忆昂贵的计算或防止不必要的值重新创建至关重要：

const ExpensiveCalculationComponent = ({ data }) => {
  // Memoize expensive calculation
  const processedData = useMemo(() => {
    return data.map(item => {
      // Expensive processing...
      return complexCalculation(item);
    });
  }, [data]); // Only recompute when data changes

  // Memoize object to prevent unnecessary re-renders
  const styles = useMemo(() => ({
    backgroundColor: theme.primary,
    padding: spacing.medium,
    // Complex styles...
  }), [theme.primary, spacing.medium]);

  return (
    

      {processedData.map(item => (
        
      ))}
    
  );
};

// Common useMemo use cases:
const TableComponent = ({ rows, columns, filters }) => {
  // Memoize filtered data
  const filteredRows = useMemo(() => {
    return rows.filter(row => 
      filters.every(filter => filter(row))
    );
  }, [rows, filters]);

  // Memoize sorted data based on filtered results
  const sortedData = useMemo(() => {
    return [...filteredRows].sort((a, b) => 
      sortingFunction(a, b)
    );
  }, [filteredRows]);

  // Memoize aggregations
  const totals = useMemo(() => {
    return columns.reduce((acc, column) => ({
      ...acc,
      [column.key]: calculateColumnTotal(sortedData, column)
    }), {});
  }, [columns, sortedData]);

  return (
    
  );
};
何时使用 `useMemo`：
昂贵的计算不需要在每次渲染时重新计算
在其他钩子中引用相等依赖关系
防止重新创建子组件道具中使用的复杂对象
优化情境价值创造
2. 使用 React.memo 实现组件记忆化
const ExpensiveComponent = React.memo(({ data }) => {
  // Expensive rendering logic
  return (
    

      {data.map(item => (
        
      ))}
    
  );
}, (prevProps, nextProps) => {
  // Custom comparison function
  return isEqual(prevProps.data, nextProps.data);
});
2.回调记忆模式
const ParentComponent = () => {
  const [items, setItems] = useState([]);

  const handleItemUpdate = useCallback((id, newValue) => {
    setItems(prevItems => 
      prevItems.map(item => 
        item.id === id ? { ...item, value: newValue } : item
      )
    );
  }, []); // Empty dependency array since we use functional updates

  return (
    

      {items.map(item => (
        
      ))}
    
  );
};
常见陷阱及解决方案
1. 内联对象创建
❌有问题：
const Component = () => (
  
);
✅优化：
const Component = () => {
  const style = useMemo(() => ({ margin: 20, padding: 10 }), []);
  const config = useMemo(() => ({ timeout: 500 }), []);

  return ;
};
2. 上下文优化
不要提供大型上下文对象，而是将其拆分为更小、更有针对性的上下文：
const UserContext = createContext();
const ThemeContext = createContext();
const SettingsContext = createContext();

const AppProvider = ({ children }) => {
  const [user, setUser] = useState(null);
  const [theme, setTheme] = useState('light');
  const [settings, setSettings] = useState({});

  const userValue = useMemo(() => ({ user, setUser }), [user]);
  const themeValue = useMemo(() => ({ theme, setTheme }), [theme]);
  const settingsValue = useMemo(() => ({ settings, setSettings }), [settings]);

  return (
    
      
        
          {children}
        
      
    
  );
};
性能监控
要识别不必要的重新渲染并验证优化效果，请执行以下操作：
使用 React Developer Tools 的 Profiler
实现以下调试钩子：
const useRenderTracking = (componentName) => {
  const renderCount = useRef(0);

  useEffect(() => {
    renderCount.current += 1;
    console.log(`${componentName} rendered ${renderCount.current} times`);
  });
};

// Usage
const MyComponent = () => {
  useRenderTracking('MyComponent');
  // ... component logic
};
最佳实践摘要
对于经常接收相同 props 但不需要重新渲染的组件，请使用 React.memo()
实现复杂比较和特殊行为的自定义钩子
当将回调作为 props 传递给已记忆的子组件时，使用 useCallback 来记忆回调
拆分上下文提供程序以最大限度地减少不必要的重新渲染
使用分析工具来识别性能瓶颈
考虑记忆本身的成本——不要过度优化
结论
优化 React 重新渲染是性能和代码复杂性之间的平衡。从最简单的解决方案开始，并根据实际性能测量进行优化。请记住，过早优化可能会导致代码更难维护，并且不会带来显著的性能优势。
通过深思熟虑地实施这些模式并衡量其影响，您可以创建即使在复杂性扩大的情况下也能保持出色性能的 React 应用程序。
© 2022, 北京探客时代网络科技有限公司 
京ICP备2022008592号-2 信息举报