自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+

hopefullman的博客

IT前端开发

  • 博客(107)
  • 收藏
  • 关注

原创 React Hooks使用方法:useState,useRef,useEffect,useReducer,useContext用法实战案例

react hooks介绍,包括了state,ref,effect,reducer,context等常见hooks,也包括forwardRef和createContext用法,下面看代码吧,我用的是js写的。每个hook都做了个案例。

2025-03-26 20:20:41 315

原创 使用vite脚手架搭建react项目

然后回自动提示一些选择项,例如framework你要用哪个?你舅妈慢慢根据自己情况来选择就行了。都选好了,就会告诉你DONE了,可以开始进入项目启动了。下面就是进入你创建的项目,我的是my-react-app,然后npm install ,install结束后,就可以启动项目了。(my-react-app 这是我自己的项目名,你自己可以随便取名字)替换npm install -g create-react-app。新的脚手架据说很快,是原来的webpack的700倍。先会问你,确定继续吗?

2025-03-14 11:57:45 302

原创 react中如何使用使用react-redux进行数据管理

以上就是react-redux的使用过程,下面我们开始优化部分:当一个组件只有一个render生命周期,那么我们可以改写成一个无状态组件(UI组件到无状态组件,性能提升更好)

2025-03-05 15:04:56 283

原创 react中如何使用redux,真实代码演示,并如何优化action

react中数据管理使用什么?首选redux。redux怎么使用?如何和我们的react相结合呢?以及优化redux中action?

2025-03-03 13:37:54 561

原创 react 编写一个待办事项,函数优化,组件传值

react 函数优化和组件传值

2025-03-02 16:45:24 817

原创 javascript this 关键字

在 JavaScript 中 this 不是固定不变的,它会随着执行环境的改变而改变。

2025-02-24 12:38:02 592

原创 javascript 正则表达式

正则表达式(英语:Regular Expression,在代码中常简写为regex、regexp或RE)使用单个字符串来描述、匹配一系列符合某个句法规则的字符串搜索模式。搜索模式可用于文本搜索和文本替换。search() 和 replace()search() 方法用于检索字符串中指定的子字符串,或检索与正则表达式相匹配的子字符串,并返回子串的起始位置。replace() 方法用于在字符串中用一些字符串替换另一些字符串,或替换一个与正则表达式匹配的子串。 修饰符 可以在全局搜索中不区分大小写:方括号用于查找

2025-02-23 15:46:33 838

原创 微信小程序网络请求封装

微信小程序网络封装

2025-02-12 15:24:03 673

原创 nodejs和npm在gitbash中提示Not Found情况的解决办法

很多小伙伴学习了node以后,在cmd命令行中可以正常的获取node版本和npm版本,但是我们经常使用gitbash来管理git,这时候下载完gitbash后,在gitbash中输入node -v和npm -v会提示Not Found。其实就是环境变量问题导致的,点击开控制面板—>系统(见下图)

2024-11-15 13:36:58 714 2

原创 React 中websocket使用

【代码】React 中websocket使用。

2021-12-09 12:00:43 1735

原创 axios封装和refresh_token请求的问题

1.先说下我的需求:1.1为了方便以后管理axios,我封转了下一层axios,并把它叫做util。至于后面的一些具体的请求,我并没有封装成类似action函数或者对象。(因为懒,就先把axios对象搞了一层封装仅此而已)1.2登陆成功后获取到token和refresh_token,其中token有效时间是两个小时,refresh_token永久有效。token过期后需要用refresh_token重新请求,获取一个新的token和refresh_token。同时根据情况把token加在了c...

2021-12-08 16:47:33 1459

原创 React中Promise对象和Axios插件组合使用

