React 19的新能力useMemo有啥用

useMemo 是 React 中一个非常有用的钩子，主要用于优化性能，避免在组件重新渲染时重复计算昂贵的值。以下是一些典型的使用场景和示例，展示了如何有效地利用 useMemo。

1. 数据格式化

在处理原始数据时，通常需要将其格式化为用户友好的格式。使用 useMemo 可以避免在每次渲染时都进行重复的格式化计算。

import React, { useMemo } from 'react';

const DataDisplay = ({ rawData }) => {
    const formattedData = useMemo(() => formatData(rawData), [rawData]);

    return <div>{formattedData}</div>;
};

const formatData = (data) => {
    // 假设这是一个昂贵的格式化操作
    return data.map(item => item.toUpperCase()).join(', ');
};

2. 计算总和

当需要对一个数组进行求和时，使用 useMemo 可以确保只有在数组变化时才重新计算总和。

import React, { useMemo } from 'react';

const SumComponent = ({ numbers }) => {
    const total = useMemo(() => {
        return numbers.reduce((acc, num) => acc + num, 0);
    }, [numbers]);

    return <p>总和: {total}</p>;
};

3. 条件渲染复杂组件

在某些情况下，你可能需要根据条件渲染复杂的组件。使用 useMemo 可以确保只有在条件变化时才重新创建组件。

import React, { useMemo } from 'react';

const ConditionalRendering = ({ showDetails }) => {
    const detailsComponent = useMemo(() => {
        return showDetails ? <Details /> : null;
    }, [showDetails]);

    return (
        <div>
            <p>一些内容</p>
            {detailsComponent}
        </div>
    );
};

4. 复杂计算状态

当你有多个依赖项并且需要进行复杂计算时，useMemo 可以帮助你管理这些依赖项。

import React, { useMemo } from 'react';

const ComplexCalculation = ({ value1, value2 }) => {
    const complexValue = useMemo(() => {
        // 假设这是一个复杂的计算
        return value1 * value2;
    }, [value1, value2]);

    return <p>复杂值: {complexValue}</p>;
};

5. 避免不必要的值传播

通过在父组件中使用 useMemo 来缓存某个值，可以确保子组件不会因为父组件的其他状态变化而重新渲染。

import React, { useMemo } from 'react';

const ParentComponent = ({ data }) => {
    const memoizedValue = useMemo(() => computeExpensiveValue(data), [data]);

    return <ChildComponent value={memoizedValue} />;
};

const ChildComponent = ({ value }) => {
    return <p>传递的值: {value}</p>;
};

总结

通过这些示例，我们可以看到 useMemo 在处理昂贵计算、条件渲染、数据格式化等方面的广泛应用。合理利用 useMemo 可以显著提高 React 应用的性能，减少不必要的计算和渲染。使用时应注意，仅在确实需要优化性能的情况下使用，以避免过度优化带来的复杂性。