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

setState 是同步还是异步的

知识点:

setState 为什么是异步执行?

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

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

Read More

React 15 的调和

知识点:

Diff 算法过程

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

什么是调和(Reconciliation)

React 官方文档如是说:

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

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

Read More