react hooks 的useMemo:

React 的 useMemo Hook 用于在函数组件中进行记忆化计算,它可以缓存一些需要耗时计算的值,以避免无谓的重复计算。

useMemo 接收一个回调函数和一个依赖数组作为参数。

import { useMemo } from 'react';

const memoizedValue = useMemo(() => {
  // 计算和返回一个值

  return value;
}, [依赖数组]);

回调函数用于进行一些复杂或耗时的计算,计算结果将被缓存起来。如果依赖数组发生变化,将重新执行回调函数并更新缓存的值。

缓存的值可以在组件的渲染周期内被多次使用,而不需要每次重新计算。

以下是一些使用 useMemo 的示例:

  1. 计算衍生的数据:在依赖项发生变化时重新计算衍生的数据。
import { useMemo } from 'react';

function MyComponent({ a, b }) {
  const sum = useMemo(() => {
    console.log('Sum computed');
    return a + b;
  }, [a, b]);

  return 
{sum}
; }

在这个例子中,当 a 或 b 发生变化时,sum 将被重新计算。否则,它将从缓存中读取上一次计算的结果。

  1. 优化性能:避免重复的计算。
import { useMemo } from 'react';

function MyComponent({ list }) {
  const sortedList = useMemo(() => {
    console.log('Sorting list');
    return list.sort();
  }, [list]);

  return 
{sortedList}
; }

在这个例子中,当 list 发生变化时,sortedList 将被重新计算并排序。否则,它将从缓存中读取上一次计算的结果。

通过使用 useMemo Hook,我们可以在函数组件中缓存计算结果,以提高性能和避免不必要的重复计算。这在处理大型数据集或复杂计算时特别有用。

例子:

// useMemo 是 React 提供的一个钩子函数,用于在函数组件中进行性能优化。它的作用是对计算结果进行缓存,只有在依赖的值发生改变时才重新计算。
// 在某些情况下,组件内部的计算可能会比较耗时,而且计算结果并不会频繁变化。
// 这时就可以使用 useMemo 来缓存计算结果,避免不必要的重复计算,提高组件的性能。
// useMemo 接收两个参数:一个回调函数和一个依赖数组。回调函数用于计算需要缓存的值,依赖数组则用于指定哪些变量的变化会触发重新计算。
// 只有当依赖数组中的值发生改变时,才会重新计算并返回新的值。、
// 类似于vue中的computed,但是它是纯函数,不会有副作用。
import React, { useMemo, useState } from 'react';

function Example() {
    const [count, setCount] = useState(0);

    const expensiveOperation = useMemo(() => {
        console.log('Calculating...');
        let result = 0;
        for (let i = 0; i < count; i++) {
            result += i;
        }
        return result;
    }, [count]);

    return (
        

Count: {count}

Result of Expensive Operation: {expensiveOperation}

); } export default Example; // 在上面的例子中,我们定义了一个 expensiveOperation 的计算操作,并使用了 useMemo 将其结果缓存起来。只有当 count 发生变化时,才重新进行计算。 // // 需要注意的是,useMemo 的缓存只对当前组件实例有效,不会在不同组件实例之间共享, // 所以它只对当前组件内的数据共享和性能优化有效。 // // 使用 useMemo 可以避免不必要的计算,提高组件的渲染性能。但是在大多数情况下, // 仅当计算确实非常耗时时,才需要使用 useMemo 进行性能优化。在大多数情况下,组件的重渲染并不会带来明显的性能问题。

你可能感兴趣的:(react.js,前端,前端框架)