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

React Hooks 设计思想

知识点:

为什么推出 Hooks

  • 告别复杂的 class 组件
  • 拆分逻辑和复用逻辑

hooks 使用原则

  • 只能在函数组件或者自定义 Hooks 中调用 Hooks
  • 不能在条件语句或者循环语句使用 Hooks

为什么不能在条件语句或者循环语句使用 Hooks?

const [count, setCount] = useState() 为例,当 React 内部存储 count 这个值时并没有指定一个名字存储。当下一次 render 时,React 想要重新取出 count 的值时,是从链表结构里按照执行顺序取出来。因而,为了保证执行 hooks 的准确性,React 使用链表的数据结构并顺序取值,如果在条件语句或者循环语句使用 Hooks,取值就会出错。

要解决这种办法,可以传入一个 key 作为 useState 的第二个参数,但是实现起来没那么优雅。

1
const [count, setCount] = useState(initState, key)

什么是 Hooks

Hooks 是 React 16.8 版本出现的特性,它是诸如 useState、useEffect 等一系列钩子函数。Hooks 的出现开发者在不需要写 class 组件时,也能具有 state 和其他 React 特性,函数组件从 stateless 变成 stateful。

Read More

React 生命周期

React 生命周期

知识点: render 是灵魂,生成虚拟 DOM,其他生命周期是躯干,灵魂必须有,躯干不一定。

React 是一个构建用户界面的 JavaScript 库,其核心的 Virtual DOM 是由生命周期的 render 方法生成的。初始化时,render 方法生成 Virtual DOM 交给 ReactDOM.render 方法渲染成真实 DOM;更新时, render 方法生成的新 Virtual DOM 与旧 Virtual DOM 进行比较,针对差异部分 ReactDOM.render 对真实 DOM 进行修改。

React 生命周期中的 render 在其中扮演着 Virtual DOM 生成的关键角色,其他生命周期则像是 render 方法的辅助,做数据的初始化或者修改,辅助 render 方法完成 Virtual DOM 的生成。

Read More

React 组件之间数据传递

知识点:

  • 单向数据流即数据只能从父组件向自组件流动
  • 四种 React 组件进行数据传递的方法:props/context/EventEmitter/Redux

React 是一个构建用户界面的 JavaScript 库,其思想是用数据驱动视图。

可以用如下代码来表示:

1
UI = render(data)

data 就是 React 界面的核心。在渲染用户界面时,data 不是静止不动的,它可能需要在父子组件之间共享、可能需要在兄弟组件共享以及其他层次关系的组件之间共享。下面我们就讲 4 种组件间数据传递的方式。

Read More