React Transition组件内联状态更新触发副作用警告的解决方法

你遇到的问题核心是：React的渲染回调属于渲染阶段，这个阶段调用setState会触发不必要的重渲染，甚至导致循环渲染，因此React会抛出警告。下面是几种合规的解决思路：

1. 直接使用Transition回调传入的state，无需同步到组件自身状态 #

React Transition的渲染回调已经提供了当前动画状态，完全可以直接用这个状态来控制渲染逻辑，不需要额外同步到组件的useState里。这样既避免了状态冗余，也符合React的渲染规范。

错误写法示例（触发警告）：

const TransitionComponent = ({ children }) => {
  const [status, setStatus] = useState('exited');
  
  return (
    <Transition in={true} timeout={300}>
      {(state) => {
        // 渲染阶段调用setState，触发警告
        setStatus(state);
        return <div className={`transition-${status}`}>{children}</div>;
      }}
    </Transition>
  );
};

修正后的写法：

const TransitionComponent = ({ children }) => {
  return (
    <Transition in={true} timeout={300}>
      {(state) => {
        // 直接使用回调传入的state控制渲染
        return <div className={`transition-${state}`}>{children}</div>;
      }}
    </Transition>
  );
};

2. 若必须同步状态到组件，使用Transition的生命周期钩子 #

如果你的业务逻辑需要把动画状态存在组件自身状态中（比如用于非渲染逻辑的判断），不要在渲染回调里更新状态，而是用Transition提供的生命周期钩子（这些钩子在commit阶段执行，属于合法的副作用场景）。

示例代码：

const TransitionComponent = ({ children }) => {
  const [status, setStatus] = useState('exited');
  
  return (
    <Transition
      in={true}
      timeout={300}
      onEnter={() => setStatus('entering')}
      onEntered={() => setStatus('entered')}
      onExit={() => setStatus('exiting')}
      onExited={() => setStatus('exited')}
    >
      {(state) => {
        // 渲染仍用回调的state，状态同步给组件做其他逻辑
        return <div className={`transition-${state}`}>{children}</div>;
      }}
    </Transition>
  );
};

3. 用useRef存储状态，避免不必要重渲染 #

如果只是需要在非渲染场景（比如事件处理、定时器）中读取当前动画状态，不需要触发组件重渲染，可以用useRef来存储状态，替代useState。

示例代码：

const TransitionComponent = ({ children }) => {
  const transitionStateRef = useRef('exited');
  
  return (
    <Transition
      in={true}
      timeout={300}
      onEnter={() => transitionStateRef.current = 'entering'}
      onEntered={() => transitionStateRef.current = 'entered'}
      onExit={() => transitionStateRef.current = 'exiting'}
      onExited={() => transitionStateRef.current = 'exited'}
    >
      {(state) => {
        return <div className={`transition-${state}`}>{children}</div>;
      }}
    </Transition>
  );
};

// 后续在事件或副作用中读取：
// console.log(transitionStateRef.current);

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