升级 Babel 配置过程除了遇到 replaceAll-is-not-a-function 问题，还遇到关于 Babel sourceType 配置的问题。

Read More

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

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

Read More

在理解setState 是同步还是异步的 时，梳理下 setState 的源码逻辑，如下：

Read More

JavaScript 事件模型

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

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

Read More

@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 更小。

• Install
• How Does it Work?
• Browserslist Integration
• Options

Read More

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

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

Read More

开发一个项目的时候，发现 @babel/preset-env 的配置如下：

1
2
3
4
5
6
7
8
9

[
  '@babel/preset-env',
  {
    useBuiltIns: false,
    targets: {
      chrome: 43
    }
  },
],

使用这种配置，没有利用 @babel/preset-env 根据 targets 自动引入 polyfill 的能力，而是开发者手动引入。

Read More

知识点：

setState 为什么是异步执行？

• 在生命周期和合成事件中，React 为了性能优化开启了批量更新，此时 setState 只会被放到更新队列，不会马上执行，而是稍后一起批量更新，所以表现为异步的。
• 在 setTimeout/setInterval/addEventListener/Promsie 中，因为脱离了 React 的掌控，所以表现为同步。

在我们使用 class 组件时，基本都会使用到 setState，因为唯有使用 setState 更新数据，才能实现数据驱动视图的效果。

Read More

知识点：

Diff 算法过程

• 分层对比
• 类型一致才对比
• 使用 key 尽可能复用节点

什么是调和（Reconciliation）

React 官方文档如是说：

Virtual DOM 是一种编程概念。在这个概念里，UI 以一种理想化的，或者说“虚拟的”表现形式被保存于内存中，并通过如 ReactDOM 等类库使之与“真实的” DOM 同步。这一过程叫作协调（调和）。

Diff 则是调和过程最重要部分。

Read More

虚拟 DOM 是使用 JS 对象来描述真实 DOM 结构。在数据发生改变时，虚拟 DOM 也发生改变，通过对比新旧虚拟 DOM 结构(diff)，找出二者差异，对真实 DOM 结构做更新(patch)。

Read More