React Memo 下React Native组件不必要重渲染问题求助

核心问题1：Stale State 导致用户对象被错误更新 #

你的updateUserAge函数直接引用了users state变量，没有使用函数式更新的方式。当连续触发用户更新时，函数可能捕获到旧的users state值，导致未被点击的用户对象意外回退到之前的状态（比如第一次点击Ivan后age变为30，第二次点击Elena时，Ivan的age又被重置为初始的20）。这种情况下，这些用户的age属性发生了变化，触发了组件重渲染。

核心问题2：回调函数引用频繁变化（潜在风险） #

updateUserAge函数在MainApp每次渲染时都会重新创建，导致传递给User组件的onUpdateAge prop引用每次都不同。虽然你自定义的memo比较函数忽略了这个prop，但这不符合最佳实践——未来如果组件逻辑依赖该回调的引用，会引发不必要的重渲染或逻辑错误。

修复方案 #

1. 改用函数式更新State

修改updateUserAge，使用setUsers的函数式更新形式，确保每次都基于最新的state进行修改：

const updateUserAge = (userId: number) => {
  setUsers(prevUsers =>
    prevUsers.map(user =>
      user.id === userId
        ? { ...user, age: Math.floor(Math.random() * (100 - 20 + 1)) + 20 }
        : user,
    ),
  );
};

2. 用useCallback缓存回调函数

结合useCallback缓存updateUserAge的引用，避免每次渲染都创建新函数：

// 先导入useCallback
import React, { useState, useCallback } from 'react';

// ...

const updateUserAge = useCallback((userId: number) => {
  setUsers(prevUsers =>
    prevUsers.map(user =>
      user.id === userId
        ? { ...user, age: Math.floor(Math.random() * (100 - 20 + 1)) + 20 }
        : user,
    ),
  );
}, []); // 空依赖数组，确保函数仅在组件初始化时创建一次

3. 优化自定义比较函数（可选，逻辑更严谨）

虽然当前组件渲染不依赖onUpdateAge，但建议在比较函数中明确校验user的唯一标识（比如id），让逻辑更清晰：

(prevProps, nextProps) => {
  return (
    prevProps.user.id === nextProps.user.id &&
    prevProps.user.age === nextProps.user.age &&
    prevProps.description === nextProps.description
  );
};

修复后效果 #

修改完成后：

• 点击任意用户的「Update Age」按钮，仅该用户组件会因age变化重渲染；
• 其他用户组件因age、description均未发生有效变化，会被memo阻止重渲染；
• 点击「Update Description」按钮时，所有用户组件会因description变化统一重渲染，完全符合预期。

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