- 博客(59)
- 收藏
- 关注
RSS订阅转载 【jest】单元测试工具随笔
官方文档地址首先附上官方文档地址，https://jestjs.io/docs/zh-Hans/getting-started.html简介Jest 是Facebook的一个专门进行Javascript单元测试的工具，这些应用当然也包括了 React 应用。它的优点之一是自带了对 React 的支持，同时也很容易支持其它框架。安装npm i jest -D（安装到本地）...
2019-09-14 17:14:00
278
转载 Windows下安装Redis服务
Redis简介Redis是有名的NoSql数据库，一般Linux都会默认支持。但在Windows环境中，可能需要手动安装设置才能有效使用。Windows安装教程1、要安装Redis，首先要获取安装包。Windows的Redis安装包需要到以下GitHub链接找到。链接：https://github.com/MSOpenTech/redis。打开网站后，找到Release，点击前...
2019-09-12 14:36:00
168
转载 【rollup】打包特性解析
rollup是什么Rollup 是一个 JavaScript 模块打包器，可以将小块代码编译成大块复杂的代码，例如 library 或应用程序，对代码模块采用es6格式特性tree shakingRollup静态分析代码中的import，并将排除任何未实际使用的代码，使得不会增加额外的依赖或使项目的大小膨胀。并且，这种基于显式的 import 和 export 语句的方...
2019-09-08 19:15:00
1612
转载 【React hooks】你不得不知道的闭包问题
需求分析我们实现了一个这样的功能点击 Start 开始执行 interval，并且一旦有可能就往 lapse 上加一点击 Stop 后取消 interval点击 Clear 会取消 interval，并且设置 lapse 为 0import React from 'react'import ReactDOM from 'react-dom'const buttonS...
2019-08-26 14:39:00
406
转载 【React hooks】useEffect和useLayoutEffect
useEffect【异步】基本上90%的情况下,都应该用这个,这个是在render结束后,你的callback函数执行,但是不会block browser painting,算是某种异步的方式吧,但是class的componentDidMount 和componentDidUpdate是同步的,在render结束后就运行,useEffect在大部分场景下都比class的方式性能更好....
2019-08-26 14:04:00
301
转载 【Ts重构Axios】关于处理请求error三种情况
三种错误描述及基本解决方案1.错误网络异常错误当网络出现异常（比如网络不通）的时候，发送请求会触发XMLHTTPRequest对象实例的error事件。于是，我们可以在onerror的事件回调函数中捕获此类错误。我们在xhr.ts中添加如下代码： ... request.onerror = function handleError() { rejec...
2019-08-23 20:32:00
2482
转载 【React hooks】关于useCallback带来的闭包问题实践方案
问题描述// 举个栗子，我用hooks 写了这么一个组件let Test = () => { /** Search base infos */ const [searchID, setSearchID] = useState(0) /** Search info action */ const onSearchInfos = useCallba...
2019-08-23 19:55:00
1098
转载 【Ts踩坑】关于子类继承Error/Array/Map等造成无法访问子类中声明的方法问题
问题描述// 举个栗子class AxiosError extends Error { constructor(message: string) { super(message) } getError() { return "error: " + this.message }}上述，我们在ts中使用es6的语法去声...
2019-08-23 19:32:00
616
转载 【React Hooks】memo和useCallback搭配所带来的性能优化
前言最近在用ts+hooks这些新特性开发新的项目，前沿的东西开发的感觉是很丝滑美妙的，时时刻刻都在踩坑，无法自拔。问题描述目录结构大概是这样的--RtDetail----Home------index.scss------index.tsx----Search------index.scss------index.tsx----Detail------index...
2019-08-21 23:33:00
357
转载 【Ts重构Axios】url处理篇
需求分析首先，我们可能需要使用我们封装的axios去发送一个下面这样的简单请求axios({ method: 'get', url: '/api/getInfo', params: { a: 1, b: 2 }})最终，我们希望我们发送的请求url是这样的，/api/getInfo?a=1&b=2，这样服务器...
2019-08-20 22:45:00
488
转载 【CSS style】超出指定行文字后开始省略
基本隐藏方案我们经常会遇到一个场景：对于一些显示标签，如果超出部分就隐藏，基本样式如下 white-space:nowrap; text-overflow:ellipsis; overflow:hidden;允许换行，超过2行再换行 overflow:hidden; text-overflow:ellipsis; display:-w...
2019-08-20 21:18:00
185
转载 【TypeScript】基本数据类型小结
1. 安装TypeScriptnpm i -g typescript2. 如何在VsCode中监视ts文件自动打包2.1 第一步 tsc --init 生成tsconfig.json 改“outDir”: "./js"2.2 在VsCode中找到菜单栏 - 任务 - 运行任务 监视tsConfig.json3. typeeScript 的数据类型typeScript中为了...
2019-08-11 20:39:00
99
转载 【TypeScript】你需要了解的泛型
1.泛型的概念泛型：软件工程中，我们不仅要创建一致的定义良好的API，同时也要考虑可重用性。 组件不仅能够支持当前的数据类型，同时也能支持未来的数据类型，这在创建大型系统时为你提供了十分灵活的功能。在像C#和Java这样的语言中，可以使用泛型来创建可重用的组件，一个组件可以支持多种类型的数据。 这样用户就可以以自己的数据类型来使用组件。通俗理解：泛型就是解决 类 接口 方法的复用性...
2019-08-11 20:36:00
96
转载 【TypeScript】几种高级类型
1.高级类型都有哪些交叉类型联合类型类型保护可为null的类型字符串字面量类型2.交叉类型function extend(<T, U>(first: T, second: U)): T&U { let result = {} as T&U for (let id in first) { result[...
2019-08-11 20:35:00
206
转载 【TypeScript】杂货铺（长期更新）
断言用武之地let someValue: any = 'this is string'someValue.length // 编译器找不到这个api// 如何让它找到 使用断言let strLength: number = (someValue as string).lengthts3.1版本报错问题// 元祖类型，不能超过越界元素let arr: [string, n...
2019-08-11 20:33:00
89
转载 【TypeScript】关于接口这一概念浅入浅出
接口类型参数接口interface labelValue { label: string}// 未使用接口以前function printLabel(labelObj: {label: string}) { console.log(labelObj.label)}// 使用接口以后function printLabel(labelObj: labe...
2019-08-11 20:30:00
74
转载 【TypeScript】何为装饰器
1.什么是装饰器装饰器是一种特殊类型的声明，它能过被附加到类声明，方法，属性或者参数上，可以修改类的行为通俗的来说就是一个方法，可以注入到类，方法，属性参数上来扩展类，属性，方法，参数的功能2.装饰器的分类类装饰器属性装饰器方法装饰器参数装饰器3.装饰器的写法：普通装饰器（无法传参）装饰器工厂（可以传参）4.类装饰器在类声明之前被声明（紧靠着类声明）。类装...
2019-08-11 20:27:00
122
转载 【webpack4x】postcss-loader无法自动添加浏览器前缀问题
没有设置浏览器类型导致的无法生效// 1. npm install postcss-loader autoprefixer --save// 2. 在项目根目录下新建 postcss.config.js// 注意： 如果没有配置在哪些浏览器上自动添加前缀，会无法添加成功// postcss.config.jsmodule.exports = { plugins: [...
2019-08-09 12:44:00
770
转载 【webpack4x】TypeError: CleanWebpackPlugin is not a constructor
// 对于最新的webpack版本：4.35.2 // 在原教程中，抛错原写法const CleanWebpackPlugin = require("clean-webpack-plugin"); ... plugins: [ new CleanWebpackPlugin(['dist'])] ... // 另一种错误写法 const CleanWeb...
2019-08-09 11:03:00
120
转载 页面滚动性能优化之passive
passive有何用？正如标题所言，passive就是为了让浏览器的页面滚动起来更加丝滑，飞一般的感觉~passive怎么用看完还是不懂，不着急，看下述慢慢道来passive的前世今生对于addEventListener()，大家都是认识的，为dom添加触发事件，那么，今天的故事就从这里开始。在早期addEventListener是这样的：addEventList...
2019-08-07 21:30:00
321
转载 【webpack4x】部分底层原理及手写一个简单打包工具
目录一、 如何编写一个loader二、 如何编写一个Plugin三、 Bundler源码编写（模块分析）一、 如何编写一个loader1.额外知识点，此处不能是箭头函数，因为我们里面要用到this指向问题，webpack会对里面的this进行变更，去用this调用一些方法2. 自己写一个loader那么如何使用自己写的loader继续加强，可以配置自己的参数...
2019-08-07 20:43:00
150
转载 【webpack4x】实战配置及问题解析
目录一、Library打包二、Progressive Web Application(PWA)打包配置三、TypeScript的打包配置四、WebpackDevServer实现请求转发五、WebpackDevServer解决单页面应用路由问题六、EsLint在webpack中的配置七、提升webpack打包速度的方法八、多页面打包配置一、 library打包场景1...
2019-08-05 20:56:00
133
转载 【webpack4x】高级概念
目录一、Tree Shaking的概念二、Development和Production模式的区分打包三、Webpack和Code Spliting四、SplitChunksPlugin配置参数详解五、Lazy Loading懒加载，Chunk是什么？六、打包分析七、CSS文件的代码分割八、webpack与浏览器缓存（caching）九、Shimming十、环境变量的使...
2019-08-04 18:09:00
267
转载 【webpack4x】核心概念
目录一、什么是loader二、使用 Loader 打包静态资源（图片篇）三、使用 Loader 打包静态资源（样式篇）四、使用plugins让打包更便捷五、Entry与Ouput的基本配置六、SourceMap的配置七、使用webpackDevServer 提升开发效率八、Hot Module Replacement热更新模块九、使用babel处理es6代码十、配置R...
2019-08-04 17:42:00
147
转载 【webpack4x】基本概念
概述此章节主要讲述几个刚使用webpack的几个基本的概念运行webpack常见的几种方式webpack index.jsnpx webpack index.jsnpm run bundle -> webpack一个简单项目打包分析chunks: 我们在做复杂打包的时候，会打包出很多文件，在大型文件中，bundle.js可能还与其他有关系，会放到chunks 0...
2019-08-04 17:01:00
86
转载 React平时的一些踩坑总结
Warning: validateDOMNesting(...): Whitespace text nodes cannot appear as a child of . Make sure you don't have any extra whitespace between tags on each line of your source code.<table>...
2019-07-15 20:01:00
471
转载 redux-saga学习进阶篇二
今日学习目录一、race进一步讨论二、组合saga三、取消任务caceled进一步讨论一、race进一步讨论有时候我们同时启动多个任务，但又不想等待所有任务完成，我们只希望拿到 胜利者：即第一个被 resolve（或 reject）的任务。 race Effect 提供了一个方法，在多个 Effects 之间触发一个竞赛（race）。// 1. 触发一个远程的获取请求，并...
2019-07-05 11:47:00
233
转载 redux-saga学习进阶篇一
今日学习目录一、错误处理try/catch二、 take/takeEvery 监听未来的action三、无阻塞调用 fork、canceled四、同时执行多个任务一、错误处理try/catch我们可以使用熟悉的 try/catch 语法在 Saga 中捕获错误。import Api from './path/to/api'import { call, put } fr...
2019-07-04 20:18:00
127
转载 redux-saga学习基础篇一
今日学习目录一、 基本入门二、 为了让代码便于测试三、call、apply、cps四、dispatch、put一、 基本入门创建一个 sagas.js 的文件，然后添加以下代码片段：// sagas.jsexport function* helloSaga() { console.log('Hello Sagas!');}为了运行我们的 Saga，我们需要：...
2019-07-04 20:13:00
127
转载 性能优化之节流（throttling）与防抖(debounce)
前言首先来举个例子。百度首页的百度输入框，用户输入的时候，每次输入的信息，我们都能看到百度服务器返回给我们的联想关键字。我们每改动一个字，它就换一次联想词，这是我们肉眼能看到的速度，实际上如果不加以处理，可能已经上服务器发起了好几十次的同一个关键字联想请求了，具体速度依赖于不同的pc等机器上的运行速度不同。那么，刚刚也谈到，对于同一个关键字，请求这么多次，也许想给用户呈现的就一次，剩...
2019-05-19 18:05:00
172
转载 git操作之发现push到远程仓库的代码有误
有时候，我们可能发现把本地代码push到中央仓库的某一个commit不对，处理方法具体分以下两个部分进行讨论1. 出错的代码，只在远程仓库你自己的branch上面，没有合并到mater情况如果只是出错在你的branch上面，那么只需要在本地把自己写错的commit修改或者删除，然后在push到你的远程分支就可以，但是这样会导致的一个问题是：由于你在本地对已经存在的commit...
2019-05-14 11:15:00
348
转载 git高级浅入之当我们需要去恢复到某个版本
这一节我们依然将谈到两个操作有时候，我们想恢复到过去某个版本怎么办？git为我们提供了reset操作，我们想恢复的版本大致有如下两种情况最近一次的commit有bug，要恢复到提交前的上一个版本（或者最近一次的commit不想要）回退到过去某个版本上1. 抛弃最近一次提交的版本git reset hard master^实践看下效果吧，初始化个仓库，添加三个文件，提交...
2019-05-05 19:58:00
69
转载 git高级浅入之当我们需要修改某次commit信息
这节内容主要谈两个比较常见的操作，去修复我们需要修改的commit信息。有时候，我们会发现我们所提交的信息可能写错了，需要修改怎么办？这种情况主要分为以下两种：修改最近一次的提交信息修改指定的某一次提交信息1. 使用git commit amend修改最近一次的提交信息在git初级浅入的那一章有简单的谈到这一操作，今天我们再来讨论一下。git commit --am...
2019-05-05 17:16:00
370
转载 git高级浅入之rebase与merge差异
目录rebase的几个操作rebase与merge的比较和实际操作结合动图加深理解rebase1.rebase的几个操作git rebase [分支名]git rebase --continue 继续rebasegit rebase --abort 放弃本次rebase2.rebase与merge的比较和实际操作相比较于git merge，我们在初级篇...
2019-04-26 18:39:00
135
转载 git初级浅入其常用操作
1. git init我们从初始化一个仓库开始，通过此命令可以初始化一个仓库git init首先我们在当前目录下创建一个目录pratice和一个文件test.jsmkdir praticecd praticetouch test.jsls然后我们修改一下test.js文件，给它加上一句代码console.log(1)vim test.js2. git statu...
2019-04-26 16:54:00
74
转载 使用React Hooks新特性useReducer、useContext替代传统Redux高阶组件案例
当我们使用redux进行数据管理的时候，一般都是在根组件通过Provider的方式引入store，然后在每个子组件中，通过connect的方式使用高阶组件进行连接，这样造成的一个问题是，大量的高阶组件代码冗余度特别高，既然hooks带来了新特性，不如一起来用用看目录结构如下：action/example/index.js：我们还使用redux的思想，编写actionred...
2019-04-16 10:47:00
355
转载 React Hooks新特性学习随笔
React Hooks 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。前言本篇主要以讲几个常用的api为主。1.useState这个例子用来显示一个计数器。当你点击按钮，计数器的值就会增加，现在我们的写法如下，class Example extends React.Component { c...
2019-04-15 18:18:00
118
转载 ES7/8新特性学习随笔
随着每年EcmaScript都会为js带来一些新特性，带来更多美化的编程体验，今天就走进一下es2016/2017所带来的新特性ES7新特性includes()指数操作符ES8新特性async/awaitObject.values()Object.entries()Object.getOwnPropertyDescriptors()String paddin...
2019-04-12 11:26:00
114
转载 ES8之async/await学习随笔
详细学习参考文档： 阮一峰老师的博客，覆盖知识点ES6/7/8/9，本篇学习笔记对阮老师的关于async/await文档中的知识点进行分点总结在ES8中加入async/await新特性后，很明显带来的好处是避免回调地狱，代码更加优雅，可读性远远提升。语法async函数的语法规则总体上比较简单，难点是错误处理机制。语法总结主要分为以下几点：1.async函数返回一个 Promi...
2019-04-12 10:52:00
175
转载 RN Android全面屏适配
像现在市面上新出的手机，例如华为P30 pro，小米9，iPhone XS MAX,屏占比都惊人的达到90%以上，这些手机具备了以下几个特点大，屏占比高，长宽比都不再是16:9，都达到了19.5:9甚至是更高短边的像素、density的取值都是一样的，所以需要适配的是长边他们具备以上特点的同时带了以下问题传统布局的高度不足，导致上下留黑边基于屏幕顶部或底部的布局，如弹框，...
2019-04-11 10:32:00
367
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人