反应挂钩与事件监听器

Question

所以...我正在尝试使用 useEffect，但我发现了一个奇怪的行为。我在一个哑组件中有一个状态。我调用 useEffect 并在其中添加一个新的 eventListener。此事件侦听器必须在给定条件的情况下更改状态。问题是状态永远不会改变...... 想法？

const componentToRender=()=>{
    const [renderStatus, changeRenderStatus]=useState(false);
    const [transitionStatus, changeTransitionStatus]=useState(false);
    if(!renderStatus){
        useEffect(()=>{
            window.addEventListener("transitionend",(event)=>{
                if(event.propertyName==="width"){
                    changeTransitionStatus(transitionStatus?false:true);
                }
            })
        })
        changeRenderStatus(true)
    }
    return (transitionStatus)?<div> First case </div>:<div> Second case</div>
}

还有另一个函数在 MouseOver 上进行一些 DOM 操作。

这个函数应该改变事件侦听器的状态，但它没有。

Answer 1

您不能在 if 语句中使用挂钩，请参阅 hooks-rules
您应该 return 从 useEffect 挂钩中删除事件侦听器并避免内存泄漏
您可能只希望效果运行一次，因此提供一个空数组作为 useEffect 的第二个参数（我认为您不需要 renderStatus）
在 useEffect 中，当调用一个状态 setter 时，更喜欢函数式形式，这样你总是有一个新的状态值。

例子

const componentToRender = () => {
  //const [renderStatus, changeRenderStatus] = useState(false);
  const [transitionStatus, changeTransitionStatus] = useState(false);

  // No condition
  useEffect(() => {
    const handler = (event) => {
      if (event.propertyName === "width") {
        //passe a function to state setter to get fresh state value
        changeTransitionStatus(transitionStatus => transitionStatus ? false : true);
      }
    };

    window.addEventListener("transitionend", handler);

    // clean up
    return () => window.removeEventListener("transitionend", handler);
  }, []); // empty array => run only once

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

反应挂钩与事件监听器

React hooks vs eventListener

javascript

reactjs

react-hooks