当前位置: 首页 > news >正文

react hook

react hook

最近实习有点忙,所以学习记录没来得及写。

HOC higher order components(HOC)

高阶组件是一个组件,接受一个参数作为组件,返回值也是一个组件的函数。高阶组件作用域强化组件,服用逻辑,提升渲染性能等。

mixin模式

const customMixin = {componentDidMount() {console.log('componentDidmount')},say() {console.log(this.state.name)}
}
const App = React.createClass({mixins: [ customMixin ],getInitialState() {return {name:"alien"}}
})

mixins只能存在与creatreClass中,后来的React.createClass被废弃了。mixins会带开负面影响

  1. 引入了隐式依赖关系
  2. 不同的mixins之间可能会有先后顺序甚至是代码覆盖的问题

衍生方式-- 原型链继承

const customMixin = {componentDidMount() {console.log('componentDidmount')},say() {console.log(this.state.name)}
}
function componentClassMixins(component, mixin) {for(let key in mixin) {Component.prototype[key] = mixin[key]}
}
class Index extends React.Component {constructor() {super()this.state = {name: 'alien'}}render () {return <div> hello world</div>}	
}
componentClassMixins(Index, customMixin)

HOC模式

将一个组件转换为另一个组件,经过包装后的组件,获得了多少强化,解决了原有组件的那些缺陷,节省了多少逻辑,这就是高阶组件的意义。
使用装饰器模式和函数包裹模式
对于class生命的有状态的组件,可以使用装饰器模式,对类组件进行包装

function HOC(Component) {return class wrapComponent extends React.Component {constructor() {super()this.state = {name: "alien"}}render = () => <Component {...this.props} {...this.state} />}
}
@HOC
class Index extends React.Component {say() {const { name } = this.propsconsole.log(name)}render() {return <div>hello, world<button onClick={this.say.bind(this)}> 点击</button>}
@withStyles(styles)
@withRouter
@keepaliveLifeCycle
class Index extends React.Component {/*...*/
}
function Index() {//
}
export default withStyles(styles)(withRouter(keepaliveLifeCycle(Index)))
补充设计模式— 装饰器设计模式

装饰器就是将一段代码和另一端代码包装在一起的一种方式。
装饰器支持类和类的成员上的装饰器类型,包括属性,方法,getter和setter。
类修饰符一次性应用于整个类定义,装饰器函数使用单个参数调用,该参数就是要装饰的构造函数。

function log(Class) {return (...args) => {console.log(args)return new Class(...args)}
}
@log
class Animal {constructor(name, age) {this.name = namethis.age = age}
}
const cat = new Animal("hello", 1)
// ["hello", 2]
function log(name) {return function decorator(Class) {return (..args) => {console.log(`log for ${name}:`, args)return new Class(...args)}}
}
@log(cat)
class Animal {constructor(name, age) {this.name = namethis.age = age}
}
const cat = new Animal("hello world", 2)
// log for cat: ["hello world", 2]

类成员装饰器

  • target: 要修改属性的对象
  • name: 要修改的属性的名称
  • descriptor:要修改的属性描述符
function readonly(target, name, descriptor) {descriptor.writable = falsereturn descriptor
}
class Anmimal {@readonly age = 2
}
const cat = new Animal()
// {age: 2}
function log(target, name, descriptor) {const original = descriptor.valueif(typeof original === 'function') {descriptor.value = function(...args) {console.log(`log for args: ${args]`)try {return original.apply(this, args)} catch (e) {console.log(`Error: ${e}`)throw e}}}return descriptor
}
class Animal {constructor(name) {this.name = name}@logsayHello(name) {console.log(`hello ${name}`)}
}
const cat = new Animal('hello')
cat.sayHello('jack')
function log(name) {return function decorator(target, name, descriptor) {const original = descriptor.valueif(typeof original == 'function') {console.log(`${name}`)}return descriptor}
}

学到这里感觉和继承有很深关联,回头学一学这个模块,然后产出一篇文章。

useState

异步批量是指在一次页面更新中如果涉及到多次state修改的时候,会合并多次state修改的结果得到最终结果而进行一次页面更新

