当前位置：首页 > React

react如何记忆

2026-02-11 11:31:21React

记忆状态（useState 和 useRef）

在 React 中，useState 用于存储和更新组件的状态。每次状态更新都会触发组件的重新渲染。useRef 则用于存储可变值，但不会触发重新渲染，适合存储不需要触发 UI 更新的数据。

import { useState, useRef } from 'react';

function Counter() {
  const [count, setCount] = useState(0); // 触发重新渲染
  const countRef = useRef(0); // 不触发重新渲染

  const increment = () => {
    setCount(count + 1);
    countRef.current += 1;
  };

  return (
    <div>
      <p>State Count: {count}</p>
      <p>Ref Count: {countRef.current}</p>
      <button onClick={increment}>Increment</button>
    </div>
  );
}

记忆计算结果（useMemo）

useMemo 用于缓存计算结果，避免在每次渲染时重复计算。只有当依赖项发生变化时，才会重新计算。

react如何记忆

import { useMemo } from 'react';

function ExpensiveComponent({ list }) {
  const sortedList = useMemo(() => {
    return list.sort((a, b) => a - b);
  }, [list]);

  return <div>{sortedList.join(', ')}</div>;
}

记忆函数（useCallback）

useCallback 用于缓存函数，避免在每次渲染时重新创建函数。只有当依赖项发生变化时，才会重新创建函数。

import { useCallback } from 'react';

function ParentComponent() {
  const handleClick = useCallback(() => {
    console.log('Button clicked');
  }, []);

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

function ChildComponent({ onClick }) {
  return <button onClick={onClick}>Click Me</button>;
}

记忆组件（React.memo）

React.memo 是一个高阶组件，用于缓存组件的渲染结果。只有当组件的 props 发生变化时，才会重新渲染。

react如何记忆

import { memo } from 'react';

const MemoizedComponent = memo(function MyComponent({ text }) {
  return <div>{text}</div>;
});

function ParentComponent() {
  return <MemoizedComponent text="Hello" />;
}

记忆表单输入（受控组件）

受控组件通过将表单输入的值存储在状态中，实现记忆功能。每次输入变化时更新状态，从而保持输入值的记忆。

import { useState } from 'react';

function Form() {
  const [inputValue, setInputValue] = useState('');

  const handleChange = (e) => {
    setInputValue(e.target.value);
  };

  return (
    <form>
      <input type="text" value={inputValue} onChange={handleChange} />
    </form>
  );
}

记忆滚动位置（useEffect 和 useRef）

通过 useEffect 和 useRef 可以记忆滚动位置，并在组件重新渲染时恢复滚动位置。

import { useEffect, useRef } from 'react';

function ScrollComponent() {
  const scrollRef = useRef(null);

  useEffect(() => {
    const savedPosition = localStorage.getItem('scrollPosition');
    if (savedPosition && scrollRef.current) {
      scrollRef.current.scrollTop = savedPosition;
    }

    return () => {
      if (scrollRef.current) {
        localStorage.setItem('scrollPosition', scrollRef.current.scrollTop);
      }
    };
  }, []);

  return (
    <div ref={scrollRef} style={{ height: '200px', overflow: 'auto' }}>
      {/* 长列表内容 */}
    </div>
  );
}