React memo无props变更时仍重复渲染问题求助

首先得明确一个核心点：React.memo只负责对比组件的props变化，完全不会处理context变化引发的渲染。所以哪怕你把React.memo的第二个参数设为() => true（强制认为props没变化），只要Provider的value引用发生了变化，使用useContext的组件还是会无条件重新渲染。

为什么你的Footer会重复渲染？ #

结合你提供的代码来看，问题出在GlobalSettingsProvider和MyApp的配合逻辑上：

1. 你的MyApp在页面切换时，getInitialProps每次都会返回一个新的globalSettings对象——哪怕内容和之前完全一样，只是内存引用不同。
2. 你的GlobalSettingsProvider虽然把props.settings存到了state里，但没有处理props更新的情况：当MyApp的globalSettings变成新对象时，GlobalSettingsProvider的props变化会触发重新render，但constructor只执行一次，state里的value还是旧的引用？不对，其实更关键的是：如果Provider的value引用发生变化（哪怕内容不变），所有消费该context的组件都会强制重新渲染，这和React.memo的优化逻辑完全无关。

解决方案 #

针对你的Next.js同构应用场景，有几个直接可行的办法：

1. 在MyApp中缓存globalSettings，确保相同内容时引用不变

在getInitialProps里，先对比新获取的globalSettings和之前的缓存，只有内容真的变化时才返回新对象，否则复用旧引用：

import isEqual from 'lodash/isEqual';

class MyApp extends App {
  static async getInitialProps({ Component, ctx }) {
    // 假设这里是你获取globalSettings的逻辑
    const newGlobalSettings = await fetchYourGlobalSettings();
    
    // 缓存到ctx上（Next.js的ctx在同构环境中可复用）
    if (ctx.globalSettingsCache && isEqual(ctx.globalSettingsCache, newGlobalSettings)) {
      return { globalSettings: ctx.globalSettingsCache };
    }
    ctx.globalSettingsCache = newGlobalSettings;
    return { globalSettings: newGlobalSettings };
  }
  
  // ... 其余代码不变
}

2. 修改GlobalSettingsProvider，仅在内容变化时更新value引用

可以把GlobalSettingsProvider改成类组件，用componentDidUpdate做深度对比；或者改成函数组件用useMemo缓存，确保只有settings内容变化时才更新Provider的value引用：

类组件版本：

import isEqual from 'lodash/isEqual';

class GlobalSettingsProvider extends Component {
  constructor(props) {
    super(props);
    this.state = { value: props.settings };
  }

  componentDidUpdate(prevProps) {
    // 深度对比settings内容，只有变化时才更新state
    if (!isEqual(prevProps.settings, this.props.settings)) {
      this.setState({ value: this.props.settings });
    }
  }

  render() {
    return (
      <Provider value={this.state.value}>
        {this.props.children}
      </Provider>
    );
  }
}

函数组件版本（更简洁）：

import { useMemo } from 'react';
import isEqual from 'lodash/isEqual';

const GlobalSettingsProvider = ({ settings, children }) => {
  // 用useMemo缓存value，只有settings内容变化时才生成新引用
  const memoizedSettings = useMemo(() => settings, [JSON.stringify(settings)]);
  // 或者用lodash.isEqual自定义比较（需要额外依赖react-use等工具库）：
  // const memoizedSettings = useMemo(() => settings, [settings], isEqual);
  
  return (
    <Provider value={memoizedSettings}>
      {children}
    </Provider>
  );
};

3. （可选）拆分Context结构

如果globalSettings里的内容很多，你可以把value拆分成多个独立的Context，或者只传递Footer需要的footerTitle单独做一个Context，减少不必要的渲染触发。这个方案适合大型应用，复杂度稍高。

验证方法 #

你可以在GlobalSettingsProvider的render里加个日志，打印value的引用：

render() {
  console.log('Provider value ref:', this.state.value);
  return (
    <Provider value={this.state.value}>
      {this.props.children}
    </Provider>
  );
}

页面切换时如果看到引用一直在变化，那就确认是这个原因导致的Footer重复渲染。

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