前言

GUI 渲染线程和 JS 引擎线程是相互排斥的，比如开发者用 js 写了一个遍历大量数据的循环，在执行 js 时候，会阻塞浏览器的渲染绘制，给用户直观的感受就是卡顿

如果有一个组件 A ，如果想要它更新，那么场景有如下情况

本质上都是 state 的变化

• 组件本身改变 state 。函数 useState | useReducer ，类组件 setState | forceUpdate

• props 改变，由组件更新带来的子组件的更新

  • props 改变来源于父级组件的 state 变化

• context更新，并且该组件消费了当前 context

  • context 变化来源于 Provider 中 value 变化，而 value 一般情况下也是 state 或者是 state 衍生产物

React 为什么有自己的事件系统？

创建一个兼容全浏览器的事件系统，以此抹平不同浏览器的差异。

v17 之前 React 事件都是绑定在 document 上，v17 之后 React 把事件绑定在应用对应的容器 container 上，将事件绑定在同一容器统一管理，防止很多事件直接绑定在原生的 DOM 元素上。造成一些不可控的情况。

由于不是绑定在真实的 DOM 上，所以 React 需要模拟一套事件流：事件捕获-> 事件源 -> 事件冒泡，也包括重写一下事件源对象 event 。