react如何记忆

React 记忆技术

在 React 中，记忆（Memoization）是一种优化技术，用于避免不必要的重新渲染或计算。React 提供了多种内置方法和第三方库来实现记忆功能。

useMemo Hook

useMemo 用于记忆计算结果，避免在每次渲染时重复计算。它接受一个函数和一个依赖数组，仅当依赖项变化时重新计算。

import React, { useMemo } from 'react';

function ExpensiveComponent({ value }) {
  const computedValue = useMemo(() => {
    return value * 2; // 仅当 value 变化时重新计算
  }, [value]);

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

React.memo

React.memo 是一个高阶组件，用于记忆组件的渲染结果。当组件的 props 未变化时，跳过重新渲染。

import React from 'react';

const MyComponent = React.memo(function MyComponent({ prop }) {
  return <div>{prop}</div>;
});

useCallback Hook

useCallback 用于记忆函数引用，避免在每次渲染时创建新的函数实例。常用于优化子组件的 props 传递。

import React, { useCallback } from 'react';

function ParentComponent() {
  const handleClick = useCallback(() => {
    console.log('Button clicked');
  }, []); // 空依赖数组表示函数不会变化

  return <ChildComponent onClick={handleClick} />;
}

自定义记忆函数

对于复杂场景，可以结合 Lodash 的 memoize 或其他库实现自定义记忆逻辑。

import memoize from 'lodash/memoize';

const memoizedFunction = memoize((param) => {
  return expensiveCalculation(param);
});

注意事项

记忆技术虽能提升性能，但滥用可能导致内存泄漏或代码复杂度增加。仅在性能瓶颈明确时使用，并合理设置依赖数组。