暂时未有相关云产品技术能力~
暂无个人介绍
第一次启动项目报错,报错内容是 Node Sass does not yet support your current environment: Windows 64-bit, 这个问题相信大家都清楚, node-sass 出问题了
rollup 是啥,咋不过多介绍,这里记录一下自己在看rollup文档和相关资料,然后手动来敲一些代码,并且以博客的形式输入,加深自己的理解
nginx 有一个模块是 gzip 模块,然后你只要开启了,nginx就会帮你来把数据(静态资源 和 接口数据)进行压缩,然后传入到客户端,客户端来解压,然后在进行代码的读取,其实这一步就是节约带宽,减少传输的代码包的数量。从而节约传输时间。然后网站就能很快打开了。
最近在使用react 写个人站点,发现项目一开始加载有很大一段白屏,觉得这样不是很好,需要优化一下,然后项目里面使用的是 antd 的 spin, 所以首页就使用 html + css 来实现一个
最近在服务器迁移,安装node环境也遇到些问题,本来想着安装个低版本的,但是一升级 npm, 就报错了 npm WARN npm npm does not support Node.js v8.11.1, 错误的意思很明显是 npm 在node 的版本不支持。所以没办法,自己搞,先卸载,后安装。
每一次 启动和关闭都要进入 cd /usr/local/nginx/sbin 然后执行对应的命令,是不是感觉很烦呀,来配置个全局环境变量或者一个软连接, 这个是一个2选1的,配置哪个都行个人推荐使用软连接,方便,一行命令解决。
gitup 在国内有一个问题——打不开,然后此时,好多博客或者文章就会让你去使用 科学上网的工具,科学上网的工具呢,本身是走的是一个代理,通过代理来实现gitup可以访问。关于科学上网的工具请自行搜索。
这么些api接口,然后把swagger也给加上,方便测试和维护api的文档,这也是后端一直需要做的事情,作为前端工程师,咋们虽然写后台代码不多,但是需要知道人家的工作内容是咋样的,参数怎么传递的,这样有利于联调。
在写一个服务端应用的时候,一般都会使用到作为静态服务器,node 搭建静态服务请查看我以前文章,express中间件实现静态资源服务的话可以使用 express.static()来实现,那么koa如何实现呢? 其实对于一个静态服务的话,只要你会node这个底层的原理,express 或者 koa 这些上层应用都是基于底层原理来的
express 出来的时候,js 还是处于混沌期间,es6的标准没有出来。而node的事件处理的方式都是基于 cb(callback) 的这种形式,在当时来看,这种方式是比较好的一种方式。所以express 里面的中间件处理的方式基本上都是回调。es6 的出现,带来了许多新的标准。使得express 不得不考虑需要兼容es6中的语法, 而 es6中处理异步的方式是promise,还有后面陆续的 async 和 await 等语法糖。(express 不是说不能使用这些语法糖,他使用第三方的库是可以解决的,只是没有koa那么优雅)
简单的说是,超过普通文本。但具体一些,咋们说的普通文本一般是值文字组成的文章。但是在网页中,有这么一种文本,可以是文本、图片、音频、视频等组成。但是最关键的是里面还可以有超链接,从一个文本跳转到另外一个文本。
最近博客写道项目列表中,发现这里比较多图片,一开加载会比较慢,然后就想要用一个loading的图片来占位。与此同时,如果图片加载失败那么显示错误的图片,不显示一个原有的错误,那样比较难看。
最近在使用vite+react + ant-design 来搭建个人站点,看到网上好多网站都实现了黑白皮肤的切换,并且ant-design帮我们实现了三套主题色,一个默认亮白色,暗黑主题和紧凑主题。于是我也想来弄一弄。最后还是实现了,打包后也是ok的。
函数的防抖与节流是一直的面试话题。对于函数防抖与节流的写法,大家都可能比较熟悉,但是在vue中使用函数的防抖或者节流,这里是有一个小插曲的哦。
个人博客 react 网站实现粒子效果
npm ERR! code ERESOLVE npm ERR! ERESOLVE unable to resolve dependency tree
npm : 无法加载文件 D:\soft\codeProcess\node\node_global\npm.ps1,因为在此系统上禁止运行脚本。有关详细信息,请参阅 https:/go.micr +
实现的业务场景,我想实现一个用户管理的功能,可以新增用户,删除,修改用户等。每一个功能都是独立的并且所需要的参数是不一样的,所以做了以下类型检查。
ThunkAction: 处理action 返回函数的类型,总共有4个泛型参数。
中间件:类似于插件,可以在不影响原本功能、并且不改动原本代码的基础上,对其功能进行增强。在Redux中,中间件主要用于增强dispatch函数。
vite events.js:292 throw er; // Unhandled ‘error‘ event Error: spawn esbuild.exe ENOENT
使用vue的同学都知道,vue的路由是静态的。什么叫做静态的呢?那就是可以通过一个配置文件来进行路由的配置,而我们的react的路由是动态的。为啥这么说呢?react路由具有先天的优势——jsx . 每一个页面都是组件,每一个组件可以随意的嵌套。所以react的路由是动态加载的。那么我们是否也可以向vue一样,使用一个静态文件来自动配置呢?答案是:肯定可以的。
在内存中保留历史记录,不会反应到地址栏上。一般使用在测试环境或者非浏览器环境,例如: react-Native
React的话,官方提供了一个核心插件——react-router, 如果是在dom中的话,那么使用react-router-dom,如果是native的话,那么使用react-router-native。这两个库都是基于react-router进行拓展的,意味着按照任意一个库都会帮我们按照上核心库。
useLayoutEffect 其函数签名与 useEffect相同,但它会在所有的 DOM 变更之后同步调用 effect。可以使用它来读取 DOM 布局并同步触发重渲染
这个hook比较简单,作用: 获取函数组件里面的事件,我们通过 ref 来获取类组件的事件,所以 这个 useImperativeHandle Hook 一般是于 ref 转发一起使用。
在react 的类组件中,我们可以在类中定义属性 ref 详情, 但是在函数组件是不能直接使用 ref, 如果需要使用 ref 那么就只能是 ref 转发, 说实话这个函数组件的 ref 转发 是有点绕, 而且还会增加组件的层级。个人感觉不怎么友好。
memo hooks 这个钩子也是用来做优化性能操作的,大家一定还记得 React.memo() 这个是啥呢,是要给高阶组件,用来给函数组件做性能优化的,作用类似 类组件 的 pureComponent,那么 memo hooks 和 React.memo() 有没有联系呢? 没有,虽然都是为函数组件做性能优化的,但是优化的方向是不一样的(纯组件优化方向详情)。
下拉树 就是一个下拉框里面的options里面换成一棵树的形状。本人业务需要一个这样的组件,我也懒得去发布一个组件到npm库,毕竟现在vue3出来了,这个组件只适合vue2 并且是element ui的基础,限制条件有点多。所以在这里做个笔记,有需要的自己copy 代码到自己本地,就行。
react context 上下文,相信大家都会使用。不会的可查看。详情的概念这里不介绍,只接受在函数组件中,使用context hooks 的使用
hooks是一个函数,并且是在react 函数组件中使用的,不同的hook的作用也是不一样的,例如,state hook是用来定义函数组件的状态, 而effect hook 是用来定义组件的副作用,那么自定义hook是用来干啥的呢?,自定来定义一个hook 函数,里面可以包含 多个hooks。简单点的说是,把相同逻辑的hooks封装在同一个函数里。
在效果图中,ui是会先出现的,然后我们的title值才会从 viteApp 改成 title 0,所以可以证明 effect的执行时间点是在等ui 渲染之后再来进行执行的,并且打印我会优先effect会优先输出。也就是异步执行
在类组件中,使用 this.setState({a:xxx}) 是会对当前类实例的属性进行混合。但是在state hook 中是不会进行混合的,原因嘛: 官方就是要让你你定义多个 hooks, 将每一个代码块进行分离,从而降低代码的维护成本。
hook 是啥,中文翻译叫做 钩子, 用来增强函数组件的功能,因为函数组件是在react16.8以前是没有状态的,但是函数组件又比较纯粹和简单(使用上),所以react 应社区和自身考虑,设计了hook来增强函数组件。但是在未来官方好像要让hook 和 class 共存。 相反,我们开始在新的代码中同时使用 Hook 和 class。
“nprm 不是内部或外部命令,也不是可运行的程序, 看到这个错误,我们一下子就能明白,啥原因不能使用命令呢,那肯定就是环境变量没有配置啦。不管是哪个命令,报这个问题都是环境变量没有配置好。
请注意,因为esbuild只执行不带类型信息的转换,所以它不支持某些特性,如const enum和隐式的纯类型导入。你必须在tsconfig中设置"isolatedModules": true。这样TS就会对那些不能与单独的翻译一起工作的特性发出警告。
在react 中,给组件注册的事件,不是真正的给组件内的div,或者是其他的元素注册的事件,而是通过事件冒泡的形式,最终都是给document注册的事件。(react 16版本),在react17版本上,事件就不是冒泡到document上了,而是在虚拟的根节点中进行注册.
错误边界: 用来捕捉错误的代码,说到捕捉错误。大家可能都会说 直接try catch 不就行了。对的,try catch 确实是一种在各个语言比较通用的方法。但是在react 组件中,如果某一个组件发生错误,他是会往他的父级组件抛出错误的,然后自己是会被卸载的。如果到跟组件都不能够处理错误,这个组件树就会被卸载,组件树卸载导致的页面效果就是直接的报错。
Portals 翻译为门户,但是感觉不对。作用类似插槽,但是不是vue 里面的插槽哦,有点像vue3 里面的 teleport,两者的作用都是将对于的虚拟dom 插入到真实dom的某个位置上。这里不讲两者的区别,只讲 Portals 的用法
我举一个这样的场景,在编辑用户,我们需要一个用户数据的表单,然后在个人中心的时候,我们也需要一个用户的表单,但是这两个界面长的是布局啥的都不一样,无法达到界面复用。功能都是展示用户数据。
react 组件进阶之 pureComponent(纯组件)
上下文(context): 是指一个组件里面包含所有子组件组成dom 的树,那么在这颗虚拟dom树中的环境,就称之为上下文。说到树这个概念,稍微提一笔,在树中,每一个节点我们都可以理解他是一颗树的根节点(起始节点)。
默认我全局导入了两个变量文件,一个是variable.scss, 另一个是 mixin.scss, 需要啥颜色直接改里面的$mianColor 和 subColor, 包括可以定义elementui的主题颜色
修改 elementui nav 下拉菜单内部样式
vue-cli 是一个官方推荐的vue项目脚手架,搭建项目就不用那么费劲了。但是搭建好的项目是一般可以ie9的浏览器中打开的(这里指的是vue2)。ie9主要特别蛋疼的地方在于不能使用弹性盒模型。所以一直兼容ie都是从ie10开始进行兼容的。
我们知道,函数组件是没有状态的。因此,我们想想获取函数组件,不能是在类组件中那么使用,那么,如果我们想获取函数组件内部的dom 或者react 元素呢? 此时,我们就需要使用ref转发了.
如果ref的值发生了变动(旧的函数被新的函数替代),分别调用旧的函数以及新的函数,时间点出现在componentDidUpdate之前
在了解高阶组件的时候,我们先来会议一下高阶函数,HOF(Higher-Order Function),这个的定义分为广义和侠义
我们从名字上就可以知道,静态类型是发生在代码的编写阶段,不发生在代码的运行阶段。所以我们在使用的过程中,就可以及时的提示我们代码是否存在问题等,这个的效果就和 eslint 是一样的。
上面我的使用方式是在render里面的,这个也可以是constructor里面来进行属性的赋值,具体的使用方式,根据实际情况而定,只要满足在render的前面完成属性的赋值即可。