[React] 关于 Context 和 Zustand 的一些思考

[PeterChen1997]

• Context
  • 优点
    • 官方内置
    • 可以嵌套使用
  • 缺点
    • 需要自己封装
    • 如果 state 在组件顶层，会导致所有组件 rerender
    • 会导致无效 rerender，如果 context 太大的话；可以考虑拆分 context 来避免此问题
    • 没法记录值变更
    • 可能会导致无限循环，如果 context value 用了 useMemo，返回了新的对象
    • 不支持异步，不支持中间件
• Zustand
  • 优点
    • 只渲染特定组件
    • 异步操作比较多
  • 缺点
    • 需要引入库
    • 需要编写对应 mutate 函数
• 考虑技术选型的点
  • 未来的维护成本
  • 社区支持情况
  • 灵活性
  • 本身是否好用
  • 项目规模
  • 性能需求
  • 团队技术栈
• 取舍
  • 如果状态不需要改变，或者基本上不变，可以用 context，如 okta 和 sentry，非常方便
  • 如果经常会变更，用 zustand 更加合理