看见你们写封装我都闹心,axios不就是promise的二次封装了,天天看面试题里面写的,axios是又XMlhttpRequest又 node中http 又从promise哪里搞了几个api。说到底,axios不就是他们几个东西的从新组合产生的一个玩意吗?那还用promise封装axios干什么?吃饱闲的吧。。。Login(){ var username=this.state.tel; var password=this.state.password; let promise=...

2021-09-16 20:54:05 426

原创 Https 连接和断开过程

http协议属于明文传输协议,交互过程以及数据传输都没有进行加密,通信双方也没有进行任何认证,通信过程非常容易遭遇劫持、监听、篡改,严重情况下,会造成恶意的流量劫持等问题,甚至造成个人隐私泄露(比如银行卡卡号和密码泄露)等严重的安全问题。1、客户端发送请求到服务端,建立连接(http三次握手)2、客户端发送请求到服务端,建立连接(SSL/TSL握手)1)、客户端发起https请求,服务...

2021-09-16 11:56:48 824

原创 ES6 新增属性方法的学习记录

1.let 命令1..新增了let命令,用来声明变量。它的用法类似于var,但是所声明的变量,只在let命令所在的代码块内有效。2.不存在变量声明的提升,变量一定要在声明后使用,否则报错。3.暂时性死区var tmp = 123;if (true) { tmp = 'abc'; // ReferenceError let tmp;}上面代码中,存在全局变量tmp,但是块级作用域内let又声明了一个局部变量tmp,导致后者绑定这个块级作用域,所以在let声明变量前,对t

2021-09-16 11:51:19 434

原创 javascript 原型和原型链(图文)

原型链:肯定是抽象的,想要知道原型链,必须知道原型,构造函数,实例之间的关系!我说下我理解的原型链:对象通过自身__proto__属性向上查找的过程!我说完了,结合下面的笔记,小伙伴理解下.........构造函数创建对象:function Person() {}var person = new Person();person.name = 'Kevin';consol...

2021-09-10 11:05:32 83

原创 Antd design pro 网站favicon.ICO图标 网页LOGO图标 左侧边栏LOGO文字 默认登陆页面LOGO 页面Loading样式修改

默认loading样式时一个爱的魔力转圈圈,怎么改成你自己的,在哪里改?src / component/pageLoading.ts 修改这个文件就好了。默认网站favicon.ico 是一个antd design官方的,怎么改成你自己的,在哪里改?public / icons/ 这里就可以修改了网页LOGO图标 左侧边栏LOGO文字 默认登陆页面LOGO,怎么改成你自己的,在哪里改?在src /assets 默认有个logo.svg或者png的logo,先把图片替换称自己的,.

2021-05-09 16:24:18 2372

原创 Antd design pro 页面顶部用户信息和底部链接修改

创建好的Antd design pro 项目顶部用户信息 底部信息 菜单 都是默认的,怎么改成自己的,下面告诉你..第一处怎么修改?在哪里修改?src / component /GlobalHeader/RightContent.ts 对应的是搜索小图标和问号小图标,还有里面搜索一些提示以及交互。src / component /GlobalHeader/AvatarDropdown.ts 对应的是登录账户信息。第二处怎么改?在哪里改?src / layouts /BasicLa..

2021-05-09 12:01:06 2265 2

原创 antd design pro 网络交互请求和跨域问题

今天来聊一聊 antd design pro 网络交互请求这个小东东前几天发布了一个关于antd design pro 环境搭建的文本教程,相学习的可以来这里找一找。下面我们开始巴拉巴拉巴拉。官网的一大堆废话就不说了,就三点 :model, sevicers ,view(组件层)怎么关联和使用是关键。1.servicers里你就放一些api的url请求地址就好,抽相为方法即可,也可以分不同文件存放具体的services。我下面的就是在services文件下有分了个login目录,用来单独

2021-05-07 14:02:33 2952 2

原创 Sublime Text3 安装插件

Sublime Text3 安装插件首先确定你的subilme 安装了PC没有,也就是package Control这个小东东,没有的话就安装下。两种安装package Control方法:1.快捷键 ctrl+shift+p 然后找一找 Install Package Control 点他就完了。2.菜单栏里面安装 tools 在找一找Install Package Control。温馨提示 :以上安装Package Control 挺浪费时间的,所以别着急,抽根烟坐着等等。就搞.

2021-05-05 16:08:06 317

原创 Antd design pro 搭建环境和启动项目

Antd design pro 搭建环境和启动项目首先两种方式均可以搭建和启动项目,看下面:1.github克隆项目(自动)git clone --depth=1 https://github.com/ant-design/ant-design-pro.git my-project然后你就进入cd 项目里npm installnpm start等着就行了项目自己起不来你就去浏览器地址栏自己敲一遍localhost:80002.手动安装cli脚手架 (手动)n..

2021-05-05 15:56:41 1098

原创 setInterval setTimeout 定时器

<html><body><input type="text" id="clock" size="35" /><script language=javascript>var int=self.setInterval("clock()",5000)function clock() { var t=new Date() docume...

2020-10-15 10:38:55 105

原创 javascript 字符串结构拼接

function html(){let s="";s+="<div class='wrap'>";s+="<p></p>";s+="<img />";s+="<button id='btn'></button>";s+="</div>";}1.先正常写结构<div clas...

2020-10-15 10:38:05 158

原创 git 基本命令和merge代码冲突

本文主要介绍在操作github时相关的Git指令操作,存在不足之处,希望理解,本人也是小白,道行尚浅,多多担待。自己项目中的相关git操作主要有以下:1.克隆项目克隆项目可以从https和ssh两种方法进行克隆。利用的指令是git clone 地址2.切换分支克隆以后首要做的就是切换分支,进入到目标分支。利用git checkout 分支名称3.安装包安装相关项目所需要...

2020-10-15 10:37:27 1836 1

原创 react 组件axios 交互请求笔记

本文只是初级介绍axios最基本用法(get,post,all请求),至于扩展和延伸只是没有过多赘述,更多内容可以参看axios官网。如有不周之处还请谅解。个人建议使用npm安装开始项目(进入到相关命令行工具中操作即可)使用npm:$ npm i axiostip:react在引进axios时所用 '' 实际为 `` 即反引号!好处就是不用拼接字符串``,遇到变量就是${}就可...

2020-10-13 17:29:51 12930 2

原创 react-native-customized-image-picker 图片组件 使用方法

import ImagePicker from "react-native-customized-image-picker";pickers(){ ImagePicker.openPicker({ multiple: true, maxSize:3-this.state.imagespath.length, spanCount:3, includeBase64:true, minCompressSize:400, }) .

2020-06-26 17:20:50 376

原创 react-native-modal-datetime-picker 时间转化问题

format=(date)=>{ let mday = date.getDate(); let month = date.getMonth() + 1; let hours=date.getHours(); let minutes=date.getMinutes(); month = month < 10 ? `0${month}` : month; mday = mday < 10 ? `0${mday}` : m.

2020-06-26 17:19:00 701

原创 React Native redux和react-navigation配合物理键盘返回问题

constructor(props) { super(props); this.state = { } this.onBackPress = this.onBackPress.bind(this); } componentDidMount() { SplashScreen.hide(); BackHandler.addEventListener('hardwareBackPress', this.onBackPress); ...

2020-06-26 15:44:06 195

原创 监听ReactNative 在前台后台运行状态

//监听前后台 这个功能暂时关闭 存在漏洞 // AppState.addEventListener('change', (state) => { // if (state === 'active') { // starttime=new Date().valueOf(); // } else if (state === 'background') { // let endtime=new Date().valu..

2020-06-26 15:41:54 976

原创 react native 生成sha签名和打包APK 2

https://blog.youkuaiyun.com/denghuizi/article/details/865270971.生成一个签名密钥keytool -genkey -v -keystore my-release-key.keystore -alias my-key-alias -keyalg RSA -keysize 2048 -validity 10000这条命令会要求你输入密钥库(...

2020-03-27 15:50:57 222

原创 WebSocket 通讯

let webSocketUrl = "ws://m.zhonglianjiye.com/socket/goods/25"; let socket = new WebSocket(webSocketUrl); socket.onopen=function () { console.log("成功连接服务器!"); }socket.onclose=function (e)...

2020-03-05 08:54:42 134

原创 Window对象属性—screen

window的screen对象:属性 说明 availHeight 返回屏幕的高度(不包括Windows任务栏) availWidth 返回屏幕的宽度(不包括Windows任务栏) colorDepth 返回目标设备或缓冲器上的调色板的比特深度 height 返回屏幕的总高度 pixelDepth 返回屏幕的颜色分辨率(每象素的位数) ...

2020-03-03 13:28:54 161

原创 React 微信页面开发过程

今天记录下使用React 开发微信网页的经历0.提示微信有很多平台,例如公众平台,开放平台,订阅号,服务号,小程序等等1.使用服务号ID(订阅号比较恶心,不关注就不能用我们的页面,所以为了解决这个问题直接使用服务号)2.引入Js-sdk,目的是使用微信的登录,分享,支付在public文件下,index.html里面引入<script type="text/javas...

2019-12-24 15:19:01 350

原创 React 富文本编辑器(react-draft-wysiwyg)

这里是依赖:需要npm install 进来的"dependencies": { "babel-polyfill": "^6.26.0", "draft-js": "^0.11.2", "draftjs-to-html": "^0.8.4", "html-to-draftjs": "^1.4.0", "react": "^16.12.0", "r...

2019-12-24 15:11:28 255

原创 React Antd Design 组件使用

今天记录一下Antd 里面的一些儿组件用法:0.写在前面提示:antd 里面的函数不用bind(this)import { Input,Button,message } from 'antd';import 'antd/dist/antd.css';1.DatePicker//本地化 中文化import locale from 'antd/es/date-picker/l...

2019-12-24 15:11:10 205

原创 ReactNative 踩坑记录

React Native 0.60 及更高版本在新版本的 React Native 中链接是自动的(我们不再需要手动的 link 一个 库).初始化RN项目名称不能使用-来隔开,会报错Android studio 出现一直在同步Syncing only active variantFile → Settings → Experimental → Gradle → Only s...

2019-10-14 14:45:00 207

原创 javascript 继承解读

回顾:构造函数,原型,实例三者的关系每一个构造函数都有一个原型对象(Person.prototype);原型对象都包含指向构造函数的指针(constructor);每个实例都包含指向原型对象的指针(看不见的_proto_指针)继承:子对象继承了父对象。特点:继承后的子对象会拥有父对象的属性和方法。(假如你爸爸的100亿、豪车、豪宅、公司、人脉等等都给你了,你说是开心呢?还是开心呢?.....

2019-10-03 08:38:05 126

原创 REACT immutable数据 redux react-redux redux-thunk styled-components(innerRef 传数据)

在模仿简书项目时候用到的技术点总结,做下总结:React 只能兼容IE8以上版本关于字体图标react-iconsnpm install react-icons --saveimport { FaBeer,FaPen } from 'react-icons/fa';<FaPen/>里面fa代表 fontawesome 简写 pen代表你的图标关于全局样式 st...

2019-10-03 08:37:07 305

原创 React 知识点理解

React是一个JavaScript框架,使用jsx语法构建组件达到单页面应用目的。使用自己的react-dom树形结构来避免操作真实dom,React都能以最小的DOM修改来更新整个应用程序。var child1 = React.createElement('li', null, 'First Text Content');React 是什么?本身只一个前端框架,关注视图层,加入Red...

2019-10-03 08:36:57 614

原创 react native AsyncStorage的使用

web 本地存储 (localStorage、sessionStorage)const info = { name: 'Lee', age: 20, id: '001' }; sessionStorage.setItem('key', JSON.stringify(info)); localStorage.setItem...

2019-10-01 11:26:06 150

原创 React 事件机制

react合成事件( Synethic Event ),不是原生事件合成事件与原生事件的区别1. 写法不同,合成事件是驼峰写法,而原生事件是全部小写2. 执行时机不同,合成事件全部委托到document上,而原生事件绑定到DOM元素本身3. 合成事件中可以是任何类型,比如this.handleClick这个函数,而原生事件中只能是字符串react事件机制分为两个部分:1、事件注册 ...

2019-10-01 11:19:22 542

空空如也

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

提示
确定要删除当前文章?
取消 删除