目前最流行的两大前端框架，React和Vue，都不约而同的借助Virtual DOM技术提高页面的渲染效率。那么，什么是Virtual DOM？它是通过什么方式去提升页面渲染效率的呢？本系列文章会详细讲解Virtual DOM的创建过程，并实现一个简单的Diff算法来更新页面。本文的内容脱离于任何的前端框架，只讲最纯粹的Virtual DOM。敲单词...

在React中，如果是由React引发的事件处理（比如通过onClick引发的合成事件处理）和组件生命周期函数内（比如componentDidMount），调用this.setState不会同步更新this.state，除此之外的setState调用会同步执行this.state。 所谓“除此之外”，指的是绕过React通过addEventListener直接添加的事件处理函数，还有通过setTim...

最近在团队内做了一次vue原理分享，现场手写了一个乞丐版mvvm，这里记录一下这个mvvm实现的过程。 源码：[链接] 这个mvvm是基于发布订阅模式实现（也是vue本身的实现原理），最终达到的效果如下： 使用方式也跟vue一样： {代码...} 实现很简单： {代码...} 原理： 最根本的原理很简单，无非是基于发布订阅的消息通知模式...

并且 React 自己内部实现了一个合成事件，使用 React 的时候通常你不需要使用 addEventListener 为一个已创建的 DOM 元素添加监听器。你仅仅需要在这个元素初始渲染的时候提供一个监听器。

这是一个React组件实现组件可交互所需的流程，render()输出虚拟DOM，虚拟DOM转为DOM，再在DOM上注册事件，事件触发setState()修改数据，在每次调用setState方法时，React会自动执行render方法来更新虚拟DOM，如果组件已经被渲染，那么还会更新到DOM中去。
这个过程，setState就像一个点燃引擎的打火石，发动了React核心...

人们经常在他们不需要 Redux 的时候选择它。“如果我们的应用没有使用 Redux 怎么扩展？”，紧接着，开发人员对间接的Redux引入他们的代码感到不满。“为什么我必须引用三个文件才能得到一个简单的功能？” 为什么呢！

对于网页系统来说，表单提交是一种很常见的与用户交互的方式，比如提交订单的时候，需要输入收件人、手机号、地址等信息，又或者对系统进行设置的时候，需要填写一些个人偏好的信息。 表单提交是一种结构化的操作，可以通过封装一些通用的功能达到简化开发的目的。本文将讨论Form表单组件设计的思路，并结合有赞的ZentFo...

只要是搞前端的对于React这个框架一定不会陌生，React以组件为出发点将一个复杂的页面，划分成若干个不同功能的模块，有些模块还可以抽象出来成为能在项目中复用的组件，甚至还能完全脱离业务成为一套使用不同项目的React组件库；然而React是通过V-DOM这种结构体来编织组件构成不同的页面；接下来就让我们好好看看V-DOM...

React的Ref特性是React声明式编程(Declarative Programming)设计哲学的一个重要补充。之前对它的认识只是停留在非受控组件这种特殊场景，直到最近为了实现项目中的一个特殊功能，才对它有了更深的理解。

当你在 Angular 模板中引用你的数据，例如这样的语句 {{foo.x}} ，Angular 不仅仅只是渲染数据，而且会这个特定的数据创建一个观察者。如此，只要你的应用中发生任何变化，Angular 都会检查这个观察者检视着的数据是否发生了改变。如果发生了改变，就会重新渲染这个数据对应的用户界面。这个过程称作脏检查（Dirty Check...

React从诞生到现在，越来越多的前端开发者喜欢上该框架，其原因有很多，其中一个主要的原因是因为它的组件很灵活，而本博客主要介绍React的三种类型的组件：受控类型，无状态类型，高阶类型。

在上一篇教程中，我们成功搭建了基于Jest和Enzyme的单元测试框架并成功地跑起来第一个单元测试，可以点击这里回顾一下。今天，我们重点讨论如何通过Jest来mock数据。

近几年可谓是 JavaScript 的大爆炸纪元，各种框架类库层出不穷，它们给前端带来一个又一个的新思想。从以前我们用的 jQuery 直接操作 DOM，到 BackboneJS、Dojo 提供监听器的形式，在到 Ember.js、AngularJS 数据绑定的理念，再到现在的 React、Vue 虚拟 DOM 的思想。都是在当前 Web 应用日益复杂的时代，对于如何处理「...

前言 前端的单元测试在很多人看来都是一个可有可无的东西，理由一般有下面几条（以下内容统一称单元测试为单测）： 写单测比较费时，有这个时间不如多做几个需求 测试在验收的时候对页面的功能都会操作一遍，写单测相当于做无用功 后端提供给前端的接口需要保证质量，因此需要做单测，但前端很少需要提供接口给其他人 其...

柯里化，是函数式编程的一个重要概念。对于没接触过的人来说，会被一串串的小括号弄得摸不着头脑。但一旦理解了其中的含义和具体的使用场景，你一定会对它爱不释手。它既能减少代码冗余，也能增加可读性，可谓程序猿居家旅行，装逼撕逼必备之良药。

使用Next.js实现服务端渲染是一件非常简单的事，在这里，你完全可以不用自己去写webpack等配置，Next.js全都帮你做了。本文先从简单地基础概念开始，一步一步带大家认识Next.js。