react 数据请求优化（hooks、SWR库）

[Genluo]

swr

[Genluo]

🔥🔥🔥合并setState

使用unstable_batchedUpdates 伪代码如下：

function unstable_batchedUpdates(fn) {
    this.canMerge = true

    fn()

    this.canMerge = false
    const finalState = ...  //通过this.updateQueue合并出finalState
    this.setState(finaleState)
}

[Genluo]

🔥🔥🔥stale-while-revalidate 缓存策略

HTTP 的缓存策略值之一，其核心就是允许客户端先使用缓存中不新鲜的数据，然后在后台异步重新验证更新缓存，等下次使用的时候数据就是新鲜的了，旨在通过缓存提高用户体验。

[Genluo]

❗️❗️❗️请求优化中的注意事项

• 单个api发起多次请求的请求顺序问题
• 组件声明周期和请求关联
• document.visibilityState可以判断文档是否在显示区域
• 在 React 16 实现了新的调度策略(Fiber)，新的调度策略提到的异步、可中断，其实就是基于浏览器的 requestIdleCallback 和 requestAnimationFrame 两个API，在 useSWR 中也是使用了 requestIdleCallback 这个 API，其作用就是在前浏览器处于空闲状态的时候执相对较低的任务，也即传给 requestIdleCallback 的回调函数，可以看到在 useSWR 中验证函数作为 requestIdleCallback 的回调函数，如果有缓存则延迟重新验证，优先使用缓存数据进行渲染。