默认是冒泡阶段执行

export function Index {
	const handleClick=() => console.log('冒泡阶段执行')
  const handleClickCapture = () => console.log('捕获阶段执行')
  return (
  	<div>
    	<button onClick={handleClick} onClickCapture={handleClickCapture}>点击</button>
    </div>
  )
}

阻止冒泡

export function Index {
	const handleChildClick=(e) => {
    e.stopPropagation() // 阻止事件冒泡 handleClickCapture 不会执行
  }
  const handleClickCapture = () => console.log('事件的冒泡')
  return (
  	<div onclick={onFatherClick}>
    	<button onClick={handleChildClick}>点击</button>
    </div>
  )
}

阻止默认行为

• 在原生事件中 可以通过event.preventDefault() 和 return false 阻止事件的默认行为

• 在react事件中 可以通过event.preventDefault() 阻止事件的默认行为 ,此 preventDefault不是原生事件中的preventDefault

事件合成

react 事件系统可分为三个部分

1. 事件合成系统，初始化会注册不同的事件插件
2. 在一次渲染过程中, 对事件标签中事件的收集, 项container容器注册事件
3. 一次用户交互, 事件触发, 到事件执行一系列过程

调度与时间片

• 异步调度原理
• react调度是否使用setTimeout
• react中的时间分片
• react 如何模拟 requestIdleCallback
• 简述调度流程
• 浏览器不支持 requestIdleCallback 情况下 react 是如何确定浏览器是否有空闲时间的

异步调度

区别于vue 中的依赖搜集可以直接详情当前的影响范围 react 无法直接确定此次更新波及的影响范围, 难逃从根节点开始diff查找不同，更新不同 只能将diff任务更新交由浏览器决定执行时间(浏览器空闲时间)

时间分片

• setTimeout 4ms时间浪费
• messageChannel 实现宏任务