TinyBase在React严格模式下的创建型Hook问题解析

问题背景

TinyBase是一个轻量级的客户端状态管理库，它提供了一系列React Hook来简化状态管理。然而，当开发者在React严格模式(StrictMode)下使用TinyBase的创建型Hook(如useCreateRelationships)时，会遇到状态丢失的问题。

严格模式的双重渲染机制

React严格模式是React提供的一种开发环境下的特殊模式，它会故意双重调用组件的渲染逻辑，包括：

• 组件函数体
• 初始化器(如useState、useMemo等)
• 清理函数(useEffect的返回函数)

这种机制旨在帮助开发者发现潜在的问题，如不纯的渲染逻辑或未正确实现的清理函数。

TinyBase创建型Hook的实现问题

TinyBase的useCreate Hook实现采用了useMemo结合清理函数的模式。这种实现方式在严格模式下会表现出以下行为：

1. 第一次渲染时，useMemo创建并返回新的实例
2. React执行清理阶段，调用destroy方法销毁实例
3. 第二次渲染时，由于依赖项未变，useMemo直接返回已销毁的实例

这种模式导致了在严格模式下，创建的关系(relationships)等状态会意外丢失。

解决方案分析

针对这个问题，社区贡献者提出了使用useState+useEffect的替代实现方案。这种方案的核心思想是：

1. 使用useState管理实例状态
2. 在useEffect中处理实例的创建和销毁
3. 确保每次重新创建时都生成新的实例

这种实现方式更符合React的执行模型，能够正确处理严格模式下的双重渲染场景。

技术深度解析

问题的本质在于React严格模式下对"创建-销毁"生命周期的特殊处理。传统的useMemo方案假设：

• 实例创建后不会被立即销毁
• 只有在组件卸载时才需要清理

然而严格模式打破了这种假设，它会在开发环境下模拟组件快速挂载和卸载的场景。因此，任何依赖于"单次创建"的逻辑都需要重新考虑。

最佳实践建议

对于类似TinyBase这样的状态管理库，在处理资源创建时应该：

1. 避免依赖useMemo进行资源管理
2. 使用useState+useEffect组合确保资源生命周期可控
3. 考虑使用稳定的引用或上下文来共享资源实例
4. 充分测试严格模式下的行为

总结

TinyBase在v5版本中已经修复了这个问题，采用了更符合React严格模式要求的实现方式。这个案例也提醒我们，在开发React库时，必须充分考虑严格模式带来的行为变化，确保组件的生命周期处理足够健壮。对于开发者而言，理解React严格模式的工作原理，能够帮助我们编写出更可靠的组件和Hook。