reactjs 即使传递的第二个参数是空数组，此React挂钩(即useEffect)如何重新呈现

093gszye 于 2022-12-03 发布在 React

关注(0)|答案(2)|浏览(203)

function WindowSizeList() {
  const [windowWidth, setWindowWidth] = useState(window.innerWidth)

  const updateWindowWidth = () => {
    setWindowWidth(window.innerWidth)
  }

  useEffect(() => {
    window.addEventListener('resize', updateWindowWidth)
  }, [])

  return (
    <>
      <div>Window Width: {windowWidth}</div>
    </>
  )
}

此组件在首次挂载时呈现窗口宽度，useEffect（）将运行，确定...然后在调整浏览器窗口大小时，window.addEventListener('resize', updateWindowWidth)将在useEffect（）内运行

useEffect(() => {
    window.addEventListener('resize', updateWindowWidth)
  }, [])

然后它触发了

const updateWindowWidth = () => {
    setWindowWidth(window.innerWidth)
  }

组件使用windowWidth的状态更改重新呈现该值，并在组件中呈现该值，OK...但当我再次调整浏览器窗口大小时，为什么会重复该过程，即useEffect重新运行，然后更新DOM中的值，即使我在中使用了空的第二个参数[]，但它应该运行一次

useEffect(() => {
    window.addEventListener('resize', updateWindowWidth)
  }, [])

reactjs

来源：https://stackoverflow.com/questions/70928133/how-this-react-hook-i-e-useeffect-is-re-rendering-even-if-the-second-argument-be

2条答案

按热度按时间

xuo3flqw1#

function WindowSizeList() {
  const [windowWidth, setWindowWidth] = useState(YourInitialValue)

 useEffect(() => {
    // Define your handler 
    function updateWindowWidth(){
    setWindowWidth(window.innerWidth)
    }
    // Add event listener
    window.addEventListener('resize', updateWindowWidth)
    // Call handler right away so state gets updated with initial window size
       updateWindowWidth()
    // Remove event listener on cleanup
    return () => window.removeEventListener("resize", updateWindowWidth);
  }, []); // Empty array ensures that effect is only run on mount

  return (
    <>
      <div>Window Width: {windowWidth}</div>
    </>
  )

}

赞(0）回复(0）举报 2022-12-03

zfycwa2u2#

eventlistener只附加一次，并一直运行，直到您删除它们或重新加载页面。
//将事件行程常式附加到文件。getElementById（“myDIV”）.addEventListener（'resize'，updateWindowWidth）;
//从文件移除事件行程常式。getElementById（“myDIV”）.removeEventListener（'resize'，updateWindowWidth）
为了更好地理解，您可以阅读JavaScript中的事件循环。

赞(0）回复(0）举报 2022-12-03

我来回答

reactjs 即使传递的第二个参数是空数组，此React挂钩(即useEffect)如何重新呈现

2条答案

相关问题

热门标签

最新问答