调用Redux的sendMessage后组件重复渲染并重复输出挂载日志问题

为什么会重复输出Page mounted且组件反复重渲染？ #

1. 组件被卸载后重新挂载
   useEffect(() => {}, [])只会在组件挂载时执行一次，重复输出日志说明组件不是单纯重渲染，而是被完全卸载后又重新创建了。常见触发场景：

• 父组件给<Fake />设置的key是不稳定值（比如随机数、每次渲染都会变化的变量）
• 父组件的条件渲染逻辑导致组件被反复销毁重建（比如依赖Redux状态的{isShow && <Fake />}，isShow在sendMessage触发后被频繁切换）

2. memo无法阻止Redux订阅引发的重渲染
   你用了memo(Fake)，但memo只负责对比组件接收的props是否变化来阻止重渲染。如果组件内部通过useSelector（或其他方式）订阅了Redux状态，当sendMessage修改store后，状态变化会直接触发组件重渲染，这种情况memo管不了。

对应的解决建议 #

• 检查父组件中<Fake />的使用：确保key是固定不变的稳定值，同时避免条件渲染导致组件反复销毁重建
• 如果组件订阅了Redux状态，优化useSelector的使用，减少不必要的重渲染：

  import { useSelector, shallowEqual } from 'react-redux'
  
  // 用shallowEqual做浅比较，仅当状态真正变化时才更新
  const targetState = useSelector(state => state.yourSlice.targetData, shallowEqual)
  

• 若后续需要把changeDataInStore作为props传递，用useCallback稳定函数引用：

  const changeDataInStore = useCallback(({ msg }) => {
    sendMessage(msg);
  }, []);
  

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