React Hooks与EventListener问题：useEffect中状态无法更新求助

我来帮你拆解下这段代码里的核心问题，然后给出对应的修复方案：

几个关键问题点 #

1. 违反React Hooks调用规则
   你在if(!renderStatus)条件判断里调用了useEffect，React要求所有Hooks必须在组件的顶层作用域调用，不能嵌套在条件、循环或其他函数里——React依赖Hooks的调用顺序来维护状态关联，打破这个规则会导致状态管理混乱。

2. 闭包导致的状态捕获陷阱
   事件监听器里的transitionStatus是组件初始渲染时的闭包值，每次执行changeTransitionStatus(transitionStatus?false:true)时，其实一直用的是初始的false，自然无法正确切换状态。

3. 缺少清理函数引发的内存泄漏
   useEffect添加了全局事件监听器，但没有在组件卸载或依赖变化时移除，会导致监听器重复绑定，不仅浪费内存，还可能触发意外的状态更新。

4. 直接在函数体更新状态导致无限重渲染
   changeRenderStatus(true)直接写在组件函数体的分支里，每次组件渲染都会执行这个状态更新，触发新一轮渲染，陷入无限循环。

修复后的代码示例 #

const ComponentToRender = () => { 
  const [transitionStatus, setTransitionStatus] = useState(false); 

  useEffect(() => {
    // 抽离事件处理函数，方便后续移除监听
    const handleTransitionEnd = (event) => {
      if (event.propertyName === "width") {
        // 使用函数式更新，获取最新的状态值，避开闭包陷阱
        setTransitionStatus(prevStatus => !prevStatus);
      }
    };

    window.addEventListener("transitionend", handleTransitionEnd);

    // 清理函数：组件卸载时移除监听器，防止内存泄漏
    return () => {
      window.removeEventListener("transitionend", handleTransitionEnd);
    };
  }, []); // 空依赖数组：只在组件挂载时绑定一次监听器

  return transitionStatus ? <div>First case</div> : <div>Second case</div>;
};

额外优化建议 #

如果你的过渡效果是针对某个特定DOM元素的，建议把事件监听器绑定到该元素上，而不是全局window，这样能避免监听无关的transitionend事件：

const ComponentToRender = () => { 
  const [transitionStatus, setTransitionStatus] = useState(false); 
  const targetElementRef = useRef(null); // 用ref获取目标DOM元素

  useEffect(() => {
    const handleTransitionEnd = (event) => {
      if (event.propertyName === "width") {
        setTransitionStatus(prevStatus => !prevStatus);
      }
    };

    const element = targetElementRef.current;
    if (element) {
      element.addEventListener("transitionend", handleTransitionEnd);
      return () => {
        element.removeEventListener("transitionend", handleTransitionEnd);
      };
    }
  }, []);

  return (
    <div 
      ref={targetElementRef}
      style={{ width: transitionStatus ? "200px" : "100px", transition: "width 0.3s" }}
    >
      {transitionStatus ? <div>First case</div> : <div>Second case</div>}
    </div>
  );
};

这样调整后，你的onMouseOver触发的DOM宽度变化，就能被正确捕获并触发状态更新了。

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