React Hooks 性能优化实战：useCallback vs useEffect 解析

useCallback vs useEffect 的区别：

1. useCallback 的作用：

const doFaceAuth = useCallback(() => {
  // 函数体
}, [dependencies]);

• 目的 ：缓存函数引用，避免每次渲染都创建新函数
• 返回值 ：返回一个函数
• 执行时机 ：不会自动执行，需要手动调用
• 使用场景：作为事件处理器、传递给子组件的 props

2. useEffect 的作用：

useEffect(() => {
  // 副作用代码
}, [dependencies]);

• 目的 ：执行副作用（API调用、DOM操作、订阅等）
• 返回值 ：无返回值
• 执行时机 ：自动执行（组件挂载、依赖变化时）
• 使用场景：数据获取、事件监听、清理工作

什么时候用 useEffect：

✅ 适合 useEffect 的场景：

// 1. 数据获取
useEffect(() => {
  const fetchData = async () => {
    const res = await http.post('/api/wx/register/info/checkPharmacist');
    setPharmacist(res.data?.info);
  };
  fetchData();
}, []);

// 2. 事件监听
useEffect(() => {
  const handleResize = () => console.log('窗口大小变化');
  window.addEventListener('resize', handleResize);
  return () => window.removeEventListener('resize', handleResize);
}, []);

// 3. 定时器
useEffect(() => {
  const timer = setInterval(() => {
    console.log('定时执行');
  }, 1000);
  return () => clearInterval(timer);
}, []);

什么时候用 useCallback：

✅ 适合 useCallback 的场景：

// 1. 事件处理器
const handleClick = useCallback(() => {
  console.log('用户点击了');
}, [someState]);

// 2. 传递给子组件的函数
const handleSubmit = useCallback((data) => {
  submitData(data);
}, [submitData]);

// 3. 依赖其他状态的函数
const calculateResult = useCallback(() => {
  return value1 + value2;
}, [value1, value2]);

总结：

特性	useCallback	useEffect
目的	缓存函数引用	执行副作用
执行	手动调用	自动执行
返回值	函数	无
适用场景	事件处理器、props传递	数据获取、监听、清理