React源码角度解析useCallback、useMemo和useContext
2024-01-27 21:15:12
1. useCallback
useCallback的作用是缓存一个函数，以便在组件重新渲染时，如果依赖项没有发生变化，则继续使用之前缓存的函数，避免不必要的重新创建函数。
export function useCallback<T extends (...args: any[]) => any>(callback: T, deps?: DependencyList): T;
- callback： 要缓存的函数。
- deps： 一个数组，包含了该函数所依赖的变量。当这些变量发生变化时，函数将被重新创建。
实现原理：
useCallback的实现原理是使用闭包。它将callback函数和deps数组存储在一个私有变量中。在组件重新渲染时，它会比较私有变量中存储的deps数组和当前的deps数组。如果两个数组相等，则表示依赖项没有发生变化，因此它会继续使用之前缓存的函数。否则，它会重新创建函数并将其存储在私有变量中。
用法：
useCallback通常用于缓存那些在组件重新渲染时不需要重新创建的函数。例如：
const memoizedCallback = useCallback(() => {
// 这里是一个不需要重新创建的函数
}, [someDependency]);
然后，你可以在组件中使用memoizedCallback。当组件重新渲染时，如果someDependency没有发生变化，则memoizedCallback将继续使用之前缓存的函数。否则，memoizedCallback将重新创建函数。
2. useMemo
useMemo的作用是缓存一个值，以便在组件重新渲染时，如果依赖项没有发生变化，则继续使用之前缓存的值，避免不必要的重新计算。
export function useMemo<T>(factory: MemoizationFunction<T>, deps?: DependencyList): T;
- factory： 一个函数，用来计算需要缓存的值。
- deps： 一个数组，包含了该函数所依赖的变量。当这些变量发生变化时，值将被重新计算。
实现原理：
useMemo的实现原理与useCallback类似，也是使用闭包。它将factory函数和deps数组存储在一个私有变量中。在组件重新渲染时，它会比较私有变量中存储的deps数组和当前的deps数组。如果两个数组相等，则表示依赖项没有发生变化，因此它会继续使用之前缓存的值。否则，它会重新计算值并将其存储在私有变量中。
用法：
useMemo通常用于缓存那些在组件重新渲染时不需要重新计算的值。例如：
const memoizedValue = useMemo(() => {
// 这里是一个不需要重新计算的值
}, [someDependency]);
然后，你可以在组件中使用memoizedValue。当组件重新渲染时，如果someDependency没有发生变化，则memoizedValue将继续使用之前缓存的值。否则，memoizedValue将重新计算值。
3. useContext
useContext的作用是获取一个Context对象，以便在组件中使用它。
export function useContext<T>(context: ReactContext<T>): T;
- context： 要获取的Context对象。
实现原理：
useContext的实现原理是使用React的Context API。它通过一个私有变量来存储当前组件所处的Context对象。在组件重新渲染时，它会比较私有变量中存储的Context对象和当前的Context对象。如果两个Context对象相等，则表示Context对象没有发生变化，因此它会继续使用之前缓存的Context对象。否则，它会重新获取Context对象并将其存储在私有变量中。
用法：
useContext通常用于在组件中获取Context对象。例如：
const contextValue = useContext(MyContext);
然后，你可以在组件中使用contextValue。当组件重新渲染时，如果MyContext没有发生变化，则contextValue将继续使用之前缓存的Context对象。否则，contextValue将重新获取Context对象。
4. 总结
useCallback、useMemo和useContext都是React提供的非常有用的Hooks。通过理解它们的底层实现，我们可以更好地掌握如何在实际开发中使用它们来优化性能并编写更易于维护的代码。
希望这篇文章对您有所帮助。如果您有任何问题，请随时在评论区留言。
