React 事件系统

一、DOM 事件流 在浏览器中,我们通过事件监听来实现 JS 和 HTML 之间的交互。一个页面往往会被绑定许许多多的事件,而页面接收事件的顺序,就是事件流。它类似于蹦床,从高处下落,触达蹦床后再弹起,整个过程呈一个V字形。若按W3C标准,一个事件的传播过程要经过三个阶段 1、DOM ...

从一道面试题再看setState源码

首先,我们先上一道变体繁多的面试题,这里不贴代码,截图效果会好一些,感兴趣的点击这里查看DEMO代码。 一、变体繁多的面试 问题是:从左到右依次点击按钮,控制台会输出什么?建议在脑海里先跑一遍,接着看看和下图的结果是否一致? 嗯哼,结果如何呢?是让你大跌眼镜还是符合预期?若是前者,没关系,跟着我一起探个究竟,若是后者,先恭喜你, ...

栈协调 与 Fiber协调 有啥区别?

Virtual DOM 是一种编程概念。在这个概念里, UI 以一种理想化的,或者说“虚拟的”表现形式被保存于内存中,并通过如 ReactDOM 等类库使之与“真实的” DOM 同步。这一过程叫做协调。 —— React 官方 换句话说:协调指的是虚拟DOM映射到真实DOM的过程, ...

前端路由解决方案

一、前端路由解决什么问题? 每个技术点的出现,都是为了解决当前的某一些问题,那么,前端路由的出现,又是解决了什么问题呢? 1、问题背景 从历史的发展总能找到些蛛丝马迹,让我们在当前的阶段往前推一下,拎出那个时代的背景以及它的问题 不难看出,前端路由的出现,是要帮助我们在仅有一个页面的情况下,“记住”用户当前走到了哪一步。因此,它需要为SPA(单页面应用) ...

Redux 中间件 到底怎么工作的呢?

中间件其实不仅仅是Redux专利,在Node框架中也有应用,比如koa,这里我们简单的默认为Redux 中间件,在进入正题前,先了解一下面向切面编程与中间件的关系 一、中间件与面向切面编程(AOP) 面向切面编程(AOP)的存在,解决了我们熟悉的面向对象(OOP)的局限性,可以将其看作是OOP的补充。比如当我们要为某几个类新增一段共同的逻辑,在OOP模式下,即可通过修改它们共同的父类来实现, ...