react项目解决浏览器窗口变化重新加载的问题

useEffect, useState, useCallback解决浏览器窗口变化加载问题

初步接触react项目遇到很多问题，这里记录分享一下问题以及解决方法。
f12，切换移动端浏览模式，浏览器窗口变小，项目样式就乱了

需要手动刷新重新加载之后恢复正常.

为了解决这一问题，看了下文档，自己琢磨找到了解决办法。

1、首先全局layouts/index.jsx引入useEffect, useState, useCallback

import React, { useEffect, useState, useCallback } from "react";

2、封装一个监听设置resize的方法

function useWindowSize() {
  const isClient = typeof window === 'object';
  const getSize = useCallback(() => {
    return {
      width: isClient ? window.innerWidth : undefined,
      height: isClient ? window.innerHeight : undefined
    };
  }, [isClient])
  
  const [windowSize, setWindowSize] = useState(getSize);
  useEffect(() => {
    if (!isClient) {
      return false;
    }
    function handleResize() {
      setWindowSize(getSize());
    }
    window.addEventListener('resize', handleResize);
    return () => window.removeEventListener('resize', handleResize);
  }, [getSize, isClient]);
  return windowSize;
}

3、最后加入渲染设置样式

function BasicLayout(props) {
  const clientHeight = useWindowSize().height;
  return (
    <div className={styles.normal} style={{height: clientHeight}}>
      <Header/>
      {props.children}
      <Bottom/>
    </div>
  );
}

export default BasicLayout;

这样无论窗口怎么变化样式就不会乱了，其实就是一个窗口变化，自动重加载的过程。