DOM事件流

  • 事件捕获阶段
  • 目标阶段
  • 事件冒泡阶段

image.png
事件委托
把多个子元素的同一类型的监听逻辑合并到父元素.上通过一个 监听函数来管理的行为
react事件
当事件在具体的DOM节点.上被触发后最终都会冒泡到document,上document .上所绑定的统一事件处理程序
会将事件分发到具体的组件实例
react合成事件

事件绑定
事件的绑定是在completeWork中完成的
image.png
事件执行

React性能优化

类组件
使用shouldComponentUpdate规避冗余的更新逻辑

  • 只要父组件发生了更新，那么所有的子组件都会被无条件更新
  • 同样的情况也适用于组件自身的更新:当组件自身调用了setState后,那么不管setState前后的状态内容是否真正发生了变化，它都会去走一遍更新流程

PureComponent + Immutable.js
PureComponent将会在shouldComponentUpdate中对组件更新前后的props和state进行浅比较并根据浅比较的结果，决定是否需要继续更新流程。
浅比较：对简单类型比较值是否相等，对复杂类型比较引用地址是否相等
浅比较的缺点
image.png

函数组件
React.memo与useMemo
React.memo控制是否需要重渲染一个组件
useMemo控制的则是是否需要重复执行某一段逻辑
image.png

react设计模式

HOC
接收函数作为输入，或者输出另-个函数的一类函数

render props
render props的载体应该是-个React组件,这- -点是与 高阶组件不同的
render props组件正常工作的前提是它的子组件需要以函数形式存在

Redux

image.png

Store:它是一个单一的数据源，而且是只读的
Action:是“动作”的意思，它是对变化的描述
Reducer :它负责对变化进行分发和处理，最终将新的数据返回给Store

合并更新机制

在一次事件回调中将多个setState()进行合并更新
在fiber架构中是使用的是batchedUpdates来实现的。
image.png

在这里可以看见代码是同步更新的机制。
加入我们在setState中使用setTimeout，这样就会跳出这个batchedUpdates，形成异步更新，

在lean模型中，会判断多个setState的lean是否一致，如果是一致的就会合并为一个更新，即使有setTimeout也会合并成一个更新。
这里判断lean是否一致判断：1. 是否是同样的优先级 2.

性能优化

url解析

是否合法
自动完成（协议补充）

DNS查询

浏览器缓存 一分钟

DNS优化
composite