  1. react可以管控的地方,是异步批量更新,比如事件函数,生命周期函数,组件内部同步代码
  2. react不能管控的地方,就是同步更新,settimeout,setinterval,原生dom等,包括promise都是同步批量更新。

useEffect

useEffect 被称为副作用钩子,这个 Hook 和 useState 一样是一个基础钩子。Effect Hook 可以让你在函数组件中执行副作用操作。
useEffect Hook 支持两个参数,第一个参数为一个函数表示副作用效应函数,默认情况下它在第一次渲染之后和每次更新之后都会执行。
第二个参数是一个数组,指定了第一个参数(副效应函数)的依赖项。只有该数组中的变量发生变化时,副效应函数才会执行。

useContext

Vue 中的 provide/inject Api

useReducer

const [state, dispatch] = useReducer(reducer, initialArg, init);

使用 useReducer 还能给那些会触发深更新的组件做性能优化,因为你可以向子组件传递 dispatch 而不是回调函数。在某些场景下我们通常会将函数作为 props 传递到 child component 中去,这样的话,每次父组件 re-render 时即使我们并没有修改当作 props 的函数,子组件也会重新渲染。React 每次渲染都会重新执行组件函数,当重新执行父组件时会重新生成一个 callback 函数。因为 React 内部使用 Object.is 判断,所以 React 会认为子组件的 props 发生了变化。

useMemo

useCallback

第一个参数是一个函数,这个函数仅会在对应依赖项发生变化之后才会被重新生成,或者说这个函数被产生「记忆」。

第二个参数是一个数组,它表示第一个参数所依赖的依赖项,仅在该数组中某一项发生变化时第一个参数的函数才会「清除记忆」重新生成。

useRef

useRef Hook 的作用主要有两个:

