React 自定义 Hook

骑猪看日落 2023-07-11 08:45 16阅读 0赞

> 动态获取浏览器窗口的宽、高

// HookCustomFunction.tsx
    import * as React from 'react';
    
    const useWinSize = () => { 
      const [ size, setSize ] = React.useState({ 
        width: document.documentElement.clientWidth,
        height: document.documentElement.clientHeight
      });
    
      const onResize = React.useCallback(() => { 
        setSize({ 
          width: document.documentElement.clientWidth,
          height: document.documentElement.clientHeight
        });
      }, []);
    
      React.useEffect(() => { 
        window.addEventListener('resize', onResize);
        return () => { 
          window.removeEventListener('resize', onResize);
        }
      // eslint-disable-next-line
      }, []);
    
      return size;
    };
    
    const HookCustomFunction = () => { 
    
      const size = useWinSize();
    
      return (
        <>
          <div>页面的size: {  size.width } * {  size.height }</div>
        </>
      )
    };
    
    export default HookCustomFunction;

发表评论取消回复

表情：

评论列表（有 0 条评论，16人围观）

还没有评论，来说两句吧...

相关阅读

相关如何实现自定义hook？

如何实现自定义hook？自定义 Hook 是一种在 React 中封装可重用逻辑的方式，使得你可以将逻辑从组件中抽离出来，以便在多个组件之间共享。自定义 Hook 的命名应

小灰灰/ 2024年03月23日 22:34/ 0 赞/ 75 阅读

相关使用自定义 Hook 构建 React 模态组件

在本教程中，我们将构建一个自定义 React 模态组件，该组件可用于显示各种 Web 元素，包括：表单、警报消息或图像。让我们开始使用Create React App来设置

末蓝、/ 2023年10月11日 23:12/ 0 赞/ 109 阅读

相关 React Hook - 自定义Hook的基本使用和案例练习

文章目录自定义Hook 自定义Hook基本使用自定义Hook案例练习获取Conte

系统管理员/ 2023年09月27日 09:59/ 0 赞/ 164 阅读

相关 React 自定义 Hook

> 动态获取浏览器窗口的宽、高 // HookCustomFunction.tsx import as React from 'react';

骑猪看日落/ 2023年07月11日 08:45/ 0 赞/ 17 阅读

相关 React Hook的用法： Ref + useMemo + 自定义Hook(三)

React Hook的用法 Ref Hook 这个Hook的作用是可以通过他来获取到Dom元素节点，使用起来非常方便。关键代码如下: const x

Myth丶恋晨/ 2023年05月28日 15:48/ 0 赞/ 1 阅读

相关 react-hook

文章目录 react-hook 一、前言二、useState ：状态钩子 2.1 useState 函数式更新

╰+攻爆jí腚メ/ 2023年01月05日 01:17/ 0 赞/ 259 阅读

相关 react-hooks知识梳理—5.自定义hooks

1.实现一个demo 如下demo，先坚听到浏览器的尺寸变化。 import React, { useState, useEffect } from 'reac

￡神魔★判官ぃ/ 2022年10月31日 05:22/ 0 赞/ 62 阅读

相关 react-hooks: custom hooks

memberEntitiy: export interface MemberEntity { id: number; name: stri

待我称王封你为后i/ 2021年12月24日 13:55/ 0 赞/ 371 阅读

相关 React Hook

-------------------- Hook简介 1. Hook专门用于增强函数组件的功能（Hook在类组件中是不能使用的），使之理论上可以成为类组件的替代品

￡神魔★判官ぃ/ 2021年09月02日 05:49/ 0 赞/ 443 阅读

相关 ReactHook 自定义Hook

自定义Hook本质上就是自定义函数,内部搭配Hook的StateHook等内置方法但是注意,自定义Hook必须要以use开头,React将自动检测是

矫情吗；*/ 2021年07月24日 22:35/ 0 赞/ 411 阅读