React Native：使用onLayout时HOC状态丢失问题排查

首先咱们来拆解核心问题：你遇到的状态丢失，大概率是HOC被重复创建导致组件被卸载后重新挂载，而非同一个组件实例重渲染时的状态丢失。

为什么会出现这种情况？ #

React判断组件是否为同一个实例，核心依据是组件的引用（类/函数的内存地址）。如果你的HOC调用是放在父组件的render方法内部，比如这样：

class ParentComponent extends React.Component {
  render() {
    // 每次父组件render，都会生成全新的OnLayout类！
    const WrappedComponent = onLayout(Placeholder);
    return <WrappedComponent />;
  }
}

那每次父组件重渲染（包括子组件尺寸变化触发的父组件更新），都会创建一个全新的OnLayout组件类。React会认为这是完全不同的组件，于是先卸载旧的OnLayout实例（触发componentWillUnmount），同时挂载新的实例——新实例的state自然是初始的空对象{}。这就解释了你看到的「第二次render发生在componentWillUnmount之前」：新组件的render会优先执行，旧组件的卸载逻辑随后触发。

当然也有可能是HOC内部状态更新逻辑出错，比如在getDerivedStateFromProps或componentWillReceiveProps里错误重置了state，但这种情况相对少见，优先排查HOC的创建时机。

解决方案 #

1. 确保HOC只创建一次

把HOC的创建移到父组件外部，避免每次render都生成新组件类：

// 仅创建一次，放在父组件外部
const WrappedComponent = onLayout(Placeholder);

class ParentComponent extends React.Component {
  render() {
    return <WrappedComponent />;
  }
}

如果是函数式父组件，用useMemo缓存包装后的组件，确保依赖不变时不会重新创建：

const ParentComponent = () => {
  const WrappedComponent = React.useMemo(() => onLayout(Placeholder), []);
  return <WrappedComponent />;
};

2. 检查HOC内部状态更新逻辑

确认HOC更新状态时是基于现有state合并，而非直接重置。比如获取布局信息后，应该这样更新：

// 正确：合并现有state与新布局数据
this.setState(prevState => ({
  ...prevState,
  layout: newLayoutData
}));

3. 加日志验证生命周期

可以在HOC的类组件中添加日志，确认组件是否被重复挂载：

class OnLayout extends Component {
  state = {};

  componentDidMount() {
    console.log('OnLayout组件挂载');
  }

  componentWillUnmount() {
    console.log('OnLayout组件卸载');
  }

  render() {
    console.log('当前state:', this.state);
    // 你的render逻辑
  }
}

如果每次子组件尺寸变化都能看到「卸载」和「挂载」的日志，就能实锤是HOC重复创建的问题。

内容的提问来源于stack exchange，提问作者M. Walker