自定义博客皮肤VIP专享

*博客头图:

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

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

博客底图:

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

栏目图:

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

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+
  • 博客(285)
  • 收藏
  • 关注

转载 React将子节点渲染到存在于父组件以外的 DOM 节点

PortalsPortal 提供了一种将子节点渲染到存在于父组件以外的 DOM 节点的优秀的方案。ReactDOM.createPortal(child, container)第一个参数(child)是任何可渲染的 React 子元素,例如一个元素,字符串或 fragment。第二个参数(container)是一个 DOM 元素。用法通常来讲,当你从组件的 render 方法返回一个元素时,该元素将被挂载到 DOM 节点中离其最近的父节点:render() { // React 挂载了一个

2021-09-23 10:47:48 38

转载 观察者模式 vs 发布订阅模式

有一回面试,面试官问:观察者模式,和发布订阅模式,有什么区别?我脑海中立刻闪现了《Head First设计模式》里讲的:Publishers + Subscribers = Observer Pattern“哼哼,我知道答案了,兄dei!”,我内心无比鸡冻。“它们是一样的。”,我故作镇定,嘴角露出一丝微笑,仿佛下一秒钟面试官就会给我发offer。面试官也笑了,“不,它们不一样”。然后我就:So, 为什么我错了?观察者模式(Observer pattern),和发布订阅模式(Pu

2021-09-17 14:24:41 14

转载 Window postMessage() 方法

Window postMessage() 方法定义和用法postMessage() 方法用于安全地实现跨源通信。语法otherWindow.postMessage(message, targetOrigin, [transfer]);参数说明otherWindow其他窗口的一个引用,比如 iframe 的 contentWindow 属性、执行 window.open 返回的窗口对象、或者是命名过或数值索引的 window.frames。message将要发送到其他

2021-08-09 22:03:45 126

转载 Rollup 打包并发布到 npm

前言其实用 webpack 也可以打包库,不过根据create-react-app项目贡献者的说法:rollup适合发布 js 库,而webpack更适合做应用程序。简而言之就是:rollup 打包 js 比 webpack 方便,而 webpack 打包 css 比 rollup 方便,相信大家已经有所了解了,至于选用哪个相信大家已经清楚了,下面我们来详细讲解如何用 rollup 打包 js 库步骤。初始化项目使用npm init命令生成package.json 文件,输入 name、version

2021-06-30 21:02:06 226

原创 多包管理工具lerna搭建项目---基本常用命令

基本常用命令Step 1 安装Lerna推荐全局安装,因为会经常用到 lerna 命令npm i -g lernaStep 2 项目初始化lerna init其中 package.json & lerna.json 如下:// package.json{ "name": "root", "private": true, // 私有的,不会被发布,是管理整个项目,与要发布到npm的解耦 "devDependencies": { "lerna": "^3.15.0

2021-06-18 15:49:32 124

原创 Taro 兼容 h5 踩坑指南---页面切换生命周期componentDidMount未触发(路由跳转和生命周期)

问题描述使用taro开发h5应用,路由跳转时发现页面的生命周期componentDidMount,componentWillUnmount没有触发taro版本:3.0.27框架: react编译命令: npm run build h5解决过程查看Taro官方文档,页面组件生命周期的触发机制,Taro的生命周期不完全和react的一致.观察路由跳转可以正常触发componentDidMount的页面的写法,找不同发现是否正常触发生命周期,和路由跳转时使用的方法有关查看Taro官方文档

2021-06-08 16:04:40 419

转载 如何书写项目README.md文档

背景编写一个项目的 README 就像是写一本书的序言一样,一个好的项目不应该仅仅只有一份高质量代码,同时更应该有一份高质量的文档。而对使用者来说,一份好的文档能够节省大量的时间。文档结构基本选项项目背景介绍项目基本介绍项目开发环境项目启动或者使用说明(重要)项目API参考(重要)项目功能描述(重要)项目结构简介(内部项目)项目一些配置文件说明项目重要代码文件说明项目敏感文件说明测试DEMO项目测试运行效果作者列表更新链接历史版本联系方式开源协议以上内容

2021-06-01 17:03:03 309

原创 项目中使用pre-commit钩子规范代码提交

背景项目要使用git进行代码提交时,使用叫pre-commit的git钩子,在调用git commit 命令时自动执行某些脚本检测代码,若检测出错,则阻止commit代码,也就无法push,保证了出错代码只在我们本地,不会把问题提交到远程仓库流程解析待提交的代码git add添加到暂存区执行 git commithusky注册在git pre-commit的钩子调起lint-stagedlint-staged 取得所有被提交的文件依次执行写好的任务(ESLint 和 Prettier)如果

2021-05-31 17:39:12 241

转载 git cherry-pick 多分支的代码库,将代码从一个分支转移到另一个分支

git cherry-pick 教程作者: 阮一峰日期: 2020年4月27日对于多分支的代码库,将代码从一个分支转移到另一个分支是常见需求。这时分两种情况。一种情况是,你需要另一个分支的所有代码变动,那么就采用合并(git merge)。另一种情况是,你只需要部分代码变动(某几个提交),这时可以采用 Cherry pick。一、基本用法git cherry-pick命令的作用,就是将指定的提交(commit)应用于其他分支。$ git cherry-pick <commitHash

2021-05-11 16:11:10 198

转载 eslint一直报CRLF/LF的linebreak错误

最近换电脑,以前的代码重新拉下来后,全部是LF的,而且现在文件几百个,一个个改太吓人了,后来才发现,git有设置,因为我的操作系统是windows的,拉代码的时候git自动把库里面的代码转换成CRLF结尾的,git可以设置不转换,这样拉下来的代码就还是LF的。# 拒绝提交包含混合换行符的文件git config --global core.safecrlf true# 提交时转换为LF,检出时不转换git config --global core.autocrlf input# 执行后,再拉代码

2021-04-19 11:35:10 472

转载 如何为你的项目添加国际化配置(umi@3的国际化实践)

本文主要是针对基于umi@3的前端框架的国际化方案国际化的项目,之前实践的很少,上次踩了一次坑,发现不少问题,在这里总结一下,希望大家能提前感知,避免踩坑。国际化要做什么事?国际化要求从产品中抽离所有地域语言,国家/地区和文化相关的元素。说白了就是,我们的产品,要给外国人使用,当他们访问我们的站点时,需要展示他们熟悉的语言。我们在做国际化的时候,主要可以分为以下两类:静态内容,指的是我们代码中编写的固定文本内容,包括业务代码,组件,组件库等。动态内容,一般是服务端返回的内容。如何获取用户的

2021-04-16 10:57:43 702

转载 初入项目,JS可能遇到的问题优化以及处理方法

ES6篇1.Array.from()为什么先提到Array.from(),在开发中发现数组才是最常见的一种格式,不仅是在渲染列表,表格,还是在数据请求上,都有着重要的意义。首先,先看看Array.from()定义,它可以将一个类数组或可遍历对象转成一个真实的数组。所谓类数组,就是我们在非箭头函数中所属的arguments类型等等;可遍历对象,便如Map类型等等。使用规则为Array.from(arrayLike, mapFn, thisArg)/*arrayLike: 必选,1、类数组(arg

2021-04-13 18:42:54 43

转载 Yarn Workspace 使用指南

arn 从 1.0 版开始支持 Workspace (工作区)。Workspace 能更好的统一管理有多个项目的仓库,既可在每个项目下使用独立的 package.json 管理依赖,又可便利的享受一条 yarn 命令安装或者升级所有依赖等。更重要的是可以使多个项目共享同一个 node_modules 目录,提升开发效率和降低磁盘空间占用。一句话总结就是可以大大简化对多个项目的统一管理。很多知名的开源项目也使用了 Yarn Workspace,如 vue、react、jest 等。1. Yarn Wo

2021-03-30 16:25:41 1484

原创 yarn添加依赖有三种方式,它们有什么区别,使用场景是什么

yarn添加依赖的三种方式分别添加到 devDependencies、peerDependencies 和 optionalDependencies 类别中:yarn add [package] --devyarn add [package] --peeryarn add [package] --optional区别develop-dependencies 开发依赖包peer-dependencies 同等的依赖包optional-dependencies 可选择的依赖包develo

2021-03-26 15:51:52 1849

转载 yarn常用命令

初始化一个新项目yarn init添加依赖包yarn add [package]yarn add [package]@[version]yarn add [package]@[tag]将依赖项添加到不同依赖项类别中分别添加到 devDependencies、peerDependencies 和 optionalDependencies 类别中:yarn add [package] --devyarn add [package] --peeryarn add [package] --o

2021-03-26 15:04:35 30

原创 Git本地创建分支推送到远程并与远程对应分支创建关联

编码实战Step1 在本地新建分支并切换至该分支git checkout -b newbranchStep2 把本地分支push到远程git push origin newbranchStep3 建立当前分支与远程分支的映射关系git branch -u origin/远程分支名或者使用命令:git branch --set-upstream-to origin/远程分支名或者使用命令:git branch –set-upstream 本地新建分支名 origin/远程分支名

2021-03-26 10:57:17 357

翻译 多包管理工具Lerna(莱尔纳)

简介将大型代码库分成单独的独立版本化的软件包对于代码共享非常有用。但是,跨许多存储库进行更改很麻烦且难以跟踪,并且跨存储库的测试变得非常复杂。为了解决这些(以及许多其他)问题,一些项目会将其代码库组织到多包存储库中(有时称为monorepos)。像Babel,React,Angular, Ember,Meteor,Jest等项目,以及许多其他项目,都在一个存储库中开发了所有软件包。Lerna是一种工具,可以优化使用git和npm管理多包存储库的工作流程。Lerna还可以减少开发和构建环境中大量软件包

2021-02-02 11:30:35 428

原创 npm发包初体验

初始化代码在指定文件夹打开命令行工具,运行npm init,新建index.js文件目录index.js内容function sayHi() { console.log('hi')}function sayName(o) { console.log('my name is ' + o)}module.exports = { sayHi: sayHi, sayName: sayName,}npm发包登录npm login发布npm npm publish

2021-02-01 17:24:58 36

原创 npm 报错:Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory

报错详情PS C:\Users\sky\VsCodeProjects\yun-zhan-all\digital-expo-frontend> npm start> cloud_exhibition_fe@0.1.0 start C:\Users\sky\VsCodeProjects\yun-zhan-all\digital-expo-frontend> umi devStarting the development server...* Webpack ██████████

2021-01-19 17:36:18 610

原创 React Hooks是什么,相比 Component的优势是什么

React Hooks是什么Hook 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。React Hooks 的意思是,组件尽量写成纯函数,如果需要外部功能和副作用,就用钩子把外部代码"钩"进来。 React Hooks 就是那些钩子。React Hooks的目的react有一个严格的规则:所有 React 组件都必须像纯函数一样保护它们的 props 不被更改。函数组件有重大限制,必须是纯函数,不能包含状态,也不支持生

2021-01-15 13:40:45 417

原创 dva的model中effect调用其他effct方法为非阻塞的解决方案

dva model 中使用yield put 执行effects中另一个方法,发起请求,不会等这个请求执行完才执行下面的方法。问题背景问题描述dva model 中使用yield put 执行effects中另一个方法,发起请求,不会等这个请求执行完才执行下面的方法。 effects: { *effectAll({ payload }, { put, call }) { console.log('effectAll-start') yield put({ type.

2021-01-11 16:36:58 1058

原创 使用ES6求两个数组(简单数组或对象数组)的并集,交集和差集

背景项目中经常有对两个数组的操作,涉及到一些数学中集合的运算.集合的定义集合定义:集合是指具有某种特定性质的具体的或抽象的对象汇总而成的集体。其中,构成集合的这些对象则称为该集合的元素交集定义:由属于A且属于B的相同元素组成的集合,记作A∩B(或B∩A),读作“A交B”(或“B交A”),即A∩B={x|x∈A,且x∈B}, 如右图所示。注意交集越交越少。若A包含B,则A∩B=B,A∪B=A .并集定义:由所有属于集合A或属于集合B的元素所组成的集合,记作A∪B(或B∪A),读作“A并B”(或“B并

2020-12-17 18:45:18 1568

原创 使用try catch判断JSON解析情况

知识背景try语句包含了由一个或者多个语句组成的try块, 和至少一个catch块或者一个finally块的其中一个,或者两个兼有, 下面是三种形式的try声明:try...catchtry...finallytry...catch...finallycatch子句包含try块中抛出异常时要执行的语句。也就是,你想让try语句中的内容成功, 如果没成功,你想控制接下来发生的事情,这时你可以在catch语句中实现。 如果在try块中有任何一个语句(或者从try块中调用的函数)抛出异常,控制立即转

2020-11-17 16:12:41 458 2

转载 npm源管理工具nrm的基本使用

npm包有很多的镜像源,有的源有的时候访问失败,有的源可能没有最新的包,有的要使用公司内部的源,所以有时需要切换npm的源,nrm包就是解决快速切换问题的。1.安装npm install -g nrm查看是否安装成功nrm --version2.使用2.1、列出可选择的源注: 前面带 * 号的表示正在使用的源2.2、切换使用的源2.3、添加一个源如果你想添加一个源,终端执行命令nrm add <registry> <url> [home],reig.

2020-08-31 19:10:53 212

原创 react中自定义antd选择器样式

前言在做antd表单时通常会用到select组件,如何修改antd组件的默认样式想必大家都知道,那么我们如何将select组件修改为UI图中的样式呢,如下图所示直接修改cssjsimport React from "react";import { Select, Icon } from 'antd';import styles from "./MySelect.less";const { Option } = Select;class MySelect extends Reac

2020-08-20 11:56:46 1688

原创 antd表单中动态设置upload表单项的值实现编辑功能

问题描述:编辑页面图片已上传列表未正常展示问题出现原因form表单中initialValue只能显示初始值(空数组),之后预期的值都无法显示render部分const {defaultFileList} = this.state; // defaultFileList初始值为空数组,接口返回数据后,调用setState修改defaultFileList的值为远程数据dom部分<Form.Item label="图片上传"> {getFieldDecorat

2020-08-18 20:27:18 1648

原创 如何在项目中规范git commit格式

一、为什么要规范化Commit message格式化的Commit message,有几个好处。(1)提供更多的历史信息,方便快速浏览。比如,下面的命令显示上次发布后的变动,每个commit占据一行。你只看行首,就知道某次 commit 的目的。$ git log <last tag> HEAD --pretty=format:%s(2)可以过滤某些commit(比如文档改动),便于快速查找信息。比如,下面的命令仅仅显示本次发布新增加的功能。$ git log <l

2020-08-13 16:12:50 42706

原创 antd中table表格奇偶行设置不同样式(颜色交替)

前言在做antd表格时通常会用到table组件,如何修改antd组件的默认样式想必大家都知道,那么我们如何将表格的奇数行和偶数行设置为不同样式呢,如下图所示react中覆盖antd组件的样式渲染时给奇偶行设置不同类名利用Table组件官方API接口修改行的类名,通过类名设置不同行的样式.js文件TableChangeDom.js/** * @file 列表奇偶行设置不同样式;渲染时给奇偶行设置不同类名 * */import React from "react";import {

2020-08-06 15:23:48 3396

原创 简述react中的state和props

state概述: state是组件的状态不管是父组件或是子组件都无法知道某个组件是有状态的还是无状态的,并且它们也并不关心它是函数组件还是 class 组件。这就是为什么称 state 为局部的或是封装的的原因。除了拥有并设置了它的组件,其他组件都无法访问。props概述: props是组件接受的参数组件,从概念上类似于 JavaScript 函数。它接受任意的入参(即 “props”),并返回用于描述页面展示内容的 React 元素。state和propsprops是“自上而下”或是“

2020-08-03 20:34:24 94

原创 react常用生命周期流程图

简述本文将常用的react生命周期绘制成了一张流程图,便于理解和记忆;react中每个组件都包含“生命周期方法”,我们可以重写这些方法,以便于在运行过程中特定的阶段执行这些方法。react常用生命周期流程图参考资料生命周期图谱...

2020-08-03 19:30:09 222

原创 对空数组使用some和every表现不一致

问题描述对空数组使用some和every结果与预期不符合(也不符合逻辑)[].every(item=>item===true); // > true[].some(item=>item===true); // > false问题出现原因未知every方法的输出结果不符合逻辑,不知道为什么,查阅es5无结果;但是在网络上有检索到相关内容;解决方案在使用数组的every方法时,先进行数组是否为空的判断.参考资料资料地址: JavaScript Array ever

2020-07-27 17:06:00 414

转载 JavaScript常见变量和函数命名示例

JavaScript作为前端开发从业人员必须掌握的3大基础知识中最重要的一环,也是平是接触时间最长、写得最多的。在开发过程中必然会遇到命名的问题,你会词穷、纠结、惆怅吗?本文的出现相信能够解决大部分烦恼,让你轻松写出符合规范、易读、简短的代码。本文将通过大量的实例来试图自圆其说,形成一套系统化、实用的变量命名理化体系。通过按JavaScript的数据类型分类着手、细到一个函数的参数命名,并提供众多可选方案,并尽量给出其适用范围和利弊。JavaScript常见变量和函数命名示例思维导图需要注意的是由

2020-07-21 15:16:17 43874 1

原创 基于react的拖拽组件库react-beautiful-dnd API参数简易说明
原力计划

简介react-beautiful-dnd基于react的一个组件库,主要包含三个组件.DragDropContext : 用于包装拖拽根组件,Draggable和Droppable都需要包裹在DragDropContex内Droppable 用于包装你需要拖动的组件,使组件能够被拖拽(make it draggable)Draggable 用于包装接收拖拽元素的组件,使组件能够放置(dropped on it)API参数介绍1. DragDropContext为了使用拖放功能,您需要将R

2020-07-03 17:18:43 11792 2

原创 git commit提交时报错`Stashing changes... `.

问题描述git commit提交时报错Stashing changes...问题出现原因项目中使用了husky, 这个会在你git commit的时候先执行里面的严谨模式, 对代码进行检查, 有error就会终止提交git commit前检测husky与pre-commit解决方案git commit -m "提交页面备注" --no-verify不按要求改的话, 提交的时候这样提交, 就可以绕过了eslint的检查了...

2020-06-28 18:23:28 1513 1

原创 js使用Lodash实现对象的深拷贝

简述是一个一致性、模块化、高性能的 JavaScript 实用工具库。安装$ npm i -g npm$ npm i --save lodash“Object” Methods defaultsDeep 使用说明格式_.defaultsDeep(object, [sources])参数object (Object): 目标对象。[sources] (...Object): 来源对象返回返回 object编码实战import _ from "lodash";const so

2020-06-22 12:10:29 1305

原创 Array方法总结思维导图 es5+es6

2020-06-16 20:06:45 142

原创 UMI+DVA根据开发环境和生产环境不同动态加载变量
原力计划

你有没有遇到过这样的情况!比如你们有四种(或更多)环境:开发环境(本地调式代码环境)、测试环境(脏数据环境)、预生产环境(无限接近生产环境)、生产环境(正式环境或线上环境)等等环境。而对于不同环境你的静态资源host地址或者你的用户id等等可能是不一样的只区分开发环境和生产环境使用默认的环境变量 process.env.NODE_ENV运行npm run startconsole.log(process.env); // > {NODE_ENV: "development"} //.

2020-06-12 15:30:45 1878

原创 npm初始化项目出现npm ERR! syscall rename的解决方案

问题描述npm ERR! path C:\Users\sky\WebstormProjects\Demo\React\umi\node_modules\.staging\react-sticky-8640d073\node_modules\reactnpm ERR! code ENOENTnpm ERR! errno -4058npm ERR! syscall rename解决方案删除项目下的package-lock.json

2020-06-09 16:33:47 25398

原创 路由跳转后需要两次调用goback才能正常返回

问题描述react中使用router.push("/createForm")进行路由跳转,表单创建完成后,使用router.goBack()返回页面。创建页面可以正常返回列表页面,但是编辑页面需要调用两次router.goBack()才可以返回列表页面。编辑页面和新增页面的跳转路由地址相同,跳转方法相同技术栈:react+umi+dva+antd问题解决过程step 1多次操作两个页面观察不同之处,发现编辑页面的路由地址为http://localhost:8000/exposure-dr

2020-06-04 18:05:04 1030 1

原创 cbd脚手架搭建mobile移动端项目安装依赖后代码无法提交

问题描述使用cbd脚手架搭建移动端项目,eslintrc和gitignore后带有template后缀,安装依赖前代码可以正常提交导致安装依赖后,忽略文件未生效,eslint找不到配置文件,代码无法提交,问题解决过程观察其他项目,eslintrc和gitignore后没有template后缀解决方案删除template后缀问题出现原因未知可能是cli的问题,因为cli改过几版,mobile的框架用的少。...

2020-05-19 10:23:44 134

空空如也

空空如也

空空如也

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

TA关注的人 TA的粉丝

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