2020-05-08 代码规范eslint eslintESLint 是一个 Javascript Linter,帮助我们规范代码质量,提高团队开发效率。 现在搭建项目一般都是使用现有的脚手架然后进行调整。 而且 typescript 的代码 lint 检查也转战为 eslint 了,tslint 已经是历史了。 eslint 带来的好处: 避免代码错误 写出最佳实践的代码 规范变量使用方式 规范代码格式 更好的使用新的语法 现在... 阅读全文…
2020-05-05 react-组件缓存的方式 缓存方式 数据缓存,把组件的数据保持起来 从显示上实现,样式上的显示隐藏方式,如display:none 伪造组件,然后把真实所需的组件移位,渲染到 HTML 的节点保持与伪造组件一致 数据缓存这是最常用的缓存方式,而且也是最符合 react 的,因为 react 就是为了 UI 层实现的,从数据到数据被直观的显示。react 是一个面向数据的,所以我们可以把所有的内容保存为一份数据,然后... 阅读全文…
2020-05-03 qiankun微前端爽一把 为什么不使用 Iframe 微前端现在越来越火,因为大家尝到微服务的甜头,而前端行业,都是别人好的东西往家里搬,所以大家都纷纷搭建属于自己的那个微前端架子,那么最好的方式当然开箱即用,所以就有了 qiankun,qiankun 在使用者推动下会越来越符合大众的微前端方案。 qiankun 微前端 Demo 与文档 例子使用了 react 脚手架与 vue 脚手架 阅读全文…
2020-05-02 react/hooks之二 动机使用 hooks 的动机: 在组件之间复用状态逻辑很难; class 组件要实现复用逻辑,通常会以高阶组件的形式实现或render props,但它们需要重新组织你的组件结构并让组件嵌套变深,代码难以理解,形成“嵌套地狱”。 复杂组件变得难以理解; 当一个简单的组件,由于需要的迭代,组件间的状态散布到生命周期的各个时期里,而状态之间既互相关联又互相不影响,导致代码拆分困难,组件的... 阅读全文…
2020-05-02 linux002 平时使用,记事内容 惯用账号密码:rootadmin123 virtualbox 虚拟机的使用-关于没有 IP 地址https://www.cnblogs.com/caizhw3/articles/virtualbox_net_surfingInternetBasic.html msconfig 递归创建目录mkdir -p zz/xx/cc 删除非空目录rm -rf zz 创建空文件... 阅读全文…
2020-05-02 gulp底层vinyl-fs vinyl-fs当你只想处理文件到文件的文件处理场景时可以使用vinyl-fs,而不必使用 gulp,因为 gulp 的 src、pipe、dest 的实现,就是使用了它。而 webpack\rollup 都是模块化打包工具,这里模块一般都是把文件当成一个模块,然后处理完之后把所有模块整合,所以有时不符合场景,当然也是用 babel 的 cli,但它的处理可能会出现一些小问题,如目录里是单目... 阅读全文…
2020-05-01 使用chrome排查内存泄露 使用 chrome 排查内存泄露内存分析使用的工具包括 chrome 任务管理器、chrome 时间轴(低版本是 Timeline,高版本对应 performance)、chrome memory(低版本是 chrome profiles,主要用 JS 堆快照、JS 堆动态分配时间轴) chrome 的工具里提供了很多种方式去排查明确内存情况,但我觉得会其中的一些就够了,就好像使用 js A... 阅读全文…
2020-04-28 React16/fiber 前言react 在进行组件渲染时,从 setState 开始到渲染完成整个过程是同步的(“一气呵成”)。如果需要渲染的组件比较庞大,js 执行会占据主线程时间较长,会导致页面响应度变差,使得 react 在动画、手势等应用中效果比较差。 所以在 react v15 之前使用它做一些动画效果或大数据量处理渲染之类的都可能会出现卡顿等性能问题。 react v15 是函数调用栈,递归的方式,从父... 阅读全文…