什么是 Redux——1

什么是 Flux

Flux 是 Facebook 用来构建客户端渲染 web 应用的应用框架。Flux 最重要的概念就是单向数据流,Flux 使用单向数据流来补充 React 的可组合式组件。相比一个正式的框架,它更像一种范式和思想,Redux 则是这种范式和思想的具体实现,当然 Redux 不严格遵循 Flux 的设定。

Flux 具有严格的单向数据流,Store 里数据的变化,只能是由 Dispatcher 派发的 Action 触发的。这保证了应用的状态是可预测的,避免了应用混乱的情况,让整个流程变得清晰简单。

当然,严格的单向数据流一方面增加开发者的学习成本,另一方面也增加了代码量,所以往往复杂的项目才需要使用 Flux 架构。

Read More

React 合成事件源码阅读

React 合成事件是基于事件委托机制,构建的自定义事件体系。将需要监听的事件类型都收集起来放在 document 元素上,待事件触发通过 event.target 将事件分发给相关元素。

以下是分发时收集相关元素代码,包括两次遍历和获取父元素:

Read More

React 合成事件机制

JavaScript 事件模型

在 JavaScript DOM 事件模型中,事件的传播分为三个阶段:
1.事件捕获阶段
2.目标阶段
3.事件冒泡阶段

因而,对于大部分事件类型,当子元素发生事件时,只要父元素通过监听相同的事件类型,也能知道子元素事件的发生。

Read More

babel/preset-env 文档

@babel/preset-env is a smart preset that allows you to use the latest JavaScript without needing to micromanage which syntax transforms (and optionally, browser polyfills) are needed by your target environment(s). This both makes your life easier and JavaScript bundles smaller!

@babel/preset-env 是一个智能的预设,让你在使用最新的 JavaScript 的同时,无需关心那个语法转换或者浏览器 polyfill 是被目标浏览器所需要。这会让你的生活更美好,同时让 JavaScript bundles 更小。

Read More

什么是微前端

微前端的理念源自微服务,使用一个主应用作为主体框架和微应用加载器,根据不用的路由加载不同的微应用。微应用之间做到技术隔离,在展示上却是统一的。

微前端主要用来解决单体应用在相对长的时间跨度下,从一个普通应用变成一个巨石应用(Frontend Monolith)后,随着而来的应用不可维护问题。

Read More