豆浆油条_煎bingo子-CSDN博客

原创 border影响父元素的高度-解决方案

现象：在为Menu组件添加样式时发现，当我点击某个tab时父元素的高度会撑开，原因是boder-bottom设置为2px，第一反应是将border-sizing设置为border-box，使得和属性包括内容，内边距和边框，但不包括外边距。但是无效，因为我没有为父元素设置宽高。 1655864862453解决：换一种方法解决，在menu-item添加border-bottom的样式与点击时的样式一样，但颜色设置为transparent就行！ 1655865242469...

2022-06-22 10:50:05 1005 1

原创 3 .前端性能优化-使用Lighthouse测试性能

前端性能优化-使用Lighthouse测试性能

2022-06-11 23:02:09 1937

原创 Cannot find module ‘@babel/runtime/helpers/builtin/interopRequireDefault‘

报错：可能报两个错误原因：一开始我以为babel转es6失败，重新安装@babel/runtime发现问题没能解决，当我去node_modules里面查找‘babel/runtime/helpers/builtin/interopRequireDefault'路径时发现没有builtin这个文件夹，尝试把helpers下的一堆js文件复制到新建builtin文件夹中，重新运行后成功！解决： 2.在helpers文件夹下新建builtin文件夹，并把helpers下的js文件全都复制到builtin

2022-06-11 14:01:25 2291

原创 1.前端性能优化-介绍

前端性能优化-介绍

2022-06-10 14:02:43 223

原创 2.前端性能优化-web性能指标

web性能指标

2022-06-10 14:00:52 2182

原创 mobx装饰器报错

报错：Parsing error: This experimental syntax requires enabling one of the following parser plugin(s): "decorators-legacy", "decorators".原因：这个实验性语法需要启用以下解析器插件之一:"decorator -legacy"， "decorator "解决：安装babel插件转换器即可yarn add @babel/plugin-proposal-decorator

2022-05-16 17:06:32 2964

原创【ts类型体操】03312-easy-parameters

