useMemo底层原理

useMemo是React中的一个Hook，用于优化函数组件的性能，通过记忆化计算结果来避免重复计算。下面是useMemo的简化版底层源码实现，以帮助你理解其工作原理：

function useMemo(callback, dependencies) { 
    const previousDependencies = useRef([]); 
    const previousValue = useRef(); 
    // 检查依赖项是否发生变化 
    const dependenciesChanged = dependencies.some((dependency, index) => {
        return dependency !== previousDependencies.current[index])
    }

    if (dependenciesChanged) { 
        // 依赖项发生变化，重新计算值并保存
        previousValue.current = callback(); 
        previousDependencies.current = dependencies; 
    } 

    return previousValue.current; 
}

这是一个简单的实现，并没有处理所有边缘情况

在这个简化版的代码中，useMemo接收两个参数：callback和dependencies。callback是一个函数，用于计算需要记忆化的值。dependencies是一个数组，指定callback的依赖项，只有依赖项发生变化时，才会重新计算值。

1. useMemo内部使用了useRef来创建了两个持久化的引用：previousDependencies和previousValue。previousDependencies用于保存之前的依赖项，previousValue用于保存之前的计算结果。

2. 在每次组件渲染时，useMemo会检查依赖项是否发生变化。如果有任何一个依赖项与之前不同，表示依赖项已发生变化，callback将被重新执行，新的计算结果将被保存在previousValue.current中。同时，previousDependencies.current也会被更新为当前的依赖项数组。如果依赖项没有发生变化，useMemo会返回之前保存的计算结果，即previousValue.current。

这样，在组件重新渲染时，如果依赖项没有变化，useMemo将直接返回之前的计算结果，避免了重复计算。只有当依赖项发生变化时，才会重新执行callback来计算新的值。