盼一族-CSDN博客

原创 React项目，一刷新页面，谷歌浏览器就会弹出翻译提示弹窗

一、现象现象如下图：二、原因原因： html标签 lang 属性设置有误，与react及antd无关。删除或者改为中文就能解决

2021-12-14 13:39:09 1529 1

原创 Webpack4使用 mini-css-extract-plugin最新版2.4.5 压缩css 报 “Invalid value used in weak set”

原因与措施大致是 min-css-extract-plugin2.4.5 与 webpack4版本不匹配导致，将版本降级。降成1.+ 版本就不报错

2021-12-07 15:14:09 2055

原创 React使用Antd form组件，无法动态更新 initialValues 问题

一、原因Ant-design 官方文档中已经提到了这一问题的原因，如下：二、解决方案通过 form.setFieldsValue 动态更新表格值通过父组件传参的方式传入 initialValues

2021-11-03 16:59:12 2098

原创 React hook之 useEffect 和 useLayoutEffect 比较

一、官方解读1.1 useEffect该Hook 接收一个包含命令式、且可能有副作用代码的函数。在函数组件主体内（这里指在 React 渲染阶段）改变 DOM、添加订阅、设置定时器、记录日志以及执行其他包含副作用的操作都是不被允许的，因为这可能会产生莫名其妙的 bug 并破坏 UI 的一致性。使用 useEffect 完成副作用操作。赋值给 useEffect 的函数会在组件渲染到屏幕之后执行。你可以把 effect 看作从 React 的纯函数式世界通往命令式世界的逃生通道。1.2 useLayou

2021-09-30 11:02:37 324

原创 react-router-dom中 withRouter 作用及大致用法

作用1. 使用Route包裹组件，将react-router的history, location, match信息通过props传递给包裹的组件默认情况下必须是经过路由匹配渲染的组件才存在this.props，才拥有路由参数，才能使用函数跳转的写法，执行this.props.history.push('/***')跳转到对应路由的页面。然而不是所有组件都直接与路由相连（通过路由跳转到此组件）的，当这些组件需要路由参数时，使用withRouter就可以给此组件传入路由参数，此时就可以使用this.

2021-09-24 10:53:57 2134

原创 React.forwardRef 实现 ref 分发

React.forwardRef

2021-09-22 16:46:50 304

原创 CSS3自定义滚动条样式 ::-webkit-scrollbar

一、描述这个 ::-webkit-scrollbar CSS伪类选择器影响了一个元素的滚动条的样式。::-webkit-scrollbar 仅仅在支持WebKit的浏览器 (例如, 谷歌Chrome, 苹果Safari)可以使用。webkit支持拥有overflow属性的区域，列表框，下拉菜单，textarea的滚动条自定义样式，所以用处还是挺大的。二、演示来看看这2个滚动条demo：demo1(图片版)、demo2(纯CSS3版本)三、CSS滚动条选择器你可以使用以下伪元素选择器去修改各

2021-09-17 11:37:00 1238

原创 React 项目启动在 chrome 上报错之 Uncaught TypeError: Cannot read property ‘forEach‘ of undefined

