让你React性能优化再上一个台阶

前端

2023-11-30 04:55:56

React组件重复渲染与性能优化

在 React 中，组件的渲染是一个开销较大的操作。如果组件不必要地重新渲染，就会浪费时间和资源。因此，减少组件的重新渲染次数对提高 React 应用的性能非常重要。

造成组件重复渲染的原因有很多，包括：

组件的状态发生变化
组件的 props 发生变化
父组件重新渲染
外部状态发生变化

2. useMemo

useMemo 是一个 React Hook，它可以让你在函数中缓存一个值。这个值会在函数第一次被调用时计算出来，然后在函数后续的调用中被复用。

useMemo 的语法如下：

const memoizedValue = useMemo(() => {
  // 计算值
}, [dependencies]);

memoizedValue 是要缓存的值。
() => { // 计算值 } 是计算值的函数。
[dependencies] 是一个数组，包含影响计算值的值。

useMemo 会在函数第一次被调用时计算值，并将值存储在 memoizedValue 中。在函数后续的调用中，useMemo 会检查 dependencies 数组中的值是否发生了变化。如果 dependencies 数组中的值没有发生变化，useMemo 会直接返回 memoizedValue 中存储的值。如果 dependencies 数组中的值发生了变化，useMemo 会重新计算值，并将新值存储在 memoizedValue 中。

3. useCallback

useCallback 是一个 React Hook，它可以让你在函数中缓存一个函数。这个函数会在函数第一次被调用时创建出来，然后在函数后续的调用中被复用。

useCallback 的语法如下：

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

memoizedCallback 是要缓存的函数。
() => { // 函数体 } 是函数体。
[dependencies] 是一个数组，包含影响函数体执行的值。

useCallback 会在函数第一次被调用时创建函数，并将函数存储在 memoizedCallback 中。在函数后续的调用中，useCallback 会检查 dependencies 数组中的值是否发生了变化。如果 dependencies 数组中的值没有发生变化，useCallback 会直接返回 memoizedCallback 中存储的函数。如果 dependencies 数组中的值发生了变化，useCallback 会重新创建函数，并将新函数存储在 memoizedCallback 中。

4. useMemo 和 useCallback 的区别

useMemo 和 useCallback 都可以用来减少组件的重新渲染，但它们的作用并不相同。

useMemo 用于缓存值，而 useCallback 用于缓存函数。
useMemo 会在函数第一次被调用时计算值，并在函数后续的调用中复用该值。useCallback 会在函数第一次被调用时创建函数，并在函数后续的调用中复用该函数。
useMemo 的 dependencies 数组中包含影响计算值的值，而 useCallback 的 dependencies 数组中包含影响函数体执行的值。

5. useMemo 和 useCallback 的使用场景

useMemo 和 useCallback 都可以在 React 中用来提高性能。

useMemo 可以用来缓存不会经常变化的值，例如组件的 props 或状态。
useCallback 可以用来缓存不会经常变化的函数，例如事件处理函数或计时器函数。

6. 总结

useMemo 和 useCallback 是两个 React Hook，可以帮助你减少组件的重新渲染，从而提高性能。useMemo 可以用来缓存值，而 useCallback 可以用来缓存函数。useMemo 和 useCallback 都可以在 React 中用来提高性能，但它们的作用并不相同。useMemo 可以用来缓存不会经常变化的值，而 useCallback 可以用来缓存不会经常变化的函数。