闭包 陷阱react hook

React学习笔记10- Ref的应用

用法 1.给标签设置ref="username" 通过这个获取this.refs.username , ref可以获取到应用的真实dom 2. 给组件设置ref="username" 通过这个获取this.refs.username ,ref可以获取到组件对象 写法 import React, { ......
笔记 React Ref 10

React学习笔记09- 事件处理

React采用on+事件名的方式来绑定一个事件,注意,这里和原生的事件是有区别的,原生的事件全是小写 onclick , React里的事件是驼峰 onClick ,React的事件并不是原生事件,而是合成事件。 事件回调的几种写法 1.直接在组件内定义一个非箭头函数的方法,然后在render里直接 ......
事件 笔记 React 09

HOOK技术(以键盘HOOK为例)

一. 回调函数介绍 如果你把函数的指针(地址)作为参数传递给另一个函数,当这个指针被用来调用其所指向的函数时,我们就说这是回调函数。回调函数不是由该函数的实现方直接调用,而是在特定的事件或条件发生时由另外的一方调用的,用于对该事件或条件进行响应。 回调函数的机制如下: 定义一个回调函数; 提供函数实 ......
HOOK 键盘 技术

2023/2024 年 React 组件库 与 相关库 推荐

2023/2024 年 React 组件库 与 相关库 推荐 asdf ​ 展开目录 精挑细选的 React 库 , 质量非常的高. 建议每一个都点进去官网看一看. (知乎不支持表格中的超链接 , 只能用这种普通文本了) 这篇文章会一直持续更新下去.... UI 组件库 ⭐ Material-UI  ......
组件 React 2023 2024

react native 退出登录后清空路由栈并返回登录页

背景: 由于项目使用的expo-router,一开始时在退出登录是如下实现的: import { router } from "expo-router"; ... router.replace("/my/login/login"); ... 使用expo-router的router.replace方 ......
路由 native react

react项目中预览pdf文件

最近需求,要在b端展示上传的pdf文件。实现方式有很多,记录一下我们最常用的pdf.js //安装 "pdfjs-dist": "2.0.402" //引入 import * as pdfjs from 'pdfjs-dist' import * as pdfjsWorker from 'pdfjs ......
文件 项目 react pdf

React学习笔记08- 组件的样式

1.使用行内样式 想给虚拟dom添加行内样式,需要使用表达式传入样式对象的方式来实现: // 注意这里的两个括号,第一个表示我们在要JSX里插入JS了,第二个是对象的括号 <p style={{color:'red', fontSize:'14px'}}>Hello world</p> 行内样式需要 ......
样式 组件 笔记 React 08

Ant Design中表单验证输入框默认值initialValue不更改值会验证不通过(react)

Ant Design中表单验证输入框默认值initialValue不更改值会验证不通过(react) 更改前 <Form.Item label="用户标识" name="id" rules={[ { required: true, message: '用户标识不能为空!', }, ]} > <Inp ......
表单 initialValue Design react Ant

React学习笔记07-组件嵌套

一个项目肯定是由多个组件构成的,组件之前必然会存在相互嵌套的关系 在react中如果想要将一个组件嵌入到另外一个组件中 只需要在父组件的render函数的返回值中放入子组件即可 请看下面代码 import React, { Component } from "react" class Navbar ......
组件 笔记 React 07

React学习笔记06-函数式组件

函数式组件即在React中通过函数的方式来声明一个组件 import React from "react" function App() { return ( <div> 函数式组件 <div>hhh</div> </div> ) } /* 16.8之前 //无状态 16.8之后 react hoo ......
函数 组件 笔记 React 06

import { useRouter } from 'next/router'; 在非hooks 文件或组件中使用

将 import { useRouter } from 'next/router'; 改为 import Router from "next/router"; 使用: Router.push('/'); 原来使用 import { useRouter } from 'next/router'; 会导 ......
组件 useRouter 文件 import router

React学习笔记05-类组件

ES6的加入让JavaScript直接支持使用class来定义一个类,react创建组件的方式就是使用的类的继承, ES6 class 是目前官方推荐的使用方式,它使用了ES6标准语法来构建,看以下代码 import React from 'react' import ReactDOM from ' ......
组件 笔记 React 05

react技术栈更新到uptodate

现在许多东西更新了,react全家桶可能我的技术栈也要更新一下,于是查询官网,先找个方便点的直接起飞,然后看能不能冲出宇宙 首先安装一下 next去, 这个东西是个桶, npx会执行远端的命令,如果本地没有的话,它会自动搜索无端npm的包下载然后执行 npx create-next-app@late ......
uptodate react 技术

react + electron 打包记录

package.json 中的更改: 增加: "homepage": "./", "build": { "productName": "xxxx", "appId": "com.xxx.win", "directories": { "output": "dist" }, "files": [ "di ......
electron react

从闭包谈到高阶函数

1 闭包的概念 闭包是由一个函数以及与其相关的引用环境组合而成的实体。闭包可以在函数内部访问外部函数的变量,并且这些变量可以在外部函数执行结束后仍然保持其状态。听起来可能有点抽象,咱们来段代码: function outerFunction(x) { return function innerFun ......
闭包 高阶 函数

react 公司项目学习 【react+webpack+nw.js + mobx+react-intl 实现的多页面多语言windows桌面端exe】

这几天突然要来个react项目;听说还比较复杂;项目组内就两个人会react还在忙,整组主要是用vue;这不,这种‘狗都不干’的事,被安排到我身上了,那就学吧; 一、研究代码结构 不得不说,这目录结构搞得有点复杂,算是我接触中除了乾坤和electron之外,相当复杂的了,慢慢阅读吧; 看懂了,原来是 ......
react react-intl 桌面 webpack windows

react native app 图标在安卓上内容被切割问题记录

问题背景: react native开发app,设置的app图标在安卓中会被切割,导致周围的留白被切掉,看起来很奇怪。甚至有些文字内容被切割掉,显示不全。 在不同手机上,icon可能会被切割成各种圆角,如果留白不够,内容可能会被切割。在iOS上icon也有相应的规范,比如需要1024尺寸等。 解决方 ......
图标 内容 native 问题 react

React学习笔记04-JSX语法

1.JSX语法 JSX 将 HTML 语法直接加入到 JavaScript 代码中,再通过翻译器转换到纯 JavaScript 后由浏览器执行。 在实际开发中,JSX 在产品打包阶段都已经编译成纯 JavaScript,不会带来任何副作用,反而会让代码 更加直观并易于维护。 编译过程由Babel 的 ......
语法 笔记 React JSX 04

app逆向day03-反编译工具和hook框架

一 反编译工具 1.1 常见反编译工具 常见的反编译工具:jadx(推荐)、jeb、GDA 反编译工具依赖于java环境,所以我们按照jdk 1.2 JDK环境安装 # 官方地址:(需要注册-最新java 21) https://www.oracle.com/java/technologies/do ......
框架 工具 hook app day

React-Admin后台管理模板|react18+arco+zustand后台解决方案

基于react18.x+vite4+arco-design自研中后台管理系统解决方案ReactAdmin。 react-vite-admin 基于vite4搭建react18.x后台管理项目。使用了react18 hooks+arco.design+zustand+bizcharts等技术实现权限管 ......

React 18 并发渲染

一 升级react 18 React 18 改变 所有setState 都是异步,不管是否在react的“管辖范围内”。原来在定时器,在监听函数中是同步的。 Root 书写方式 需要改变 Router 需要改变?? 二 启用并发渲染 useDeferredValue const [text, set ......
React 18

React-redux 中useSelector使用

在一个 action 被分发(dispatch) 后,useSelector() 默认对 select 函数的返回值进行引用比较 ,并且仅在返回值改变时触发重渲染。但是,不同于 connect(),useSelector()并不会阻止父组件重渲染导致的子组件重渲染的行为,即使组件的 props 没有 ......
React-redux useSelector React redux

React学习笔记03-编写第一个react应用程序

react开发需要引入多个依赖文件:react.js,react-dom.js,分别又有开发版本和生成版本,creat-react-app里已经帮我们把这些东西都安装好了。把通过CRA创建的 工程目录下的src目录情况,然后在里面重新创建一个index.js写入以下代码。 //从react的包当中引 ......
应用程序 笔记 程序 React react

装饰器、闭包

用到了老是忘记,还是记录一下吧, 装饰器、闭包 python的装饰器、闭包是进入Python高级语法的基础,使用装饰器之前,有以下条件: 存在闭包 存在需要被装饰的函数 理解函数地址的概念 理解函数的地址值 众所周知,我们定义函数后,函数名加()可以调用函数,那么我们尝试调用一下函数名呢? def ......
闭包

React学习笔记02-创建React项目

1.全局安装create-react-app npm install -g create-reat-app 2.创建一个React项目 create-react-app myapp 注意命名规范不能大写,中文等 如果不想全局安装,可以直接使用npx npx create-react-app myap ......
React 笔记 项目 02

React学习笔记01-React的基本认识

1.React起源与发展 React 起源于 Facebook 的内部项目,因为该公司对市场上所有 JavaScript MVC 框架,都不满意,就决 定自己写一套,用来架设Instagram 的网站。做出来以后,发现这套东西很好用,就在2013年5月开源 了。 2.React与传统MVC的关系 轻 ......
React 笔记 01

第二轮的时间陷阱——写在赛后

我真的困死了。 话说回来,最近我有了一个想法,鉴于本校高三的成绩实在不甚理想,所以我就开始怀疑竞赛看第二轮到底有没用。 然后根据一些我的个人经验,提出了这样一个观点。 竞赛的第二轮如果还和第一轮一样看,大概率没有进步甚至会退步。 首先,如果你是一个小众竞赛的学生,你在第二轮一定会对自己有更高的要求, ......
陷阱 时间

Go 匿名函数与闭包

Go 匿名函数与闭包 匿名函数和闭包是一些编程语言中的重要概念,它们在Go语言中也有重要的应用。让我们来详细介绍这两个概念,并提供示例代码来帮助理解。 目录Go 匿名函数与闭包一、匿名函数(Anonymous Function)二、闭包函数(Closure) 一、匿名函数(Anonymous Fun ......
闭包 函数 Go

remotion 基于react 创建视频的框架

remotion 可以让我们直接基于react 创建视频,使用到的技术webgl,css,canvas,svg 说明 对于希望使用web 创建使用的场景这个是一个不错的选择(比如营销动画),很值得学习下 参考资料 https://www.remotion.dev/docs/https://githu ......
框架 remotion react 视频

初探富文本之React实时预览

初探富文本之React实时预览 在前文中我们探讨了很多关于富文本引擎和协同的能力,在本文中我们更偏向具体的应用组件实现。在一些场景中比如组件库的文档编写时,我们希望能够有实时预览的能力,也就是用户可以在文档中直接编写代码,然后在页面中实时预览,这样可以让用户更加直观的了解组件的使用方式,这也是很多组 ......
实时 文本 React