React 项目启动报如下错误：通过查阅相关博客知道，报错原因为浏览器安装了react-devtools扩展程序导致的。解决方法一、通过报错信息得知具体的报错地点，注释相关代码从报错信息可以看到，报错是否node_modules/@pmmmwh/react-refresh-webpack-plugin/client/ReactRefreshEntry.js 中发出，注释相关代码，如下const safeThis = require('./utils/safeThis');if (process

2021-09-16 10:49:47 554

原创 react-query管理服务端缓存

一. 前因后果React-Query是一个基于hooks的数据请求库。React-Query中的Query指一个异步请求的数据源。通过使用React-Query(或SWR)这样的数据请求库，可以将服务端状态从全局状态中解放出来。按照来源，前端有两类状态需要管理：用户交互的中间状态服务端状态在陈年的老项目中，通常用Redux、Mobx这样的「全局状态管理方案」无差别对待他们。事实上，他们有很大区别：1. 用户交互的中间状态比如组件的isLoading、isOpen，这类「状态」的特点是

2021-09-14 15:19:21 1420

原创 React Hook之 useReducer

一、useReducer 简单介绍const [state, dispatch] = useReducer(reducer, initialArg, init);useState 的替代方案。它接收一个形如 (state, action) => newState的 reducer，并返回当前的 state 以及与其配套的 dispatch 方法。（如果你熟悉 Redux 的话，就已经知道它如何工作了。）在某些场景下，useReducer 会比 useState 更适用，例如 state 逻辑较

2021-09-13 11:24:54 648

原创 TypeScript学习：const 断言

一、const 断言const x = { text: "hello" } as const;官方文档中给出了这样的解释：TypeScript 3.4 引入了一个名为 const 断言的字面值的新构造。它的语法是一个类型断言，用 const 代替类型名称（例如 123 as const）断言构造新的文字表达式时，我们可以向语言发出以下信号：（1）该表达式中的字面类型不应被扩展（例如：不能从“hello”转换为字符串）；（2）对象字面量获取只读属性；（3）数组文字成为只读元组。二、没有类型

2021-09-08 10:52:05 933

原创 React Hook 之 useMemo及 React.memo

useMemo

2021-09-07 17:27:36 241

原创 JS之迭代器 Iterator

Symbol.iterator为每一个对象定义了默认的迭代器。该迭代器可以被 for...of 循环使用。ES6 规定，默认的 Iterator 接口部署在数据结构的 Symbol.iterator属性，或者说，一个数据结构只要具有Symbol.iterator属性，就可以认为是“可遍历的”（iterable）。Symbol.iterator 属性本身是一个函数，就是当前数据结构默认的遍历器生成函数。class RangeIterator { constructor(start, stop) {

2021-09-07 16:49:20 471

原创 React Hook 之 useRef 及与React.createRef 区别

一、useRefuseRef 返回一个可变的 ref 对象，其 .current 属性被初始化为传入的参数（initialValue）。返回的 ref对象在组件的整个生命周期内保持不变。import React, { useState, useEffect, useMemo, useRef } from 'react';export default function App(props){ const [count, setCount] = useState(0); const doubl

2021-09-06 16:32:16 1254

原创 React 错误边界之 react-error-boundary

一、什么是错误边界错误边界是一种 React 组件，这种组件可以捕获发生在其子组件树任何位置的 JavaScript 错误，并打印这些错误，同时展示降级 UI，而并不会渲染那些发生崩溃的子组件树。错误边界在渲染期间、生命周期方法和整个组件树的构造函数中捕获错误。注意：错误边界无法捕获以下场景中产生的错误事件处理异步代码（例如 setTimeout 或 requestAnimationFrame 回调函数）服务端渲染它自身抛出来的错误（并非它的子组件）如果一个 class 组件中定义了

2021-09-04 16:38:08 1437

原创关于 React Context 和 useContext

1.Context在 React 使用过程中，公共信息，例如语言，主题等如何传递给每个组件呢而当组件层级不多不少的时候，共享的数据也不多时，这个时候会稍微有些尴尬，用 props 会有点繁琐，而用 Redux 又不至于。那就可以考虑 Context。Context 可以实现隔层传递，只需要在顶层组件定义，然后在子组件中按需引入即可，从而避免了一层一层的手动传递 props 属性。Context 使用并不复杂，直接看看具体使用示例吧：顶层组件：import React from 'react'

2021-09-03 11:07:57 213

原创 CSS user-select属性

防止选取 <div>或<a>等元素的文本,在 web 浏览器中，如果您在文本上双击，文本会被选取或高亮显示。此属性用于阻止这种行为。div { -webkit-user-select: none; /* Safari */ -ms-user-select: none; /* IE 10+ and Edge */ user-select: none; /* Standard syntax */}CSS 语法user-select: auto|none|text|a

2021-09-02 16:01:49 243

原创 vue 中 hookEvent 应用

1. 组件内部监听生命周期函数export default{ methods:{ fun1(){ const timer = setInterval(()=>{ //具体执行代码 console.log('1'); },1000); this.$once('hook:beforeDestory',()=>{ clearInterval(timer); timer = null;

2021-08-27 10:18:53 132

原创前端面试问题总结

1. H5开发过程中怎么处理异型屏的安全区域？https://segmentfault.com/a/1190000040555424?utm_source=sf-similar-article2. 前端性能优化https://www.cnblogs.com/xiaohuochai/p/9178390.html3. 重绘重排https://www.cnblogs.com/soyxiaobi/p/9963019.html4. _proto 和 prototype 的区别https://www.zh

2021-08-26 16:59:21 90

原创 Jenkins 实现前端自动打包,自动部署代码

参考文档：linux 安装 Jenkins 实现自动获取代码打包前端代码Jenkins 实现前端自动打包,自动部署代码及邮件提醒功能

2021-08-24 15:36:06 190

原创 letCode中位运算相关题目（JavaScript 解法）

1. letCode137 只出现一次数字II题目：给你一个整数数组 nums ，除某个元素仅出现一次外，其余每个元素都恰出现三次。请你找出并返回那个只出现了一次的元素。/** * @param {number[]} nums * @return {number} */var singleNumber = function(nums) { var a = 0, b = 0; for(var i = 0; i < nums.length; i++){

2021-08-23 17:56:10 70

原创 React17、React Hook及TS4 实践案例

需要的拿走，有期限的哦。。。。。。。。。链接: https://pan.baidu.com/s/1EtRJ6dGzKtscl4pM354VFw提取码: zcfb

2021-08-23 11:36:05 480

原创 clientHeight、clinetWidth、offsetHeight、offsetWidth、scrollHeight、offsetTop、scrollTop 的详解及区别

一、document.bodydocument.body.clientHeight: 网页可见区域高document.body.clientWidth: 网页可见区域宽document.body.scrollHeight: 网页正文全文高度，包含可见区域和滚动区域document.body.offsetHeight: 网页可见区域高度，包含边线的高度document.body.offsetWidth: 网页可见区域宽度，包含边线的宽度window.screen.height: 屏幕分辨率高w

2021-08-18 16:45:51 204

原创 CSS background属性详解

dasda

2021-08-18 15:13:56 2164

原创 Normalize.css 规范网页样式

一、介绍官方简介：一种现代的HTML5替代CSS重置方法。Normalize.css使浏览器更一致地渲染所有元素，并符合现代标准。它只针对需要规范化的样式。二、作用与许多CSS重置不同，保护有用的浏览器默认样式而不是完全去掉它们；规范化各种元素的样式，为大部分HTML元素提供一般化样式；修复浏览器自身的bug并保证各浏览器的一致性；利用小技巧提高并优化CSS样式可用性；使用详细注释说明代码的作用。三、使用官网地址：http://necolas.github.io/normalize.c

2021-08-18 11:45:58 1007

原创 CSS Grid 网格布局

CSS Gird布局

2021-08-17 14:47:16 137

原创 Vue 2.4+ $attrs 和 $listeners 源码解读

一、源码部分组件实例初始化时会调用 this._init()方法：Vue.prototype._init = function (options?: Object) { // ... // 组件 if (options && options._isComponent) { // optimize internal component instantiation // since dynamic options merging is pretty slo

2021-08-13 15:17:36 390

原创 letCode上部分双指针相关算法题（JavaScript解法）

一、letcode80 删除有序数组中的重复项 II题目：给你一个有序数组 nums ，请你原地删除重复出现的元素，使每个元素最多出现两次，返回删除后数组的新长度。不要使用额外的数组空间，你必须在原地修改输入数组并在使用 O(1) 额外空间的条件下完成。/** * @param {number[]} nums * @return {number} */var removeDuplicates = function(nums) { var slow = 0, fast =

2021-08-12 11:25:08 117

原创前端跨域解决方案总结

跨域解决方案1、通过 jsonp 跨域 ⭐2、 document.domain + iframe跨域3、 location.hash + iframe4、 window.name + iframe跨域5、 postMessage跨域 ⭐6、跨域资源共享（CORS）7、 nginx代理跨域 ⭐8、 nodejs中间件代理跨域 ⭐9、 WebSocket协议跨域一、通过 jsonp 跨域通常为了减轻web服务器的负载，我们把js、css，img等静态资源分离到另一台独立域名的服务器上

2021-08-11 10:26:06 107

原创 Vue 事件总线(EventBus)

vue组件非常常见的有父子组件通信，兄弟组件通信。而父子组件通信就很简单，父组件会通过 props 向下传数据给子组件，当子组件有事情要告诉父组件时会通过 $emit 事件告诉父组件。今天就来说说如果两个页面没有任何引入和被引入关系，该如何通信了？如果咱们的应用程序不需要类似Vuex这样的库来处理组件之间的数据通信，就可以考虑Vue中的事件总线，即 EventBus来通信。一、EventBus 简介EventBus 又称为事件总线。在Vue中可以使用 EventBus 来作为沟通桥梁的概念，就像是

2021-08-10 17:49:30 278

空空如也

空空如也