自定义usePreviousValue钩子异常：Render中访问Ref current属性的问题与解决

• 开发过程中出于兴趣自定义了usePreviousValue钩子，已知已有react rooks等现成实现方案
• 钩子逻辑很简单：通过两个ref存储值，让previous始终滞后current一步
• 处理原始类型值时表现正常，但引入引用类型值后出现异常：第二次点击增加值按钮时，previous与current的ref值完全相同
• 由此产生疑问：React在未使用Effects的情况下，是如何处理Render调用中的Ref访问的

问题排查与解决更新 #

• 经排查发现，原方案违反了React核心规则：相同输入的组件必须输出相同内容，而在Render阶段读写ref会直接打破这一规则，React官方文档的「Pitfall」章节对此有详细说明
• 改用state存储历史值后问题完美解决，该方案符合官方文档中「调整prop变化时的状态」相关建议
• 原本担心使用state会导致短暂的陈旧值，但实际验证发现，条件式调用setState会丢弃前一次调用生成的JSX，UI始终能保持正确更新
• 感谢@DustInComp的指引

内容的提问来源于stack exchange，提问作者Tosheen