javascript - 功能组件内的状态初始化(无无限循环)

Question

我有一个功能组件，它在其状态下保存自定义视口(viewport)值，因此它必须使用事件监听器并测量窗口大小:

const AppWrap = () => {

  // custom vw and vh vars
  const [vw, setvw] = useState();
  const [vh, setvh] = useState();

  // gets the inner height/width to act as viewport dimensions (cross-platform benefits)
  const setViewportVars = () => {

    const viewportWidth = window.innerWidth;
    const viewportHeight = window.innerHeight;

    // can be accessed in scss as vw(n), vh(n) OR in css as --vw * n, --vh * n
    document.documentElement.style.setProperty('--vw', `${viewportWidth / 100}px`);
    document.documentElement.style.setProperty('--vh', `${viewportHeight / 100}px`);

    // can be accessed in child components as vw * n or vh * n
    setvw(viewportWidth / 100);
    setvh(viewportHeight / 100);

  }

  // I'd like to run this function *once* when the component is initialized
  setViewportVars();

  // add listeners
  window.addEventListener('resize', setViewportVars);
  window.addEventListener('orientationchange', setViewportVars);
  window.addEventListener('fullscreenchange', setViewportVars);

  return (
    <App vw={vw} vh={vh}/>
  );

}

上面的代码会产生错误:重新渲染次数过多。 React 限制渲染次数以防止无限循环。

我可以将 setViewportVars() 包装在 useEffect 中，但我不明白为什么这是必要的。我对功能组件的理解是，它们只在 return 语句之外运行一次代码，并且只有 JSX 会在状态更改时重新渲染。

Answer 1

你必须使用useEffect并传递空数组作为依赖项，所以这只会执行一次，就像componentDidMount:

useEffect(() => {
  setViewportVars();

  // add listeners
  window.addEventListener('resize', setViewportVars);
  window.addEventListener('orientationchange', setViewportVars);
  window.addEventListener('fullscreenchange', setViewportVars);
}, []);