玄沉

前言在日常的开发中，整天赶需求的我们好像没有时间顾及自动化测试，尤其是在敏捷开发的时候。但其实自动化测试可以帮助我们提高代码和功能的健壮程度，大幅减少可能出现的bug。尤其是在复杂系统中，自动化测试的作用不容忽视。本篇文章是我自己的学习记录，使用测试框架jest和前端框架React来简单梳理的自动化测试。日常开发通常涉及到业务代码的开发以及函数、组件库的开发。针对这两方面的自动化测试，在模式...

React组件设计模式-组合组件React组件设计模式-Render-props我们都知道，基于props做组件的跨层级数据传递是非常困难并且麻烦的，中间层组件要为了传递数据添加一些无用的props。而React自身早已提供了context API来解决这种问题，但是16.3.0之前官方都建议不要使用，认为会迟早会被废弃掉。说归说，很多库已经采用了context API。可见呼声由多么强烈...

React组件设计模式-组合组件React组件设计模式-Provider-Consumer写业务时，我们经常需要抽象一些使用频率较高的逻辑，但是除了高阶组件可以抽象逻辑，RenderProps也是一种比较好的方法。RenderProps，顾名思义就是将组件的props渲染出来。实际上是让组件的props接收函数，由函数来渲染内容。将通用的逻辑抽象在该组件的内部，然后依据业务逻辑来调用函数（...

React组件设计模式-Provider-ConsumerReact组件设计模式-Render-props这种模式本质上解决的是组件之间传值的问题。但是它对于传值以及一些内部操控的逻辑封装得更严密。场景：希望减少上下级组件之间props的传递，简单来说就是不用传做显式地传值，来达到组件之间相互通信的目的举例来说，某些界面中应该有Tabs这样的组件，由Tab和TabItem组成，点击每个Ta...

前言这篇文章是我自己在搭建个人网站的过程中，用到了服务端渲染，看了一些教程，踩了一些坑。想把这个过程分享出来。我会尽力把每个步骤讲明白，将我理解的全部讲出来。文中的示例代码来自于这个仓库，也是我正在搭建的个人网站，大家可以一起交流一下。示例代码因为简化，所以与仓库代码有些许出入。本文中用到的技术React V16 | React-Router v4 | Redux | Redux-thu...

前言前几天写了一篇react另一个状态管理工具Unstated的源码解析。开启了我的看源码之路。想一想用了好长时间的redux，但从没有深究过原理，遇到报错更是懵逼，所以就啃了一遍它的源码，写了这篇文章，分享我对于它的理解。API概览看一下redux源码的index.js，看到了我们最常用的几个API：createStorecombineReducersbindActionCre...

在React写应用的时候，难免遇到跨组件通信的问题。现在已经有很多的解决方案。React本身的ContextRedux结合React-reduxMobx结合mobx-reactReact 的新的Context api本质上并不是React或者Mbox这种状态管理工具的替代品，充其量只是对React自身状态管理短板的补充。而Redux和Mbox这两个库本身并不是为React设计的，对于...

欢迎关注公众号： 一口一个前端，不定期分享我所理解的前端知识写在前面我在读React-Redux源码的过程中，很自然的要去网上找一些参考文章，但发现这些文章基本都没有讲的很透彻，很多时候就是平铺直叙把API挨个讲一下，而且只讲某一行代码是做什么的，却没有结合应用场景和用法解释清楚为什么这么做，加上源码本身又很抽象，函数间的调用关系非常不好梳理清楚，最终结果就是越看越懵。我这次将尝试换一种解读...

技术：React16，Redux，React-Router，WebPack项目演示项目github地址会点ps,所以自己设计了页面和交互。现在的数据都是是自己mock的，开发后台的时候会对接真实数据，由于搜索、收藏歌单、新建歌单、删除歌单、收藏单曲、移除收藏单曲等功能需要后台配合，所以现在都是纯前端展示，不具备功能部分页面：项目描述项目基于四...

业余时间写的关于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 ...

基于React的适配PC端和移动端的轻量音乐播放器，底层是audio标签，利用audio的API完成开发，css媒体查询做适配