React 状态管理：何时使用何种工具

你开始了一个 React 项目。起初感觉很清爽。接着你遇到了 prop drilling。为了让数据到达一个按钮，你需要穿透五层组件进行传递。

你开始纠结该用哪个工具。Context？Redux？Zustand？过多的选择让人困惑。

useState 是你的口袋。 用于处理琐碎的小事。

  • 最适合本地数据。
  • 示例：下拉菜单。
  • 原则：保持局部性。

Context 是你的家庭冰箱。 每个人都可以共享。

  • 最适合全局数据。
  • 最适合变化频率较低的数据。
  • 示例：用户登录。
  • 原则：用于全局项。

Zustand 是一个储物间。 它能处理大量数据。

  • 最适合复杂数据。
  • 最适合变化频率较高的数据。
  • 示例：购物车。
  • 原则：用于大型应用。

从 useState 开始。 当 prop drilling 让你感到痛苦时，转向 Context。 对于复杂数据或出现卡顿时，使用 Zustand。

保持简单。

Source: https://dev.to/zeeshan_farooq_4ead3782d8/react-state-management-when-to-use-what-a-simple-guide-1cf1