当窗口变量在react中发生变化时如何更新状态

在React中，当窗口变量发生变化时，可以通过使用useState钩子来更新状态。

首先，需要导入useState钩子：

import React, { useState } from 'react';

然后，在函数组件中定义状态变量和更新函数：

const [windowSize, setWindowSize] = useState(window.innerWidth);

上述代码中，windowSize是状态变量，setWindowSize是更新函数。初始状态值为window.innerWidth，即窗口的初始宽度。

接下来，可以使用useEffect钩子来监听窗口变化，并在窗口变化时更新状态：

useEffect(() => {
  const handleResize = () => {
    setWindowSize(window.innerWidth);
  };

  window.addEventListener('resize', handleResize);

  return () => {
    window.removeEventListener('resize', handleResize);
  };
}, []);

上述代码中，useEffect钩子接收一个回调函数和一个依赖数组。在回调函数中，我们定义了handleResize函数，用于更新状态。然后，通过window.addEventListener方法监听窗口的resize事件，并在事件发生时调用handleResize函数更新状态。最后，通过window.removeEventListener方法在组件卸载时移除事件监听器。

需要注意的是，依赖数组为空[]，表示只在组件挂载和卸载时执行一次。如果依赖数组中有其他变量，那么当这些变量发生变化时，也会触发回调函数。

完整的代码示例：

import React, { useState, useEffect } from 'react';

const MyComponent = () => {
  const [windowSize, setWindowSize] = useState(window.innerWidth);

  useEffect(() => {
    const handleResize = () => {
      setWindowSize(window.innerWidth);
    };

    window.addEventListener('resize', handleResize);

    return () => {
      window.removeEventListener('resize', handleResize);
    };
  }, []);

  return (
    <div>
      Window Size: {windowSize}px
    </div>
  );
};

export default MyComponent;

这样，当窗口大小发生变化时，状态变量windowSize会自动更新，并且组件会重新渲染显示最新的窗口大小。