zustand

网站 https://zustand-demo.pmnd.rs/
文档 https://docs.pmnd.rs/zustand/getting-started/introduction

直接将 state / reducers / effects 平铺开来

• function 即 effects / reducers
• 其它都是 state
• subscribe 接口，在组件外监听状态变化，以实现状态依赖

https://frontend.devrank.cn/traffic-information/7230844186633766970
create 方法创建 store中的数据结构，默认immutable
组件中使用 useStore()方法调用，自带 selector和 shallow比较，优化重复渲染

export const useStore = create((set, get)=> ({}));

第三方库集成

• store 的切片化：slices-pattern；
• 集成三方库（例如 y-js）：zustand-yjs

zustand 相关概念

• store 数据源
  • create 创建
  • shallow 浅比较
• state 状态
• action 动作
• reducers 数据操作
• effects 副作用
• selector 选择器
• slice 切片
• middleware 中间件

shallow

https://docs.pmnd.rs/zustand/recipes/recipes#selecting-multiple-state-slices

import { shallow } from 'zustand/shallow';
import useStore, { RFState } from './store';
function App() {
  const {
    nodes,
    edges,
    onNodesChange,
    onEdgesChange
  } = useStore((state: RFState) => state, shallow);
  return (
    <div></div>
  )
}

zustand 和 valtio对比

https://npmtrends.com/valtio-vs-zustand
React项目，如果只用原生的的Reat Context，搭配 useReducer 来状态管理的话，很容易出现大量的多余的重新渲染；
因为当一个 context 的值发生了改变，那么所有通过 useContext 使用这个 context 的组件都会重新渲染；
解决：新的 hooks；useSelectedContext

zustand 和 valtio对比

react数据状态库对比
https://blog.csdn.net/Daivon_Up/article/details/128901775
https://www.modb.pro/db/630606

zustand 中大型应用或者业务组件
「View > Action > State」单向数据流

fetch 请求最佳实践
fetch，原生API
axios，基于 fetch封装
umi-request
swr https://swr.vercel.app/
react-query https://tanstack.com/query/latest
git 可视化练习
https://learngitbranching.js.org/?locale=zh_CN

loading 处理、出错处理、状态保新
加载时机、加载模式、数据缓存、数据流方案结合
防抖节流，学习成本，TypeScript 支持
用 react-query 增加请求缓存，没有变更的部分做 re-render，例如 Tab切换缓存
用 Client Loader 解请求瀑布问题

初始化获取数据

1. 页面初始化获取数据时，如果失败，需要重新发起请求，即失败重试。
2. 为更快显示数据，和 react-router 的 loader 或 umi 的 client loader 结合，在路由匹配时即发起请求，然后在组件中使用服务端状态
3. 出错处理时先基于「数退避策略」重试，重试失败后再通过 toast 反馈给用户
4. 切换页码时先显示老页码的数据，加一个半透明加载状态，新页码数据来了之后才更新
5. 用户数据在多个地方均有使用，需复用一次请求，如有数据转换，也只进行一次数据转换
6. 并发请求，用户执行多次搜索时，避免 race condition，以最后一次请求数据为准，同时取消非最后一次请求以节约服务端资源