教你在react中创建自定义hooks
一、什么是自定义hooks
逻辑复用
简单来说就是使用自定义hook可以将某些组件逻辑提取到可重用的函数中。 自定义hook是一个从use开始的调用其他hook的Javascript函数。
二、不使用自定义hook时
例1：当我们整个页面需要获取用户鼠标移动的坐标时，不使用hook的代码，我们可以这样写
const [position, setPosition] = useState({
x: 0,
y: 0
})
useEffect(() => {
const move = (e) => {
setPosition({ x: e.x, y: e.y })
}
document.addEventListener('mousemove', move)
return () => {
document.removeEventListener('mousemove', move)
}
}, [])
return (
<div>
x:{position.x}
y:{position.y}
</div>
)
例2：当我们页面中有一个图片要跟随鼠标移动时，不使用hook的代码，我们也可以这样写：
const [position, setPosition] = useState({
x: 0,
y: 0
})
useEffect(() => {
const move = (e) => {
setPosition({ x: e.x, y: e.y })
}
document.addEventListener('mousemove', move)
return () => {
document.removeEventListener('mousemove', move)
}
}, [])
return (
<div>
<img
src={img}
style={{
position: 'absolute',
top: position.y,
left: position.x,
}}
alt=""
/>
</div>
)
很明显，以上两个例子呈现效果不同，但使用的逻辑代码大部分相同时，这些逻辑代码我们就可以使用hook进行逻辑复用
三、使用自定义hook
我们提取以上两个例子里可以复用的逻辑代码，新建一个名为useMousePosition的文件
import { useState, useEffect } from 'react'
export default function useMousePosition() {
const [position, setPosition] = useState({
x: 0,
y: 0
})
useEffect(() => {
const move = (e) => {
setPosition({ x: e.x, y: e.y })
}
document.addEventListener('mousemove', move)
return () => {
document.removeEventListener('mousemove', move)
}
}, [])
return position
}
我们在useMousePosition函数中提取了此功能。现在，我们可以将其导入到要使用的任何位置！
最后像使用普通函数那样使用即可
const position = useMousePosition()
return (
<div>
x:{position.x}
y:{position.y}
</div>
)
很明显使代码量减少了
到此这篇关于react中创建自定义hooks的文章就介绍到这了,更多相关react自定义hooks内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！
相关推荐
-
React hooks的优缺点详解
前言 Hook 是 React 16.8 的新增特性.它是完全可选的,并且100%向后兼容.它可以让你使用函数组件的方式,运用类组件以及 react 其他的一些特性,比如管理状态.生命周期钩子等.从概念上讲,React 组件一直更像是函数.而 Hook 则拥抱了函数,同时也没有牺牲 React 的精神原则. 优点: 1.代码可读性更强,原本同一块功能的代码逻辑被拆分在了不同的生命周期函数中,容易使开发者不利于维护和迭代,通过 React Hooks 可以将功能代码聚合,方便阅读维护.例如,每个生
-
记录一次完整的react hooks实践
写在前面 React在16.8版本正式发布了Hooks.关注了很久,最近正好有一个小需求,赶紧来试一下. 需求描述 需求很简单,部门内部的一个数据查询小工具.大致长成下面这样: 用户首次访问页面,会拉取数据展示.输入筛选条件,点击查询后,会再次拉取数据在前端展示. 需求实现 使用React Class Component的写法 如果使用以前的class写法,简单写一下,代码可能大概长成下面这样: import React from 'react'; import { Tabs, Input, R
-
React Hooks的深入理解与使用
你还在为该使用无状态组件(Function)还是有状态组件(Class)而烦恼吗? --拥有了hooks,你再也不需要写Class了,你的所有组件都将是Function. 你还在为搞不清使用哪个生命周期钩子函数而日夜难眠吗? --拥有了Hooks,生命周期钩子函数可以先丢一边了. 你在还在为组件中的this指向而晕头转向吗? --既然Class都丢掉了,哪里还有this?你的人生第一次不再需要面对this. 这样看来,说React Hooks是今年最劲爆的新特性真的毫不夸张.如果你也对react
-
详解如何使用React Hooks请求数据并渲染
前言 在日常的开发中,从服务器端异步获取数据并渲染是相当高频的操作.在以往使用React Class组件的时候,这种操作我们已经很熟悉了,即在Class组件的componentDidMount中通过ajax来获取数据并setState,触发组件更新. 随着Hook的到来,我们可以在一些场景中使用Hook的写法来替代Class的写法.但是Hook中没有setState.componentDidMount等函数,又如何做到从服务器端异步获取数据并渲染呢?本文将会介绍如何使用React的新特性Hook
-
一百多行代码实现react拖拽hooks
前言 源码总共也就一百多行,看完这个大致可以理解一些成熟的react拖拽库的实现思路,比如react-dnd,然后你上手这些库的时候就非常快了. 使用hooks实现的大致效果动图如下: 我们的目标是实现一个useDrag和useDrop的hooks,类似以下用法就可以轻松让元素可以拖拽,并且在拖拽的各个生命周期,如下,可以自定义传递消息(顺便介绍几个拖拽会触发的事件). dragstart:用户开始拖拉时,在被拖拉的节点上触发,该事件的target属性是被拖拉的节点. dragenter:拖拉进
-
React 使用Hooks简化受控组件的状态绑定
开始之前 阅读本文需要对以下几项有一定了解 ECMAScript 6 文章中大量用到了 ES6 语法,比如解构赋值和函数参数默认值.剩余参数.展开语法.箭头函数等. Hooks React 在 16.8 版本中推出了 Hooks,它允许你在"函数组件"中使用"类组件"的一些特性. React 本身提供了一些 Hooks,比如 useState.useReducer 等.通过在一个以"use"作为命名起始的函数中调用这些 Hooks,就得到了一个
-
教你在react中创建自定义hooks
一.什么是自定义hooks 逻辑复用 简单来说就是使用自定义hook可以将某些组件逻辑提取到可重用的函数中. 自定义hook是一个从use开始的调用其他hook的Javascript函数. 二.不使用自定义hook时 例1:当我们整个页面需要获取用户鼠标移动的坐标时,不使用hook的代码,我们可以这样写 const [position, setPosition] = useState({ x: 0, y: 0 }) useEffect(() => { const move = (e) => {
-
JS中创建自定义类型的常用模式总结【工厂模式,构造函数模式,原型模式,动态原型模式等】
本文实例讲述了JS中创建自定义类型的常用模式.分享给大家供大家参考,具体如下: 虽然在 ES6 中,已经出了 class 的语法,貌似好像不用了解 ES5 中的这些老东西了,但是越深入学习,你会发现理解这些模式的重要性. 在本文中,我会描述 7 种常用的创建自定义类型的模式:工厂模式.构造函数模式.原型模式.组合使用构造函数模式.动态原型模式.寄生构造函数模式.稳妥构造函数模式.分别给出他们的示例代码,并分析他们的利弊,方便读者选择具体的方式来构建自己的自定义类型. 最后,我会指出 ES6 中的
-
在WordPress中创建自定义页面模板方法详解
WordPress 页面模板是特定的模板文件,用于特定页面或页面组,这些用于单页数据的模板显示在前端.我们还可以在 WordPress 中创建自定义页面模板. 在本文中,我们将学习如何在 WordPress 中创建自定义页面模板,以及我们如何将自定义模板分配给 WordPress 中的特定页面或页面组. 在 WordPress 中创建自定义页面模板 默认情况下,WordPress 允许使用默认模板文件page.php创建页面和文章来处理前端的外观. 我们还可以对默认模板文件 ( page.php
-
Javascript 中创建自定义对象的方法汇总
Javascript 中创建对象,可以有很多种方法. Object构造函数/对象字面量: 抛开设计模式不谈,使用最基本的方法,就是先调用Object构造函数创建一个对象,然后给对象添加属性. 复制代码 代码如下: var student = new Object(); student.name = "xiao ming"; student.age = 20; student.getName = function () { alert(th
-
Powershell中创建自定义对象例子
支持3.0及以后版本 下面是一个简单有效的创建一个自定义对象的方法: 复制代码 代码如下: $object = [PSCustomObject]@{ Name = 'Weltner' ID = 123 Active = $true } 这将产生一个含初始值的对象: 复制代码 代码如下: PS> $object Name ID Active ----
-
手把手教你在.NET中创建Web服务实现方法
最近发现在.NET平台下使用Web服务还是很简单的.下面举个在.NET平台下创建Web服务的简单例子.首先用Visul Studio .Net创建一个C# 项目Asp.Net Web服务程序,源代码如下: 复制代码 代码如下: using System;using System.Collections;using System.ComponentModel;using System.Data;using System.Diagnostics;using System.Web;using Syst
-
Django3中的自定义用户模型实例详解
介绍 嗨,在这篇文章中,我们将学习在Django 3中创建自定义用户模型,并且还将更改Django Admin的默认登录功能. 我们将使用电子邮件和密码登录. 动机 我必须为我的应用程序创建一个"自定义用户",我能够创建模型,但问题是createsuperuser命令无法正常工作. 为了调试它,我不得不做大量研究,问题是当时大多数资源已经过时,所以我决定写这篇文章. 我做了一个GitHub仓库,所以如果您愿意,可以直接使用它(这里有说明) 让我们开始吧 首先,创建一个Django Pr
-
详解React中的不可变值
什么是不可变值 函数式编程是指程序里面的函数和表达式都能像数学中的函数一样,给定了输入值,输出是确定的.比如 let a = 1; let b = a + 1; => a = 1 b = 2; 变量b出现,虽然使用了变量a的值,但是没有修改a的值. 再看我们熟悉的react中的代码,假如初始化了this.state = { count: 1 } componentDidMount() { const newState = { ...state, count: 2 }; // { count: 2
-
深入浅析React中diff算法
React中diff算法的理解 diff算法用来计算出Virtual DOM中改变的部分,然后针对该部分进行DOM操作,而不用重新渲染整个页面,渲染整个DOM结构的过程中开销是很大的,需要浏览器对DOM结构进行重绘与回流,而diff算法能够使得操作过程中只更新修改的那部分DOM结构而不更新整个DOM,这样能够最小化操作DOM结构,能够最大程度上减少浏览器重绘与回流的规模. 虚拟DOM diff算法的基础是Virtual DOM,Virtual DOM是一棵以JavaScript对象作为基础的树,
-
React函数组件useContext useReducer自定义hooks
目录 一.hooks(useContext) 二.hooks(useReducer) 三.hooks(useContext搭配useReducer使用) 四.自定义hooks 一.hooks(useContext) 接收一个 context 对象(React.createContext 的返回值)并返回该 context 的当前值.当前的 context 值由上层组件中距离当前组件最近的 <MyContext.Provider> 的 value prop 决定. 新建useContext.js