需求：实现内置的 Parameters 类型，而不是直接使用它，可参考TypeScript官方文档type MyParameters<T extends (...args: any[]) => any> = anyimport type { Equal, Expect } from '@type-challenges/utils'const foo = (arg1: string, arg2: number): void => {}const bar = (arg1

2022-05-09 23:29:22 324

原创【ts类型体操】03060-easy-unshift

需求：实现类型版本的 Array.unshift。type Unshift<T extends any[], U> = anyimport type { Equal, Expect } from '@type-challenges/utils'import { ExpectFalse, NotEqual } from '@type-challenges/utils'type cases = [ Expect<Equal<Unshift<[], 1>,

2022-05-09 23:24:17 232

原创【ts类型体操】03057-easy-push

需求：在类型系统里实现通用的 Array.push 。type Push<T extends any[], U> = anyimport type { Equal, Expect } from '@type-challenges/utils'import { ExpectFalse, NotEqual } from '@type-challenges/utils'type cases = [ Expect<Equal<Push<[], 1>, [1]

2022-05-09 23:20:35 285

原创【ts类型体操】00898-easy-includes

需求：在类型系统里实现JavaScript的Array.includes方法，这个类型接受两个参数，返回的类型要么是true要么是false。type Includes<T extends readonly any[], U> = anyimport type { Equal, Expect } from '@type-challenges/utils'type cases = [ Expect<Equal<Includes<['Kars',...

2022-05-09 23:15:39 684

原创【ts类型体操】00533-easy-concat

需求：在类型系统里实现 JavaScript 内置的 Array.concat 方法，这个类型接受两个参数，返回的新数组类型应该按照输入参数从左到右的顺序合并为一个新的数组。type Concat<T extends any[], U extends any[]> = anyimport type { Equal, Expect } from '@type-challenges/utils'type cases = [ Expect<Equal<Concat&lt

2022-05-09 23:03:45 407

原创【ts类型体操】00268-easy-if

需求：实现一个 IF 类型，它接收一个条件类型 C ，一个判断为真时的返回类型 T ，以及一个判断为假时的返回类型 F。 C 只能是 true 或者 false， T 和 F 可以是任意类型。type If<C extends boolean, T, F> = anyimport type { Equal, Expect } from '@type-challenges/utils'type cases = [ Expect<Equal<If<true, '

2022-05-09 11:40:09 194

原创【ts类型体操】00189-easy-awaited

需求：假如我们有一个 Promise 对象，这个 Promise 对象会返回一个类型。在 TS 中，我们用 Promise 中的 T 来描述这个 Promise 返回的类型。type MyAwaited<T extends Promise<any>> = anyimport type { Equal, Expect } from '@type-challenges/utils'type X = Promise<string>type Y = Promis

2022-05-09 11:12:11 398

原创【ts类型体操】00043-easy-exclude

需求：实现内置的Exclude类型，但不能直接使用它本身。type MyExclude<T, U> = anyimport type { Equal, Expect } from '@type-challenges/utils'type cases = [ Expect<Equal<MyExclude<'a' | 'b' | 'c', 'a'>, Exclude<'a' | 'b' | 'c', 'a'>>..

2022-05-09 11:00:06 228

原创【ts类型体操】00018-easy-tuple-length

需求：创建一个通用的Length，接受一个readonly的数组，返回这个数组的长度。type Length<T extends readonly any[]> = anyimport type { Equal, Expect } from '@type-challenges/utils'const tesla = ['tesla', 'model 3', 'model X', 'model Y'] as constconst spaceX = ['FALCON 9', 'F

2022-05-08 22:52:46 254

原创【ts类型体操】00014-easy-first

需求：实现一个通用First<T>，它接受一个数组T并返回它的第一个元素的类型。type First<T extends readonly any[]> = anyimport type { Equal, Expect } from '@type-challenges/utils'type cases = [ Expect<Equal<First<[3, 2, 1]>, 3>>, Expect<Equal<Fir

2022-05-08 22:45:25 848

原创【ts类型体操】00011-easy-tuple-to-object

需求：传入一个元组类型，将这个元组类型转换为对象类型，这个对象类型的键/值都是从元组中遍历出来。type TupleToObject<T extends readonly any[]> = anyimport type { Equal, Expect } from '@type-challenges/utils'const tuple = ['tesla', 'model 3', 'model X', 'model Y'] as consttype cases = [ Ex

2022-05-08 22:22:09 504 6

原创【ts类型体操】00007-easy-readonly

需求：实现一个MyReadonly，该 Readonly 会接收一个泛型参数，并返回一个完全一样的类型，只是所有属性都会被 readonly 所修饰。type MyReadonly<T> = anyimport type { Equal, Expect } from '@type-challenges/utils'type cases = [ Expect<Equal<MyReadonly<Todo1>, Readonly<Todo1>&

2022-05-08 22:13:13 315 1

原创【ts类型体操】00004-easy-pick

要求：实现TS内置的Pick<T,K> 从类型T中选择出属性K，构造一个新的类型type MyPick<T, K>=anyimport type { Equal, Expect } from '@type-challenges/utils'type cases = [ Expect<Equal<Expected1, MyPick<Todo, 'title'>>>, Expect<Equal<Expected2,

2022-05-06 17:46:33 361

原创 Install fail Error: Unsupported URL Type “workspace:“: workspace:*

背景：在尝试npm i初始化失败，报错信息为：Install fail! Error: Unsupported URL Type "workspace:": workspace:*原因：检查package.json中的项目依赖版本是否出现[workspace:]。如果使用npm i来安装，它会出现 "不支持的URL类型 "workspace:": workspace:"。如果使用yarn来安装，就ok！解决：1.安装yarnnpm install -g yarn2.安装某个包

2022-04-28 11:23:55 23936 7

原创关于react中的state整理

react怎么检测到数据的变化？react状态变化只能通过setState()，调用setState()就会更新状态重新渲染dom为什么不直接更新state？1.如果试图直接更新state，则不会重新渲染组件2.需要使用setState()方法去更新state，它调度对组件state对象的更新，组件通过重新渲染来响应react中，在执行setState()方法后发生了什么？咱们可以将“render”分为两个步骤：1.虚拟DOM渲染：当render方法被调用时，它会返回一个新的

2022-04-21 11:55:08 1022

原创 React 16.6的懒加载组件

React 16.6 添加了一个使代码拆分更容易的新功能：React.lazy()。我们通过一个小演示看看如何以及为什么要使用此功能。我们有一个显示股票列表的应用程序，当单击一只股票时，它会显示一个图表：可以去github下载源码GitHub - pomber/react-lazy-preload-demo: Lazy loading (and preloading) components in React16.6Lazy loading (and preloading) components..

2022-04-14 19:21:15 823 1

原创新冠疫情数据实时显示-next.js

假设咱们要构建一个显示冠状病毒统计数据的网站，主页显示每个国家/地区的信息，并带有指向更多详细信息的链接。所有数据都来自一个 JSON 文件，咱们可以从公共 URL 下载该文件，该文件每天更新一次。可以尝试考虑如何构建该网站，然后了解咱们上篇所说的Next.js 9.3 的方法。...

2022-04-13 15:09:57 461 1

原创超超超认真的next.js学习笔记-获取数据

浏览器访问网站的流程：输入一个网址，浏览器获取一个HTML页面，但这会页面没有数据，使用fetch发请求获取数据并使用useStates设置state，state发生变化，这是render函数再一次去渲染页面，因此这个流程中咱们有两个渲染周期。而我们使用next.js则是利用第一个渲染周期进行预渲染，减少首页白屏显示时间。在next.js中文网中我们知道Next.js 有两种预渲染形式：静态生成和服务器端渲染静态生成：如果一个页面使用了静态生成，在页面构建时将生成对应的HTML文件，意味着在生产环

2022-04-12 15:02:33 4747 3

空空如也

空空如也