react-pose组件挂载时闪烁：原因排查与解决方法

为什么会出现闪现？ #

你的代码出现组件先闪现再淡入的问题，主要有两个核心原因：

1. PoseGroup 与手动控制 pose 的冲突
   PoseGroup 是用来自动管理组件的进入/退出动画（依赖子组件的 key 变化），而你同时通过外部 state 手动设置组件的 pose，再加上 animateOnMount 属性，导致初始挂载时组件的样式状态混乱：组件默认先渲染出 normal 状态的完全可见样式，随后才切换到 hidden 的透明状态，这就造成了肉眼可见的"闪现"。

2. 自定义 sequence 函数的冗余与潜在风险
   虽然你的 sequence 函数意图实现延迟执行，但逻辑过于绕弯，而且完全没有必要——直接使用 setTimeout 就能达到同样效果，复杂的自定义函数反而可能引入意想不到的执行顺序问题。

解决方法（两种可选） #

方法一：移除 PoseGroup，直接手动控制 pose

既然你是通过定时器手动触发淡入动画，完全不需要 PoseGroup（它更适合处理组件挂载/卸载的动画场景）。修改后的代码更简洁，也能彻底解决闪现问题：

import React, { useState, useEffect } from "react"; 
import { render } from "react-dom"; 
import posed from "react-pose"; 
import styled from "styled-components"; 

const usePose = (initial, poses = {}) => { 
  const [pose, setPose] = useState(initial); 
  return { pose, setPose, poses }; 
}; 

const useAnimation = () => { 
  const { pose, setPose } = usePose(`hidden`, [`hidden`, `normal`]); 
  useEffect(() => {
    // 用setTimeout替代自定义sequence函数，逻辑更清晰
    const timer = setTimeout(() => setPose(`normal`), 3000);
    // 清理定时器，避免组件卸载后内存泄漏
    return () => clearTimeout(timer);
  }, []); 
  return { pose }; 
}; 

const Container = styled(posed.div({ 
  hidden: { opacity: 0 }, 
  normal: { opacity: 1, transition: { duration: 300 } } // 加上过渡时长，动画更平滑
}))({ color: "red" }); 

const App = () => { 
  const { pose } = useAnimation(); 
  // 移除PoseGroup，直接渲染Container
  return ( 
    <Container pose={pose}> 
      <h1>hello world</h1> 
    </Container> 
  ); 
}; 

const rootElement = document.getElementById("root"); 
render(<App />, rootElement);

方法二：正确利用 PoseGroup 的进入动画

如果你想保留 PoseGroup，可以调整逻辑，让它负责管理组件的进入动画，通过控制组件的挂载时机来实现延迟淡入：

import React, { useState, useEffect } from "react"; 
import { render } from "react-dom"; 
import posed, { PoseGroup } from "react-pose"; 
import styled from "styled-components"; 

const useAnimation = () => { 
  const [isVisible, setIsVisible] = useState(false);
  useEffect(() => {
    setTimeout(() => setIsVisible(true), 3000);
  }, []);
  return { isVisible };
}; 

const Container = styled(posed.div({ 
  enter: { opacity: 1, transition: { duration: 300 } },
  exit: { opacity: 0 }
}))({ color: "red" }); 

const App = () => { 
  const { isVisible } = useAnimation(); 
  return ( 
    <PoseGroup>
      {/* 当isVisible为true时，组件挂载，PoseGroup自动执行enter动画 */}
      {isVisible && (
        <Container key="visible">
          <h1>hello world</h1>
        </Container>
      )}
    </PoseGroup> 
  ); 
}; 

const rootElement = document.getElementById("root"); 
render(<App />, rootElement);

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