Redux 是一个用于 JavaScript 应用程序的状态管理库，它帮助我们有效地管理应用程序的状态，并使组件之间的数据传递更加简单和可控。Redux 使用单一的数据存储（store）来保存整个应用程序的状态，并通过 Reducers 和 Actions 来处理状态的变化。
Redux 的单一数据流是指整个应用程序中的数据状态（state）存储在一个单一的 JavaScript 对象中，通常称为"Store"。这个 Store 是唯一的，并且整个应用程序共享它。所有的数据改变都通过派发（dispatch）"Action"来完成，Action 是一个包含描述改变的信息的简单对象。然后，这些 Action 会被传递给 Reducer 函数，Reducer 会根据 Action 的类型来更新 Store 中的数据状态。组件可以订阅（subscribe）Store 的状态变化，以便在状态改变时重新渲染自己。
useEffect 第二个参数[]如何影响 fn 的执行？换句话说，它的第二个参数是如何影响 fiber 创建 Passive Effect 的？
useEffect(() => {})，Mount & Update 时，每次 render 时都会创建一个 Passive Effect;useEffect(() => {}, [])，它会在 mount 时，创建 Passive Effect[dep]，它会在 mount 时，dep 依赖项变化时，创建 Passive Effect当前大多数的屏幕刷新率都是 60hz，也就是每秒屏幕刷新 60 次，低于 60hz 人眼就会感知卡顿掉帧等情况，同样我们前端浏览器所说的 FPS（frame per second）是浏览器每秒刷新的次数，理论上 FPS 越高人眼觉得界面越流畅，在两次屏幕硬件刷新之间，浏览器正好进行一次刷新（重绘），网页也会很流畅，当然这种是理想模式， 如果两次硬件刷新之间浏览器重绘多次是没意义的，只会消耗资源，如果浏览器重绘一次的时间是硬件多次刷新的时间，那么人眼将感知卡顿掉帧等， 所以浏览器对一次重绘的渲染工作需要在 16ms（1000ms/60）之内完成，也就是说每一次重绘小于 16ms 才不会卡顿掉帧。
trigger = (isBatchedUpdate: boolean) => {
const runSetState = () => {
this.setState({ count: this.state.count + 1 }, () => console.log(this.state.count));
};
if (isBatchedUpdate) {
runSetState();
} else {
setTimeout(runSetState, 0);
}
};
<button onClick={() => this.trigger(true)}>触发合成事件</button>;
<button onClick={() => this.trigger(false)}>触发 setTimeout 事件</button>;
从v17.0.0开始, React 不会再将事件处理添加到 document 上, 而是将事件处理添加到渲染 React 树的根 DOM 容器中.
引入官方提供的图片:
