做网站莱芜,免费查询个人信息,中国乐清,在线学做衣服 的网站通过自定义 Hook#xff0c;可以将组件逻辑提取到可重用的函数中#xff0c;在 Hook 特性之前#xff0c;React 中有两种流行的方式来共享组件之间的状态逻辑#xff1a;render props和高阶组件#xff0c;但此类解决方案会导致组件树的层级冗余等问题。而自定义 Hook 的使…通过自定义 Hook可以将组件逻辑提取到可重用的函数中在 Hook 特性之前React 中有两种流行的方式来共享组件之间的状态逻辑render props和高阶组件但此类解决方案会导致组件树的层级冗余等问题。而自定义 Hook 的使用可以很好的解决此类问题
创建自定义 Hook:
自定义 Hook 是一个函数其名称以 “use” 开头函数内部可以调用其他的 Hook。以下就是实时获取鼠标位置的自定义 Hook 实现
import { useEffect, useState } from reactexport 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 (pMove mouse to see changes/ppx position: {x}/ppy position: {y}/p/);
}每次使用自定义 Hook 时React 都会执行该函数来获取独立的 state 和执行独立的副作用函数所有 state 和副作用都是完全隔离的
