React的hooks---自定义hooks

通过自定义 Hook,可以将组件逻辑提取到可重用的函数中,在 Hook 特性之前,React 中有两种流行的方式来共享组件之间的状态逻辑:render props高阶组件,但此类解决方案会导致组件树的层级冗余等问题。而自定义 Hook 的使用可以很好的解决此类问题

创建自定义 Hook:

自定义 Hook 是一个函数,其名称以 "use" 开头,函数内部可以调用其他的 Hook。以下就是实时获取鼠标位置的自定义 Hook 实现:

复制代码
import { useEffect, useState } from "react"

export const useMouse = () => {
  const [position, setPosition] = useState({
    x: null,
    y: null
  });

  useEffect(() => {
    const moveHandler = (e) => {
      setPosition({
        x: e.screenX,
        y: e.screenY
      });
    };

    document.addEventListener('mousemove', moveHandler);
    return () => {
      document.removeEventListener('mousemove', moveHandler);
    };
  }, []);

  return position;
}

使用自定义 Hook:

自定义 Hook 的使用规则与 Hook 使用规则基本一致,以下是 useMouse 自定义 Hook 的使用过程:

复制代码
import React from 'react';
import { useMouse } from '../hooks/useMouse';

export default function MouseMove() {
  const { x, y } = useMouse();
  return (
    <>
      <p>Move mouse to see changes</p>
      <p>x position: {x}</p>
      <p>y position: {y}</p>
    </>
  );
}

每次使用自定义 Hook 时,React 都会执行该函数来获取独立的 state 和执行独立的副作用函数,所有 state 和副作用都是完全隔离的

相关推荐
yvvvy4 分钟前
前端性能优化全家桶:从重绘重排到面试连招,一篇搞懂
前端·javascript·面试
1024小神7 分钟前
微信小程序原生wxml中的事件函数
前端
BigTopOne20 分钟前
[kotlin] inline 函数
前端
怪可爱的地球人20 分钟前
typescript-接口
前端
串串狗xk21 分钟前
使用 webgl 写的新概念笔记应用《赛博城寨》,在三维开放世界里写笔记
javascript·webgl
我是ed23 分钟前
# vue实现拖拉拽效果,类似于禅道首页可拖拽排布展示内容(插件-Grid Layout)
前端
东风西巷27 分钟前
微软恶意软件删除工具:官方免费的系统安全防护利器
前端·安全·microsoft·系统安全·软件需求
跟橙姐学代码30 分钟前
手把手教你玩转 multiprocessing,让程序跑得飞起
前端·python·ipython
华仔啊35 分钟前
SpringBoot+MySQL+Vue实现文件共享系统
java·前端·后端
页面仔Dony1 小时前
流式数据获取与展示
前端·javascript