本地优先：合理把控状态共享边界

在 React 应用开发过程中，开发者容易陷入一个认知误区——过度追求状态的全局化。许多新手开发者在项目初期就急于引入 Redux、Zustand 或 Jotai 等状态管理工具，将一些本应属于组件内部的琐碎状态（如简单的 UI 切换、输入框内容等）一股脑地塞进全局状态中。这种做法不仅会使状态存储变得臃肿不堪，增加维护的难度，还可能对应用的性能产生负面影响，最终导致整个开发团队陷入混乱的局面。

实际上，大多数状态都应该保持本地化。在决定一个状态应该放置在何处时，开发者需要问自己一个问题：“其他组件是否真的需要知道这个状态？”如果答案是否定的，那么这个状态就不应该被纳入全局状态管理，而应该通过 React 提供的 useState、useReducer 或 useRef 等钩子，将其保存在与之相关的组件内部。

以下是一些适合采用本地状态管理的场景：

• 表单输入：例如用户填写表单时，各个输入框的值通常只需要在表单组件内部进行管理，不需要全局共享。
• 模式切换：像暗/亮模式的切换，如果只是在某个局部组件或页面内生效，就可以作为本地状态处理。
• 选项卡选择：在某个组件内部的选项卡切换状态，一般也无需全局管理。
• 单页分页：对于单页内的分页逻辑，其状态同样适合保持在本地。
• 临时视图逻辑：一些只在当前视图或组件生命周期内有效的临时状态，也应该采用本地管理方式。

当然，全局状态在某些情况下是必不可少的。以下是一些适合使用全局状态的场景：

• 用户会话数据：如令牌、角色、用户信息等，这些数据需要在整个应用的不同页面和组件之间共享，并且在页面切换后需要保持持久化。
• 购物车：购物车状态需要跨页面和组件进行共享，用户在不同页面添加商品到购物车后，其他页面和组件应该能够实时获取到最新的购物车信息。
• 主题设置：例如暗/亮模式的全局设置，需要在应用的各个部分都能访问和更新。
• 跨模块的搜索过滤器：当搜索过滤器需要在多个模块或组件中使用时，将其作为全局状态管理会更加方便。

在这些情况下，使用 Zustand、Redux Toolkit 或 React Context 等工具会非常有用（关于这些工具的深入探讨将在后续部分展开）。

除了使用 useState 和全局状态管理库之外，还有其他的状态范围管理方式可供选择：

• React Context：适合用于轻量级的共享状态管理，例如主题或语言设置等。
• URL 查询参数：对于一些需要持久化或可分享的状态，如过滤器、排序或分页等，可以通过 URL 查询参数来进行管理。

工具助力：简化开发流程

在开发过程中，拥有一致的架构比单纯记忆规则更容易执行。虽然工具的配置会因个人喜好和项目需求而有所不同，但在项目初期引入以下工具，可以显著减轻后期的开发负担：

• ESLint：通过配置导入顺序、React 钩子规则以及检测未使用变量等功能，帮助开发者规范代码编写。
• TypeScript：能够有效防止层间通信错误，提高代码的健壮性。
• Prettier：统一代码格式，使代码风格保持一致。
• Husky + lint-staged：确保在提交代码之前，代码质量符合要求。

通过合理选择状态管理方式以及引入合适的开发工具，开发者能够更加高效地构建出可维护的 React 应用。