  1. 多次渲染之间保证唯一值的纽带。useRef 会在所有的 render 中保持对返回值的唯一引用。因为所有对ref的赋值和取值拿到的都是最终的状态,并不会因为不同的 render 中存在不同的隔离。
  2. 获取 Dom 元素

useLayoutEffect

useLayoutEffect 与 useEffect 使用方式是完全一致的,useLayoutEffect 的区别在于它会在所有的 DOM 变更之后同步调用 effect。
可以使用它来读取 DOM 布局并同步触发重渲染。在浏览器执行绘制之前, useLayoutEffect 内部的更新计划将被同步刷新。
[还是得阅读源码]

相关文章:

react hook

react hook 最近实习有点忙&#xff0c;所以学习记录没来得及写。 HOC higher order components(HOC) 高阶组件是一个组件&#xff0c;接受一个参数作为组件&#xff0c;返回值也是一个组件的函数。高阶组件作用域强化组件&#xff0c;服用逻辑&#xff0c;提升渲染性能等。…...

Jetpack架构组件_LiveData组件

1.LiveData初识 LiveData:ViewModel管理要展示的数据&#xff08;VM层类似于原MVP中的P层&#xff09;&#xff0c;处理业务逻辑&#xff0c;比如调用服务器的登陆接口业务。通过LiveData观察者模式&#xff0c;只要数据的值发生了改变&#xff0c;就会自动通知VIEW层&#xf…...

Etcd 可观测最佳实践

简介 Etcd 是一个高可用的分布式键值存储系统&#xff0c;它提供了一个可靠的、强一致性的存储服务&#xff0c;用于配置管理和服务发现。它最初由 CoreOS 开发&#xff0c;现在由 Cloud Native Computing Foundation (CNCF) 维护。Etcd 使用 Raft 算法来实现数据的一致性&…...

钉钉录播抓取视频

爬取钉钉视频 免责声明 此脚本仅供学习参考&#xff0c;切勿违法使用下载他人资源进行售卖&#xff0c;本人不但任何责任! 仓库地址: GItee 源码仓库 执行顺序 poxyM3u8开启代理getM3u8url用于获取m3u8文件userAgent随机请求头downVideo|downVideoThreadTqdm单线程下载和…...

centos下面的jdk17的安装配置

文章目录 1.基本指令回顾2.jdk17的安装到这个centos上面2.1首先切换到这个root下面去2.2查看系统jdk版本2.3首先到官网找到进行下载2.4安装包的上传2.5jdk17的安装包的解压过程2.6配置环境变量2.7是否设置成功&#xff0c;查看版本 1.基本指令回顾 ls:list也就是列出来这个目录…...

【操作系统】——调度

&#x1f339;&#x1f60a;&#x1f339;博客主页&#xff1a;【Hello_shuoCSDN博客】 ✨操作系统详见 【操作系统专项】 ✨C语言知识详见&#xff1a;【C语言专项】 目录 处理机调度的概念、层次 进程调度的时机、切换与过程、方式 调度器和闲逛进程 处理机调度的概念、层…...

基于Aspose依赖添加自定义文本水印——Word、Pdf、Cell

基于Aspose依赖添加自定义文本水印——Word、Pdf、Cell 所需依赖Word水印Pdf水印——&#xff08; 注意 pdf 存在找不到字体的问题&#xff09;Excel水印 所需依赖 <dependency><groupId>com.aspose</groupId><artifactId>aspose-pdf</artifactId&g…...

【C++】—掌握STL string类:字符串操作的得力助手

#1024程序员节&#xff5c;征文# 文章目录 繁星点点映夜空&#xff0c;晨曦微露照前程1.string的基本概念2.标准库中的string类2.1 string类2.2 auto和范围for2.3 string类常用的接口2.4 string类对象的容量操作2.5 string类对象的访问及遍历操作2.6 string类对象的修改操作2…...

【Java笔记】第十四章:异常

一、概念【理解即可】 1. 异常&#xff1a;程序运行过程中&#xff0c;出现的非正常情况。 2. 异常的处理&#xff1a;当异常出现时&#xff0c;执行一段预先准备好的代码。 3. 异常的处理的必要性&#xff1a;减少用户的损失、同时减小给用户带来麻烦&#xff0c;也可以对用…...

Python游戏开发超详细(基础理论知识篇)

一、引导&#xff1a; Python游戏开发是一个非常有趣且富有挑战性的领域。通过Python&#xff0c;你可以利用其强大的库和框架来创建各种类型的游戏&#xff0c;从简单的2D游戏到复杂的3D游戏。以下是第一课的基础理论知识&#xff0c;帮助你入门Python游戏开发。 二、理论知识…...

Python开发日记 -- 实现bin文件的签名

目录 1.数据的不同表现形式签名值不一样&#xff1f; 2.Binascii模块简介 3.问题定位 4.问题总结 1.数据的不同表现形式签名值不一样&#xff1f; Happy Muscle试运行了一段时间&#xff0c;组内同事再一次提出了新的需求&#xff1a;需要对bin文件签名。 PS&#xff1a;服…...

微软运用欺骗性策略大规模打击网络钓鱼活动

微软正在利用欺骗性策略来打击网络钓鱼行为者&#xff0c;方法是通过访问 Azure 生成外形逼真的蜜罐租户&#xff0c;引诱网络犯罪分子进入以收集有关他们的情报。 利用收集到的数据&#xff0c;微软可以绘制恶意基础设施地图&#xff0c;深入了解复杂的网络钓鱼操作&#xff…...

小程序无法获取头像昵称以及手机号码的深度剖析与解决方案

在当今数字化时代,小程序以其便捷、高效的特点,成为了人们生活和工作中不可或缺的一部分。然而,有时候开发者会遇到小程序无法获取头像昵称以及手机号码的问题,这给用户体验和业务流程带来了极大的困扰。本文将深入探讨这个问题的原因,并提供相应的解决方案。 一、引言 小…...

从0到1,搭建vue3项目

一 Vite创建Vue3项目 1.1.创建Vue3项目 1.1.1.运行创建项目命令 # 使用 npm npm create vitelatest 1.1.2、填写项目名称 1.1.3、选择前端框架 1.1.4、选择语法类型 1.1.5、按提示运行代码 1.1.6浏览器问 localhost:5173 预览 1.2项目结构 1.2.1vite.config.ts 1.2.2 pac…...

Mybatis mapper文件 resultType和resultMap的区别

在 MyBatis 中&#xff0c;resultType 和 resultMap 都用于定义从数据库查询结果到 Java 对象的映射规则&#xff0c;但它们之间存在着一些关键的区别。以下是对这两者的详细说明和区别&#xff1a; 1. resultType 定义 resultType 是 MyBatis 查询语句中的一个属性&#xf…...

文件下载漏洞

文件安全 文件下载 常见敏感信息路径 Windows C:\boot.ini //查看系统版本 C:\Windows\System32\inetsrv\MetaBase.xml //IIS配置文件 C:\Windows\repair\sam //存储系统初次安装的密码 C:\Program Files\mysql\my.ini //Mysql配置 C:\Program Files\mysql\data\mysql\user.…...

【Flutter】状态管理:Provider状态管理

在 Flutter 开发中&#xff0c;状态管理是一个至关重要的部分。随着应用的规模和复杂性增加&#xff0c;简单的局部状态管理&#xff08;如 setState() 和 InheritedWidget&#xff09;可能变得难以维护和扩展。Provider 是一种推荐的、广泛使用的 Flutter 状态管理工具&#x…...

来个Oracle一键检查

启停、切换、升级、网络改造等场景下&#xff0c;需要对数据库有些基本检查操作&#xff0c;确认当前是否运行正常&#xff0c;主打一个简单和一键搞定。 #!/bin/bash## 实例个数 告警日志 实例状态 会话 活动会话 锁 集群状态 服务状态 磁盘空间 侦听日志 ## linux vmstat 2 …...

C语言中的分支与循环(中 1)

关系操作符 C语言用于比较的表达式&#xff0c;称为"关系表达式"&#xff0c;里面使用的运算符称为关系运算符&#xff0c;关系运算符主要有以下6类。 > 大于运算符< 小于运算符>大于等于运算符< 小于等于运算符 相等运算符! 不相等运算符 下面是例子:…...

Git_GitLab

Git_GitLab 安装 服务器准备 安装包准备 编写安装脚本 初始化 GitLab 服务 启动 GitLab 服务 浏览器访问 GitLab GitLab 创建远程库 IDEA 集成 GitLab 安装 GitLab 插件 设置 GitLab 插件 安装 服务器准备 准备一个系统为 CentOS7 以上版本的服务器&#xff0c;使…...

如何自定义一个自己的 Spring Boot Starter 组件(从入门到实践)

文章目录 一、什么是 Spring Boot Starter&#xff1f;二、为什么要自定义 Starter&#xff1f;三、自定义 Starter 的基本步骤1. 创建 Maven 项目2. 配置 pom.xml3. 创建自动配置类4. 创建业务逻辑类5. 创建 spring.factories 四、使用自定义 Starter五、总结推荐阅读文章 在使…...

CSS伪元素以及伪类和CSS特性

伪元素&#xff1a;可以理解为假标签。 有2个伪元素 &#xff08;1&#xff09;::before &#xff08;2&#xff09;::after ::before <!DOCTYPE html> <html> <head><title></title><style type"text/css">body::before{con…...

【论文笔记】Instantaneous Perception of Moving Objects in 3D

原文链接&#xff1a;https://arxiv.org/abs/2405.02781 简介&#xff1a;本文主张自动驾驶中细微运动的瞬时检测和量化与一般的大型运动同等重要。具体来说&#xff0c;由于激光雷达点云缺乏帧间对应关系&#xff0c;静态物体可能看起来在运动&#xff08;称为游泳效应&#x…...

Segugio:一款针对恶意软件的进程执行跟踪与安全分析工具

关于Segugio Segugio是一款功能强大的恶意软件安全分析工具&#xff0c;该工具允许我们轻松分析恶意软件执行的关键步骤&#xff0c;并对其进行跟踪分析和安全审计。 Segugio允许执行和跟踪恶意软件感染过程中的关键步骤&#xff0c;其中包括从点击第一阶段到提取恶意软件的最…...

互联网系统的微观与宏观架构

互联网系统的架构设计&#xff0c;通常会根据项目的体量、业务场景以及技术需求被划分为微观架构&#xff08;Micro-Architecture&#xff09;和宏观架构&#xff08;Macro-Architecture&#xff09;。这两者的概念与职责既独立又相互关联。本文将通过一些系统案例&#xff0c;…...

数据库、数据仓库、数据湖和数据中台有什么区别

很多企业在面对数据存储和管理时不知道如何选择合适的方式&#xff0c;数据库、数据仓库、数据湖和数据中台&#xff0c;这些方式都是什么&#xff1f;有什么样的区别&#xff1f;企业根据其业务类型该选择哪一种&#xff1f;本文就针对这些问题&#xff0c;来探讨下这些方式都…...

vscode配色主题与图标库推荐

vscode配色主题推荐:Andromedavsocde图标库&#xff1a; vscode-icons Andromeda Dark theme with a taste of the universe 仙女座&#xff1a;一套宇宙深空体验的哑暗色主题; 高对比度,色彩饱和; Easy Installation Open the extensions sidebar on Visual Studio CodeSear…...

深度学习模型入门教程:从基础到应用

深度学习模型入门教程&#xff1a;从基础到应用 前言 在人工智能的浪潮中&#xff0c;深度学习作为一种强大的技术&#xff0c;正在各行各业中发挥着越来越重要的作用。从图像识别到自然语言处理&#xff0c;深度学习正在改变我们的生活和工作方式。本文将带您深入了解深度学…...

数据结构 软考

算法具有5个特性 可行性&#xff0c;有限性&#xff0c;确定性&#xff0c;输入, 输出 图: 有向图 Kruskal(克鲁斯卡尔)算法 和 prim(普鲁姆)算法 都是贪心算法 是一种用来在加权连通图中寻找最小生成树的算法,其操作对象是边. 找最小的不形成环 1.哈夫曼树(也叫最优树)…...

colcon构建ros2功能包时,出现exited with code 2报错的解决方案(bug)

背景&#xff1a; 在学习ros2时&#xff0c;跟着别人的示例进行构建&#xff0c;手敲的代码难免有一些语法错误。 问题&#xff1a; 在colcon构建时&#xff0c;并不会直接输出语法报错。而是出现exited with code 2错误&#xff0c;并提示未能生成功能包&#xff0c;就算加入…...

台州网站搭建/推广方案的推广内容怎么写

1&#xff0c;REINFORCE 在车杆环境中进行 REINFORCE 算法的实验&#xff1a; import gym import torch import torch.nn.functional as F import numpy as np import matplotlib.pyplot as plt from tqdm import tqdm import rl_utils 首先定义策略网络 PolicyNet&#xff0c;…...

电商网站的模式/厦门站长优化工具

岗位职责1、负责公司手机平台的后台即时通讯(IM)模块的设计&#xff0c;开发和优化工作&#xff0c;并可支持百万级并发量&#xff1b;2、负责IM服务器架构搭建、数据库搭建、后台程序开发、与手机客户端接口的开发&#xff1b;3、负责研究和应用OpenFire、Tigase、Smack、Spar…...

二手书哪个网站做的好/付费推广外包

EnableAutoConfiguration注解通常用在Spring Boot项目的主类上&#xff0c;用于启用自动配置。它通过扫描项目中的依赖和类路径配置自动配置Spring应用程序上下文&#xff0c;从而简化了配置过程。这样&#xff0c;您可以快速构建和运行Spring Boot应用程序&#xff0c;而无需手…...

北京网站设计定制开发建设公司/域名注册平台有哪些

一、登录阿里云, 找到对象存储oss 二、创建Bucket 三、获取操作oss的4个配置 地域节点 AccessKey ID 和 AccessKey Secret Bucket名称...

营销网站/东莞网络推广

新添加一个收藏&#xff0c;把网页地址改为以下js脚本&#xff1a; 1 javascript:navigator.__defineGetter__(platform,function(){return}) 当下载文件时&#xff0c;先点击一次书签栏&#xff08;收藏栏&#xff09;的绕过代码书签&#xff0c;再次点击“下载”就可以实现跳…...

做 理财网站/seo主要优化

1&#xff1a; 常量 Java finanal PHP const 2 数据的定义&#xff1a; 声明数组 数据类型[ ] 数组名 或者 数据类型 数组名[ ]&#xff1b; int[] scores ;或者 int scores[]; 分配空间 数组名 new 数据类型 [ 数组长度 ]; scores new int[5] 我们也可以将上…...