javascript - react Hook 与事件监听器

Question

所以...我正在尝试使用 useEffect，但我发现了一个奇怪的行为。我在一个dumb组件中有一个状态。我调用 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

1. 不能在 if 语句中使用钩子(Hook)，参见 hooks-rules
2. 您应该从您的 useEffect Hook 中返回一个清理函数以移除事件监听器并避免内存泄漏
3. 您可能希望效果只运行一次，因此提供一个空数组作为 useEffect 的第二个参数(我认为您不需要 renderStatus)
4. 在 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>
}