React 中常见的动画实现方式

现在,用户对于前端页面的要求已经不能满足于实现功能,更要有颜值,有趣味。除了整体 UI 的美观,在合适的地方添加合适的动画效果往往比静态页面更具有表现力,达到更自然的效果。比如,一个简单的 loading 动画或者页面切换效果不仅能缓解用户的等待情绪,甚至通过使用品牌 logo 等形式,默默达到品牌宣传的效果。 React 作为最近几年比较流行的前端开发框架,提出了虚拟 DOM 概念,所有 DOM 的变化都先发生在虚拟 DOM »

移动端 Modal 组件开发杂谈

Vant 是有赞开发的一套基于 Vue 2.0 的 Mobile 组件库,在开发的过程中也踩了很多坑,今天我们就来聊一聊开发一个移动端 Modal 组件(在有赞该组件被称为 Popup )需要注意的一些坑。 在任何一个合格的UI组件库中,Modal 组件应该是必备的组件之一。它一般用于用户处理事物,但又不希望跳转页面时,可以使用 Modal 在当前页面中打开一个浮层,承载对应的操作。相比PC端,移动端的 »

我为什么从Redux迁移到了Mobx

Redux是一个数据管理层,被广泛用于管理复杂应用的数据。但是实际使用中,Redux的表现差强人意,可以说是不好用。而同时,社区也出现了一些数据管理的方案,Mobx就是其中之一。 Redux的问题 Predictable state container for JavaScript apps 这是Redux给自己的定位,但是这其中存在很多问题。 首先,Redux做了什么?看Redux的源码,createStore只有一个函数,返回4个闭包。dispatch只做了一件事,调用reducer然后调用subscribe的listener, »

浅谈React 16中的Fiber机制

九月份关于 React 开源协议的话题在社区闹得沸沸扬扬,所幸最后以 Facebook 宣布遵循 MIT 进行开源告终,但由此也足以看出 React 在前端圈的影响力。 作为 Facebook 前端出品的当门红,React 也迎来了一次大的升级,引入了最新的核心调度算法即 Fiber 机制,这是 React 基于 Fiber 调度的第一个版本,其次还增加了一些呼声高的新特性,如 »

Felint 好用的前端静态代码校验工具包

写在最前 可能很多同学跟我原来一样,觉得前端静态代码校验无非是告诉你代码缩进等格式问题,加上本身自己写代码就比较注意格式问题,所以觉得前端代码校验没什么必要。但其实前端代码校验能带给我们的远不止这些。 第一个例子 某天我在给页面添加链接的时候写下了如下代码: <a href="https://www.youzan.com" target="_blank">点我</a> 正当我想继续的时候,突然发现我的编辑器提醒我这行代码有错误(使用 Felint后) »