- 博客(84)
- 收藏
- 关注
RSS订阅原创 「WIP」项目爆错问题总结
A cross-origin error was thrown. React doesn't have access to the actual error object in development. See出现原因JSON.parse(undefined) 参数问题
2022-04-26 16:52:53
1712
原创 服务端组件 React server-component
什么是RSC？只在服务器端运行，永远不会发布到客户端的组件，将组件分为三类，客户端组件（.client.js）和服务端组件（.server.js）以及共享组件（.js），由服务端完成渲染后，再发送到客户端。共享组件：它的类型取决于那种类型的组件在引用改组件解决了什么问题？父子嵌套结构，父组件请求获得响应，然后在子组件发送请求在获得响应，这种瀑布流式一样的，极大浪费了性能。如果能从服务器端直接获取便可以解决组件依赖数据渲染的这个问题解决初衷是瀑布流，后续发现能解决很多问题。..
2022-04-08 21:19:28
883
原创 react实现修改url参数，但是不刷新页面，超级好用的hooks
useUrlState使用起来特别简单第一步npm i @ahooksjs/use-url-state -S第二步使用import useUrlState from '@ahooksjs/use-url-state';const [state, setState] = useUrlState({ 路径参数1: '1', 路径参数2: '10' });state：即你当前路径上的参数setState：即修改你当前路径上的参数官网地址贴这里了 贼好用useUrlSta
2022-03-18 20:18:13
4414
原创 react对特定的错误请求进行处理
在有些需要我们对错误信息的错误码errorCode进行判断，对特定的错误进行不同的处理，这时候需要怎么做呢？1 借助ahooks里的useRequest利用 useRequest里的onError可以轻松获取到请求失败时 拿到的错误信息同时对错误信息进行处理2 借助 try catch在 catch 参数 error 中拿到错误信息 进行判断 同时除了特定的错误外，我们需要对其他错误进行抛出...
2022-03-14 22:01:39
571
原创 url MUST be a string
在我们使用ahooks 用到useRequest时 有时会出现这个问题我就踩了俩次坑 为了不再出现这种问题 记录一下 随便提供解决方法
2022-01-24 19:51:45
1538
原创 css 京东 样式初始化代码
* { margin: 0; padding: 0;}/* 倾斜文字不倾斜 */em,i { font-style: normal;}/* 去掉小圆点 */li { list-style: none;}img { /* border 0 照顾低版本游览器 如果图片外面包含链接会有边框问题 */ border: 0; /* 取消图片底侧有空白缝隙问题 */ vertical-align: middle;}button { /* 鼠标经过变小手 */.
2021-12-21 12:00:00
468
1
原创 node 环境配置
我们先进入官网 下载node 一般公司都是左边的哈然后点击Next我们勾选一下 表示同意他的一些配置协议然后点击Next就默认路径 不要动 点Next这个界面提示安装node的哪些功能 我们默认安装 也是直接next一般前端开发用不到他说的C啥的 我们直接Next点击安装这样便安装完成大家在终端中输入node -v可以看到版本号就表示安装完成了...
2021-12-20 16:32:48
129
原创 git 环境配置
下载好后 点击运行 弹出如下不需要做啥 点Next继续Next继续Next继续Next一直无味的next........这里大家稍微看一下 选中框 前俩个选中就OK了 点Install如下并可以开始安装弹出来的俩个不要选 点击Next就可以了可以看到这俩个就成功了...
2021-12-20 16:17:13
129
原创 获取地理位置信息API H5
H5中有一个API可以直接获取我们的位置navigator.geolocation<script> navigator.geolocation.getCurrentPosition(position=>{ console.log(position); })</script>打印出来的值如下各个属性的意思给大家介绍一下accuracy 经纬度的精度altitude 海拔高度altitudeAccuracy 海..
2021-12-18 12:00:00
364
原创 封装Icon组件
封装思路1 定目标：给出测试用例。<Icon className="someClass" type="iconbtn_like_sel" onClick={()=>{console.log('test')}}/>明确每个属性的：作用，名字，格式，可选值，是否必须...2 分析react中直接通过props来接收就行3 逐个实现功能// 组件 props 的类型type Props = { // icon 的类型 type: string // i.
2021-12-17 12:30:00
276
原创 消息回复时 滚动条自动滚动到最底部
当聊天时,有后续新消息的话总将滚动条滚动到最底部。第一步 获取滚动条所在的dom元素并且存储// 用于操作聊天列表元素的引用const chatListRef = useRef(null)// 获取dom元素<div className="chat-list" ref={chatListRef}>第二步通过 useEffect 监听聊天数据变化，对聊天容器元素的 scrollTop 进行设置：// 监听聊天数据的变化，改变聊天容器元素的 scrollTop 值让页..
2021-12-16 10:00:00
1611
原创 移动端适配问题
步骤 安装 px 转 vw 的包：npm i -D postcss-px-to-viewport 包的作用：将 px 转化为 vw，所以有了该工具，只需要在代码中写 px 即可 在 craco.config.js 添加相应配置 重启项目，让配置生效 核心代码craco.config.js 中const pxToViewport = require('postcss-px-to-viewport')const vw = pxToViewport({
2021-12-15 12:15:00
323
原创 Promise静态方法
Promise 对象代表一个异步操作promise的三个状态:pending(默认) fulfilled(成功) rejected(失败) 1 resolve函数被执行,会将promise的状态从pending改成fulfilled成功 2 reject函数被执行时,会将promise的状态从pending改成 rejected失败Promise.reject()new Promise((resolve,reject)=>{ reject()...
2021-12-14 14:12:23
893
1
原创 手动实现图片懒加载
懒加载的基本思路当dom元素进入可视区域时，才去加载它。如何判断一个dom元素是否进入了可见区域？- 传统： 获取dom的位置，手动判断。（距离页面顶部的距离 比较 滚动条卷起的高度，还要考虑元素自己的高度 ）- 现在：直接判断元素进入可视区域的比例实现思路利用浏览器提供的 IntersectionObserver，监听图片元素是否进入可视区域，进入后才真正去设置图片元素的 src 属性进行图片加载。格式var dom = dom元素// 实例化一个观察者// 它的参数1
2021-12-14 12:15:00
175
原创 文章列表 代码高亮通用解决方案
有些文章内容一般会有代码 那么我们需要对这些代码进行高亮解决这里提供一个通用解决方案操作步骤第一步npm i highlight.js第二步 在页面中引入 highlight.jsimport hljs from 'highlight.js'import 'highlight.js/styles/vs2015.css'原理对pre>code元素添加样式类名useEffect(() => { // 配置 highlight.js hljs.con
2021-12-13 12:00:00
493
原创 react中 文章标题 随页面滚动显示隐藏
原理: 判断元素距离视口的高度Element.getBoundingClientRect() 返回方法返回元素的大小及其相对于视口的位置具体操作第一步: 判断滚动条在那个元素身上第二步: 声明俩个ref 获取滚动条所在元素与你想隐藏的元素的判断dom // 声明一个状态决定头部 是否 显示隐藏 const [isShowAuthor, setIsShowAuthor] = useState(false) // 滚动条元素所在 const wrapperref =...
2021-12-12 10:00:00
824
1
原创 react 自定义封装组件 实现keep-alive
目标路由切换时，组件只是隐藏，而不要销毁，以达到缓存的目的。思路通过路由来实现,封装一个自定义路由，来实现即可实现原理：在切换路由时，让页面不卸载，而是通过 display none 隐藏掉。这样，因为页面没有卸载，所以原来所有的操作都会被保存下来。 将来再返回该页面，只需要 display block 展示即可。这样，就可以恢复原来的内容了背景知识1 Switch之外的Route中如果设置了children属性，且值是函数，此时，这个函数一定会执行；<Route pat
2021-12-11 13:58:54
972
原创 防 XSS 攻击的实现
XSS攻击人们经常将跨站脚本攻击（Cross Site Scripting）缩写为CSS，但这会与层叠样式表（Cascading Style Sheets，CSS）的缩写混淆。因此，有人将跨站脚本攻击缩写为XSS。XSS攻击通常指的是通过利用网页开发时留下的漏洞，通过巧妙的方法注入恶意指令代码到网页，使用户加载并执行攻击者恶意制造的网页程序。这些恶意网页程序通常是JavaScript，但实际上也可以包括Java、 VBScript、ActiveX、 Flash 或者甚至是普通的HTML。攻击成功后
2021-12-10 16:17:59
765
原创 websocket 的使用 以及在react中的使用
websocket简介WebSocket 协议在2008年诞生，2011年成为国际标准。所有浏览器都已经支持了。它的最大特点就是，服务器可以主动向客户端推送信息，客户端也可以主动向服务器发送信息，是真正的双向平等对话，属于服务器推送技术的一种。典型的websocket应用场景：- 即时通讯.....客服 - 聊天室 广播- 点餐socket技术 客户端：发socket请求 可以用原生的 可以使用包 socket.io 服务器端: ..
2021-12-09 11:40:51
1402
原创 react中搜索模块 字体高亮的实现
通常我们在搜索时会遇到需要你当前输入的值高亮如下这一种效果下面是我的解决思路你所需掌握的知识:String.prototype.replace dangerouslySetInnerHTMLconst 新字符串 = 目标字符串.replace(正则表达式，function(匹配结果) { return 对匹配到的内容的替换结果}) dangerouslySetInnerHTML={{ __html: 'First &...
2021-12-08 10:06:04
673
原创 时间戳 实现相对时间
开发中一般我们会遇到相对于当前时间 例如12小时前或者2天前的情况,如果手写会很麻烦 现在教大家使用dayjs来解决问题用dayjs中自带的功能来解决引入dayjs 引入插件 dayjs.extend(插件) 调用插件中特有的功能import dayjs from 'dayjs' //引入dayjsimport relativeTime from 'dayjs/plugin/relativeTime' // 使用dayjs自带插件import 'dayjs/locale/zh-cn
2021-12-07 22:24:14
309
原创 移动端 1px 像素处理
组件封装// src/assets/styles/hairline.scss@mixin scale-hairline-common($color, $top, $right, $bottom, $left) { content: ''; position: absolute; display: block; z-index: 1; top: $top; right: $right; bottom: $bottom; left: $left; backgroun
2021-12-07 12:00:00
195
原创 react 中401问题-整体说明 实现无感刷新
401错误的场景 未登陆用户做一些需要权限才能做的操作（例如：关注作者），代码会报出401错误。这种情况下，应该让用户回到登陆页。 登录用户的token过期了 整体目标是：通过axios响应拦截器来处理401问题。refresh_token和token的作用 token: 作用：在访问一些接口时，需要传入token，就是它。 有效期：2小时（安全）。 refresh_token 作用: 当token的有效期过了之后，可以使用它
2021-12-06 12:00:00
1156
原创 react封装鉴权路由组件以及登录时跳转到未登录时游览页面
以下代码包含了typescript的类型声明,看不懂的可以忽略这些类型声明react封装鉴权路由组件components/AuthRoute.tsx 中：// hasToken 判断是否有tokenimport { hasToken } from '@/utils/storage'import { Route, Redirect, RouteProps } from 'react-router-dom'export const AuthRoute = ({ children, ....
2021-12-05 12:00:00
1257
原创 通用axios封装代码 及token处理
// 封装axiosimport axios from 'axios'import { getToken } from './storage'const http = axios.create({ baseURL: 'http://geek.itheima.net/v1_0/', timeout: 5000})// 添加请求拦截器http.interceptors.request.use( function (config) { // 在发送请求之前做些什么 i.
2021-12-04 15:45:00
255
原创 typeScript通用token持久化处理代码
import { Token } from '@/types/data'const TOKEN_KEY = 'woshinibbzhenweida'// 获取 tokenexport function getToken(): Token { return JSON.parse(localStorage.getItem(TOKEN_KEY) || '{}')}// 设置 tokenexport function setToken(data: Token): void { local.
2021-12-03 23:42:50
309
原创 typeScript在react中使用注意点 个人笔记 持续更新
1 axios报错 类型声明try { await dispatch(SendMessage(mobile)) // 成功 XXXXX } catch (err) { const error = err as AxiosError<{ message: string }> // 失败 XXXXXX }2统一的axios的响应类型 例如token声明在data.d.ts中声明/* eslint.
2021-12-03 00:34:52
726
原创 react解决样式冲突问题
在react脚手架中已经有了sass的配置，因此只需要安装sass的依赖包，就可以直接使用sass了 安装sass依赖包 npm i sass -D- 把index.css改成index.scss- 导入index.scss文件注意：如果使用了scss，scss中使用图片的绝对路径的时候需要加上~background-image: url(~assets/login.png);css-样式私有化css modules-基本使用步骤 改样式文件名。从 x...
2021-11-29 19:20:12
1334
原创 闭包与数据私有以及问题
什么是闭包?MDN官方话:一个函数和对其周围状态（lexical environment，词法环境）的引用捆绑在一起（或者说函数被引用包围），这样的组合就是闭包（closure）。也就是说，闭包让你可以在一个内层函数中访问到其外层函数的作用域。在 JavaScript 中，每当创建一个函数，闭包就会在函数创建的同时被创建出来。闭包作用之实现数据私有全局变量,容易被随意修改,希望有些数据是私有的,不让外部随意的访问例如let money = 0function fn() .
2021-11-28 22:27:05
756
原创 原生css变量
CSS 自定义属性，通常称为 CSS 变量。类似于 JS 中声明的变量，可以复用 CSS 属性值。定义格式 ： 变量名：值 ,变量两个--开头/* 1 创建全局 CSS 变量 --geek-color-primary*/:root { --geek-color-primary: #fc6627;}/* 2 复用 */.list-item-active { color: var(--geek-color-primary);}.tabs-item-active { col.
2021-11-28 19:26:50
884
1
原创 TypeScript 泛型介绍
泛型泛型，顾名思义，就是可以适用于多个类型，使用类型变量比如T帮助我们捕获传入的类型，之后我们就可以继续使用这个类型。本质是参数化类型，通俗的将就是所操作的数据类型被指定为一个参数，这种参数类型可以用在类、接口和函数的创建中，分别成为泛型类，泛型接口、泛型函数泛型-泛型函数创建泛型函数的格式function fn<Type>(value: Type): Type { return value }// 上面的Type只是一个名字而已，可以改成其他的function fn
2021-11-26 10:36:50
1523
原创 TypeScript基础介绍2
接上一篇 没写完的继续介绍枚举定义enum，枚举。它用来描述一个值，该值只能是 一组命名常量 中的一个枚举的功能类似于字面量类型+联合类型组合的功能，也可以表示一组明确的可选值格式enum 枚举名 { 可取值1,可取值2,.. }//使用枚举名.可取值说明： 使用 enum 关键字定义枚举 一般约定首字符大写 枚举中的多个值之间通过 ,（逗号）分隔 示例// 定义枚举类型enum Direction { Up, Down, Lef
2021-11-25 20:32:20
432
1
原创 TypeScript中枚举报错 ‘xx‘ is defined but never used
在使用eslint时 我们明明以及使用了枚举但是就是报错 这个是因为Eslint不支持 TypeScript 语法只需要在eslintrc.js中配置 "@typescript-eslint/no-unused-vars" : [ "error" ] 就可以了
2021-11-25 20:08:54
3337
原创 TypeScript基础介绍1
TypeScript 是什么 TypeScript 简称：TS，是 JavaScript 的超集。简单来说就是：JS 有的 TS 都有。JS写的代码在TS的环境下都能跑。 在 JS 基础之上，为 JS 添加了类型支持。TypeScript = Type + JavaScript TypeScript 是微软开发的开源编程语言，可以在任何运行 JavaScript 的地方运行 TypeScript和JS的对比 ts完全兼容javascript，它可以编译成javascrip
2021-11-24 19:34:04
911
原创 前端面试之实时通讯你为什么选择WebSocket?
首先我会介绍几种解决实时通讯的方案然后介绍各自的优缺点最后对比基于web前端,存在一下几种可实现即时通讯的方式:短轮询(历史方案) Comet-ajax长轮询(历史方案) SSE WebSocket(主流)短轮询就是客户端定时发送请求,获取服务器上的最新数据,不是真正的即时通讯,但一定程度上可以模拟即时通讯的效果.优点:浏览器兼容性好,实现简单缺点:实时性不高,资源消耗高,存在较多无用请求,影响性能Comet-ajax长轮询游览器发出XMLHttpRequest请..
2021-11-23 16:08:51
2137
原创 React项目打包 优化详解
项目打包和优化-项目打包目标：能够通过命令对项目进行打包步骤： 在项目根目录打开终端，输入打包命令：npm run build 等待打包完成，打包后的内容被放在项目根下的 build 文件夹中 项目打包和优化-项目本地预览目标：能够在本地预览打包后的项目步骤： 全局安装本地服务包：npm i -g serve，该包提供了 serve 命令，用来启动本地服务 在项目根目录中执行命令：serve -s ./build，在 build 目录中开启服务器
2021-11-21 18:01:15
2602
原创 vue 高薪面试题必会
Vue的双向数据绑定原理是什么?Vue是采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter,getter，在数据变动时发布消息给订阅者，触发相应的监听回调。具体步骤：第一步：需要observe的数据对象进行递归遍历，包括子属性对象的属性，都加上 setter和getter,这样的话，给这个对象的某个值赋值，就会触发setter，那么就能监听到了数据变化 第二步：compile解析模板指令，将模板中的变量替换成数据，然后初始化
2021-11-19 23:23:35
80
原创 React 在非组件环境拿到路由信息
在React项目中有时候我们不得不在一些非组件中使用Hooks例如在判断用户token权限过期 进行跳转页面时一般是在工具函数中实现 那么像这种情况我们如何使用函数组件里才能使用的history呢 以下我就举出几种我们会经常碰到的hooks情况进行说明情况一 在非组件环境拿到路由信息解决方法一:如果产品经理说无所谓不用考虑性能只要功能出来就可以 那我们就采取最简单webApl的方法window.location.href = '/#/login'早点下班溜之大吉 ,要是产品经理说
2021-11-19 01:13:39
668
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人