useMemo与useEffect回调是否适合处理React组件的生命周期启停逻辑？

1. 挂载时加载初始数据：不应该用useMemo #

useMemo的核心作用是缓存纯计算的结果，避免组件重渲染时重复执行昂贵的计算，它的回调函数应该是无副作用的纯函数。而读取URL参数、localStorage属于副作用操作，不符合useMemo的设计意图。

正确的做法是用空依赖的useEffect来处理挂载时的初始化逻辑：

• 空依赖的useEffect只会在组件挂载时执行一次，刚好匹配你“仅加载一次初始数据、不受内部状态变化影响”的需求；
• useEffect是React专门用来处理副作用的钩子，读取外部存储/URL这类操作放在这里更合规，也更易维护。

2. 卸载时存储数据：不能用空依赖的useEffect（需注意闭包问题） #

你想用useEffect的清理函数处理卸载逻辑是对的，但如果直接用空依赖，会因为闭包陷阱导致存储的是组件挂载时的初始数据，而不是最新的筛选状态。

正确的做法是把当前的筛选状态（比如filters）加到useEffect的依赖数组中：

• 每次筛选状态更新时，都会重新创建清理函数；
• 组件卸载时，执行的是最后一次创建的清理函数，能确保存储的是最新的筛选数据。

结合通用列表组件的示例代码 #

import { useState, useEffect } from 'react';
import { useSearchParams } from 'react-router-dom';

const GenericList = () => {
  const [searchParams, setSearchParams] = useSearchParams();
  const [filters, setFilters] = useState({});

  // 挂载时加载初始筛选条件：优先URL参数，其次localStorage
  useEffect(() => {
    // 解析URL中的筛选参数
    const urlFilters = Object.fromEntries(searchParams.entries());
    // 读取localStorage中存储的筛选条件
    const storedFilters = JSON.parse(localStorage.getItem('list-filters') || '{}');
    // 合并初始条件，URL参数优先级更高
    const initialFilters = { ...storedFilters, ...urlFilters };
    setFilters(initialFilters);
  }, []);

  // 筛选状态变化时同步更新URL
  useEffect(() => {
    setSearchParams(filters);
  }, [filters, setSearchParams]);

  // 卸载时存储最新筛选状态到localStorage
  useEffect(() => {
    return () => {
      localStorage.setItem('list-filters', JSON.stringify(filters));
    };
  }, [filters]); // 依赖filters，确保存储最新状态

  // 筛选组件与列表渲染逻辑
  return (
    <div>
      {/* 这里放筛选组件，通过setFilters更新筛选状态 */}
      {/* 这里放列表展示组件 */}
    </div>
  );
};

总结 #

• 挂载逻辑：用空依赖的useEffect替代useMemo，符合React副作用处理的设计规范；
• 卸载逻辑：用带筛选状态依赖的useEffect清理函数，避免闭包陷阱，确保存储最新数据。

内容的提问来源于stack exchange，提问作者hassanfaraji