用于从useCallback调用属性回调的React Hooks useEffect

基础概念

useCallback 和 useEffect 是 React Hooks 中的两个重要钩子函数，用于处理函数组件的生命周期和副作用。

• useCallback: 用于记忆一个函数，避免在每次渲染时都创建新的函数实例，从而优化性能。
• useEffect: 用于处理副作用，比如数据获取、订阅/取消订阅、手动更改 DOM 等。

相关优势

• useCallback:
  • 避免不必要的重新渲染：通过记忆函数，减少子组件的不必要重新渲染。
  • 提高性能：特别是在处理复杂组件树时，减少不必要的渲染可以显著提升性能。
• useEffect:
  • 清晰的生命周期管理：将副作用逻辑从组件主体中分离出来，使代码更清晰。
  • 支持异步操作：可以在 useEffect 中执行异步操作，如数据获取。
  • 自动清理：通过返回一个清理函数，可以在组件卸载或依赖项变化时自动清理副作用。

类型

• useCallback:
• useCallback:
• useEffect:
• useEffect:

应用场景

• useCallback:
  • 当一个函数作为 prop 传递给子组件时，使用 useCallback 可以避免子组件不必要的重新渲染。
  • 在处理复杂计算或昂贵操作时，使用 useCallback 可以缓存结果，避免重复计算。
• useEffect:
  • 数据获取：在组件挂载或更新时获取数据。
  • 订阅/取消订阅：在组件挂载时订阅某个事件，在组件卸载时取消订阅。
  • 手动更改 DOM：在组件挂载或更新时手动操作 DOM。

遇到的问题及解决方法

问题：为什么 useCallback 中的函数没有按预期缓存？

原因：

• 依赖项数组不正确：如果依赖项数组中没有包含所有相关的依赖项，useCallback 可能会重新创建函数。
• 依赖项变化频繁：如果依赖项变化非常频繁，useCallback 可能无法有效缓存函数。

解决方法：

• 确保依赖项数组正确包含所有相关的依赖项。
• 使用 useMemo 来缓存计算结果，而不是直接在 useCallback 中进行复杂计算。

const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);
const memoizedCallback = useCallback(() => {
  doSomething(memoizedValue);
}, [memoizedValue]);

问题：为什么 useEffect 中的副作用没有按预期执行？

原因：

• 依赖项数组不正确：如果依赖项数组中没有包含所有相关的依赖项，useEffect 可能不会在预期的时间点执行。
• 清理函数未正确返回：如果 useEffect 没有返回清理函数，可能会导致内存泄漏或其他副作用问题。

解决方法：

• 确保依赖项数组正确包含所有相关的依赖项。
• 确保在 useEffect 中返回正确的清理函数。

useEffect(() => {
  const subscription = props.source.subscribe();
  return () => {
    subscription.unsubscribe();
  };
}, [props.source]);

示例代码

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

const MyComponent = ({ data }) => {
  const [processedData, setProcessedData] = useState(null);

  // 使用 useCallback 缓存处理函数
  const processData = useCallback((data) => {
    // 复杂的数据处理逻辑
    return data.map(item => item * 2);
  }, []);

  // 使用 useEffect 处理副作用
  useEffect(() => {
    const result = processData(data);
    setProcessedData(result);
  }, [data, processData]);

  return (
    <div>
      {processedData ? processedData.map(item => <div key={item}>{item}</div>) : 'Loading...'}
    </div>
  );
};

export default MyComponent;

参考链接

• React 官方文档 - useCallback
• React 官方文档 - useEffect