- 博客(22)
- 收藏
- 关注
RSS订阅
原创 带着问题看React-Redux源码（一万四千字长文预警）
欢迎关注公众号： 一口一个前端，不定期分享我所理解的前端知识写在前面我在读React-Redux源码的过程中，很自然的要去网上找一些参考文章，但发现这些文章基本都没有讲的很透彻，很多时候就是平铺直叙把API挨个讲一下，而且只讲某一行代码是做什么的，却没有结合应用场景和用法解释清楚为什么这么做，加上源码本身又很抽象，函数间的调用关系非常不好梳理清楚，最终结果就是越看越懵。我这次将尝试换一种解读...
2019-09-02 09:42:50
427
原创 homebrew 安装任何软件报错 **SSL_ERROR_SYSCALL in connection to pkg-containers.githubusercontent.com:443**
homebrew 安装任何软件报错 SSL_ERROR_SYSCALL in connection to pkg-containers.githubusercontent.com:443这是由于pkg-containers.githubusercontent.com这个网址被墙了，需要手动配置host文件，让这个网址被正确的解析到对应的ip上，方法如下：进入 https://www.ipaddress.com/ 网站在搜索框内输入这个网址点搜索，将查到的4个IP地址写到host文件上大功告成
2021-10-19 18:11:19
1740
原创 理解前端自动化测试TDD + BDD
前言在日常的开发中，整天赶需求的我们好像没有时间顾及自动化测试，尤其是在敏捷开发的时候。但其实自动化测试可以帮助我们提高代码和功能的健壮程度，大幅减少可能出现的bug。尤其是在复杂系统中，自动化测试的作用不容忽视。本篇文章是我自己的学习记录，使用测试框架jest和前端框架React来简单梳理的自动化测试。日常开发通常涉及到业务代码的开发以及函数、组件库的开发。针对这两方面的自动化测试，在模式...
2020-04-29 09:51:27
853
原创 数组的push、unshift、pop、shift方法实现
尾部添加(push)push() 方法将一个或多个元素添加到数组的末尾，并返回该数组的新长度。从解释中可以看出，push方法只要将要添加的元素依次放到数组的最后即可，不会改变原有数组元素的索引。所以循环参数列表，将新元素依次放到数组的最后即可。Array.prototype._push = function(...value) { for (var i = 0; i < argumen...
2020-04-28 09:57:09
2323
1
原创 竞态请求的Redux中间件解决方案
这个问题来源于一次无意中在项目里发现的bug，场景是组件会在切换项目后重新渲染，每次重渲染后，组件挂载完毕会请求对应的当前项目的数据，存到store中展示到页面上。但网络请求时间的长短是难以预测的，这就引发了一个问题：切换到B项目，请求发出了但还没回来，这时候再切换到A项目。那么现在同时存在两个请求，先前的请求B和新的请求A。请求A的速度比较快，马上成功了，将数据存到store中，展示出来。...
2019-12-09 09:27:58
376
原创 JS数组Reduce方法详解
概述一直以来都在函数式编程的大门之外徘徊，要入门的话首先得熟悉各种高阶函数，数组的reduce方法就是其中之一。reduce方法将会对数组元素从左到右依次执行reducer函数，然后返回一个累计的值。举个形象的例子：你要组装一台电脑，买了主板、CPU、显卡、内存、硬盘、电源…这些零件是组装电脑的必要条件。装的过程可以简单概括为拆掉每个零件的包装，再装到一起。类比一下reduce函数就可以明白...
2019-11-18 10:37:34
970
原创 Promise原理解析
写在前面promise经常用，但不知道其实现原理。抽时间研究了一下实现，发现东西真的不少。阅读文章之前需要了解其用法，结合用法看文章可能更容易理解。结构先看一下简单的用法。const promise = new Promise((resolve, reject) => { setTimeout(() => { resolve('success') })...
2019-10-14 07:02:54
189
原创 关于变量提升和函数提升的理解
变量提升：变量的声明写在可以在使用变量之后；函数提升：函数可以先调用，后声明；上面先解释了下我理解的这两个概念的定义。要真正理解它们，最好从变量对象的角度出发。引出变量对象的概念，要先理解执行上下文，也就是当控制器执行到可执行代码的时候，就会生成一个执行上下文，也就是代码的执行环境，会产生一个作用域。这个执行上下文的生命周期有两个阶段：创建阶段 和 代码执行阶段创建阶段就会创建变量对象，创建...
2019-09-11 10:23:12
582
原创 React组件设计模式-Provider-Consumer
React组件设计模式-组合组件React组件设计模式-Render-props我们都知道，基于props做组件的跨层级数据传递是非常困难并且麻烦的，中间层组件要为了传递数据添加一些无用的props。而React自身早已提供了context API来解决这种问题，但是16.3.0之前官方都建议不要使用，认为会迟早会被废弃掉。说归说，很多库已经采用了context API。可见呼声由多么强烈...
2019-09-10 11:18:30
3956
原创 React组件设计模式-Render-props
React组件设计模式-组合组件React组件设计模式-Provider-Consumer写业务时，我们经常需要抽象一些使用频率较高的逻辑，但是除了高阶组件可以抽象逻辑，RenderProps也是一种比较好的方法。RenderProps，顾名思义就是将组件的props渲染出来。实际上是让组件的props接收函数，由函数来渲染内容。将通用的逻辑抽象在该组件的内部，然后依据业务逻辑来调用函数（...
2019-09-09 09:33:30
249
原创 React组件设计模式-组合组件
React组件设计模式-Provider-ConsumerReact组件设计模式-Render-props这种模式本质上解决的是组件之间传值的问题。但是它对于传值以及一些内部操控的逻辑封装得更严密。场景：希望减少上下级组件之间props的传递，简单来说就是不用传做显式地传值，来达到组件之间相互通信的目的举例来说，某些界面中应该有Tabs这样的组件，由Tab和TabItem组成，点击每个Ta...
2019-09-08 11:46:26
233
原创 今天，我明白了JS事件循环机制
写在前面js是一门单线程的编程语言，也就是说js在处理任务的时候，所有任务只能在一个线程上排队被执行，那如果某一个任务耗时比较长呢？总不能等到它执行结束再去执行下一个。所以在线程之内，又被分为了两个队列：同步任务队列异步任务队列举个例子来说：比如你去银行办理业务，都需要领号排队。银行柜员一个个办理业务，这时这个柜员就相当于一个js线程，客户排的队就相当于同步任务队列，每个人对于柜员相...
2019-09-07 18:09:28
411
原创 函数的防抖和节流是个啥？？？
曾经面试时候被问到过这个，年少的我一脸无知。。。后来工作中遇到了一个场景：输入名称的同时去服务器校验名称是否重复，但发现之前的代码竟然都没做限制，输入一次发一次请求。简直忍不了，就在项目的utils里加上了防抖函数。正好做一个总结，加深印象。函数防抖和节流，都是控制事件触发频率的方法。应用场景有很多，输入框持续输入，将输入内容远程校验、多次触发点击事件、onScroll等等。为了说明问题，...
2019-09-06 15:23:08
264
原创 React 服务端渲染从入门到精通
前言这篇文章是我自己在搭建个人网站的过程中，用到了服务端渲染，看了一些教程，踩了一些坑。想把这个过程分享出来。我会尽力把每个步骤讲明白，将我理解的全部讲出来。文中的示例代码来自于这个仓库，也是我正在搭建的个人网站，大家可以一起交流一下。示例代码因为简化，所以与仓库代码有些许出入。本文中用到的技术React V16 | React-Router v4 | Redux | Redux-thu...
2019-09-05 10:21:30
175
1
原创 简单梳理Redux的源码与运行机制
前言前几天写了一篇react另一个状态管理工具Unstated的源码解析。开启了我的看源码之路。想一想用了好长时间的redux，但从没有深究过原理，遇到报错更是懵逼，所以就啃了一遍它的源码，写了这篇文章，分享我对于它的理解。API概览看一下redux源码的index.js，看到了我们最常用的几个API：createStorecombineReducersbindActionCre...
2019-09-04 11:55:48
191
原创 理解 React 轻量状态管理库 Unstated
在React写应用的时候，难免遇到跨组件通信的问题。现在已经有很多的解决方案。React本身的ContextRedux结合React-reduxMobx结合mobx-reactReact 的新的Context api本质上并不是React或者Mbox这种状态管理工具的替代品，充其量只是对React自身状态管理短板的补充。而Redux和Mbox这两个库本身并不是为React设计的，对于...
2019-09-03 12:03:00
1809
原创 React音乐播放器(react+redux+react-router+webpack)
技术：React16，Redux，React-Router，WebPack项目演示项目github地址会点ps,所以自己设计了页面和交互。现在的数据都是是自己mock的，开发后台的时候会对接真实数据，由于搜索、收藏歌单、新建歌单、删除歌单、收藏单曲、移除收藏单曲等功能需要后台配合，所以现在都是纯前端展示，不具备功能部分页面：项目描述项目基于四...
2018-02-25 13:56:23
736
原创 几个基于React、Vue、Node.js、MongoDB技术栈的实践项目
业余时间写的关于react,vue两个框架的训练，以及一些小工具React + Node.js + MongoDB实时聊天WebApp (react_recruiment_webapp)React移动端省市县级联选择器 (react_cascader)vue.js + node.js + MongoDB 商城(vue_shop)vue.js + node.js + MongoDB ...
2018-02-11 12:30:52
1029
原创 基于React的适配PC端和移动端的轻量音乐播放器
基于React的适配PC端和移动端的轻量音乐播放器，底层是audio标签，利用audio的API完成开发，css媒体查询做适配
2017-12-28 18:55:18
1140
原创 基于Vue + Node.js + MongoDB的图片上传组件，实现图片的预览和删除
Vue搭建页面，form绑定一个不可见的iframe实现无刷新提交表单，图片选择完毕后，递归调用axios将所选图片依次post到后台，实现单图和多图的上传功能，并实现图片预览、进度条、检测图片大小是否超出限制（前端检测）。 后台利用formidable解析表单数据，重命名后将图片名称，id，大小,路径存到MongoDB数据库。每次接收并存储完成，给前台返回最新上传的图片。删除分组会连同组内的所有图片一起删除。
2017-12-17 18:39:24
1371
转载 MongoDB服务无法启动，发生服务特定错误：100
原因：没有正常关闭mongod服务，导致mongod被锁解决方案：进入db文件夹，删除mongod.lock文件，然后重新启动服务即可
2017-11-10 11:49:20
1070
原创 vue2.0中css过渡动画总结
vue2.0中css过渡动画总结vue.2.0中的过渡动画利用自身的transition组件实现，有四种情形可以实现过渡效果利用v-if渲染元素时利用v-show展示或者隐藏元素时应用过渡生效动态组件(把几个组件挂载到一个父节点上，在父节点绑定变量来决定显示哪个子组件)组件根节点过渡有两种总的状态：即enter(过渡开始)和leave(过渡结束) 这两中状态再细分，可分出6种状态，对应6
2017-06-26 22:26:25
3559
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人