React Hook 'useWindowSize'

需求

• 根据页面 size 展示不同的组件

实现

const getSize = () => {
  return window.innerWidth > 1000 ? "large" : "small";
};
const useWindowSize = () => {
  const [size, setSize] = useState(getSize());
  useEffect(() => {
    const handler = () => {
      setSize(getSize());
    };
    window.addEventListener("resize", handler);
    return () => {
      window.removeEventListener("resize", handler);
    };
  }, []);
  return size;
};

使用

const Demo = () => {
  const size = useWindowSize();
  return size === "small" ? <SmallComponent /> : <LargeComponent />;
};

关联知识点

• 事件监听，移除事件监听
• useEffect 里的 return