React性能优化：useMemo和useCallback的误用与正确实践

// 不必要的useMemo使用
const userData = useMemo(() => {
  return { name: 'John', age: 30 };
}, []); // 依赖数组为空，但值永远不会改变

// 更糟的是这种用法
const calculatedValue = useMemo(() => {
  return expensiveCalculation(propA);
}, [propA, expensiveCalculation]); // expensiveCalculation在每次渲染都会重新创建

// 简单值不需要useMemo
const userData = { name: 'John', age: 30 };

// 只有当计算真正昂贵时才使用useMemo
const calculatedValue = useMemo(() => {
  return expensiveCalculation(propA);
}, [propA]); // 确保expensiveCalculation是稳定的

// 使用useCallback避免函数重建
const stableFunction = useCallback(() => {
  // 函数逻辑
}, [dependency]);

const MyComponent = ({ items, onItemSelect }) => {
  const processedItems = useMemo(() => {
    return items.map(item => transformItem(item));
  }, [items]); // 这里items是数组，每次都会重新创建

  return <ChildComponent items={processedItems} onSelect={onItemSelect} />;
};

// 方案1: 确保items引用稳定
const [items, setItems] = useState(initialItems);

// 方案2: 使用useMemo包装items
const stableItems = useMemo(() => rawItems, [rawItems]);

// 方案3: 自定义比较函数
const processedItems = useMemo(() => {
  return items.map(item => transformItem(item));
}, [items]); // 配合React.memo使用浅比较

// 子组件使用React.memo
const ChildComponent = React.memo(({ items, onSelect }) => {
  // 组件实现
}, (prevProps, nextProps) => {
  // 自定义比较逻辑
  return prevProps.items.length === nextProps.items.length &&
         prevProps.onSelect === nextProps.onSelect;
});

// 场景1: 昂贵的计算
const expensiveValue = useMemo(() => {
  let result = 0;
  for (let i = 0; i < 1000000; i++) {
    result += data[i % data.length] * Math.random();
  }
  return result;
}, [data]); // 只有当data变化时才重新计算

// 场景2: 引用稳定性
const configuration = useMemo(() => ({
  theme: 'dark',
  language: 'zh-CN',
  apiUrl: process.env.REACT_APP_API_URL
}), []); // 空依赖表示永远不重新创建

const FormComponent = ({ onSubmit }) => {
  const [value, setValue] = useState('');

  // 避免在每次渲染时创建新函数
  const handleSubmit = useCallback((e) => {
    e.preventDefault();
    onSubmit(value);
  }, [onSubmit, value]); // 注意依赖项

  // 对于事件处理器，有时空依赖更合适
  const stableHandler = useCallback(() => {
    console.log('这是一个稳定的事件处理器');
  }, []); // 空依赖表示不依赖于任何变化的值

  return (
    <form onSubmit={handleSubmit}>
      <input value={value} onChange={e => setValue(e.target.value)} />
      <button type="submit">提交</button>
    </form>
  );
};

const Dashboard = ({ data, filters }) => {
  // 每次渲染都会重新计算，即使filters未变化
  const filteredData = data.filter(item => 
    item.category === filters.category &&
    item.date >= filters.startDate &&
    item.date <= filters.endDate
  );

  // 每次渲染创建新函数
  const handleDataUpdate = () => {
    // 更新逻辑
  };

  return (
    <div>
      <Chart data={filteredData} onUpdate={handleDataUpdate} />
      <Stats data={filteredData} />
    </div>
  );
};

const Dashboard = ({ data, filters }) => {
  // 使用useMemo避免不必要的重计算
  const filteredData = useMemo(() => {
    return data.filter(item => 
      item.category === filters.category &&
      item.date >= filters.startDate &&
      item.date <= filters.endDate
    );
  }, [data, filters]); // 只有当data或filters变化时才重新计算

  // 使用useCallback保持函数引用稳定
  const handleDataUpdate = useCallback(() => {
    // 更新逻辑
  }, []); // 空依赖因为不依赖任何props或state

  return (
    <div>
      <Chart data={filteredData} onUpdate={handleDataUpdate} />
      <Stats data={filteredData} />
    </div>
  );
};

// 子组件使用React.memo避免不必要的重渲染
const Chart = React.memo(({ data, onUpdate }) => {
  // 组件实现
});

// 自定义性能测量hook
const useRenderTracking = (componentName) => {
  useEffect(() => {
    console.log(`${componentName} 渲染了`);
    return () => {
      console.log(`${componentName} 卸载了`);
    };
  });
};

// 在组件中使用
const MyComponent = (props) => {
  useRenderTracking('MyComponent');
  // 组件逻辑
};