React 自定义hooks

功能描述

实时获取当前浏览器窗口大小

思路

1. 使用useState初始化窗口大小state
2. 使用useEffect在组件创建时绑定resize事件，resize时重新设置state (使用useCallback节流),组件销毁时解绑事件
3. 在组件内使用

自定义hooks-useWinSize代码

/**
* hooks.js
*/
import React, { useState, useCallback, useEffect } from "react";

export const useWinSize = () => {
  // 1. 使用useState初始化窗口大小state
  const [size, setSize] = useState({
    width: document.documentElement.clientWidth,
    height: document.documentElement.clientHeight
  });

  const changeSize = useCallback(() => {
    // useCallback 将函数缓存起来 节流
    setSize({
      width: document.documentElement.clientWidth,
      height: document.documentElement.clientHeight
    });
  }, []);
  // 2. 使用useEffect在组件创建时监听resize事件，resize时重新设置state (使用useCallback节流)
  useEffect(() => {
    //绑定一次页面监听事件 组件销毁时解绑
    window.addEventListener("resize", changeSize);
    return () => {
      window.removeEventListener("resize", changeSize);
    };
  }, []);

  return size;
};

组件内使用

import React from "react";
import { useWinSize } from "../hooks";

export default () => {
  const size = useWinSize();

  return (
    <div>
      页面大小: `{size.width}*{size.height}`
    </div>
  );
};

效果

完整代码