Redux 是一个用于 JavaScript 应用程序的状态管理库，它帮助我们有效地管理应用程序的状态，并使组件之间的数据传递更加简单和可控。Redux 使用单一的数据存储（store）来保存整个应用程序的状态，并通过 Reducers 和 Actions 来处理状态的变化。
Redux 的单一数据流是指整个应用程序中的数据状态（state）存储在一个单一的 JavaScript 对象中，通常称为"Store"。这个 Store 是唯一的，并且整个应用程序共享它。所有的数据改变都通过派发（dispatch）"Action"来完成，Action 是一个包含描述改变的信息的简单对象。然后，这些 Action 会被传递给 Reducer 函数，Reducer 会根据 Action 的类型来更新 Store 中的数据状态。组件可以订阅（subscribe）Store 的状态变化，以便在状态改变时重新渲染自己。
React Query 是一个基于 React 的轻量级数据获取和状态管理库，其主要关注点在于客户端如何更好地管理服务器端状态。与传统的状态管理库（如 Redux 和 MobX）相比，它专注于处理服务器状态，简化了与后端数据交互的逻辑。
React Query 通过提供 useQuery、useMutation 等 hooks，使得开发者能够轻松地获取、更新、删除服务器端数据。此外，它还内置了数据缓存、自动更新、重试等功能，进一步优化了客户端与服务器端状态同步的体验。
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 容器中.
引入官方提供的图片:
