React 一些性能问题的讨论

今天又和 @Innei 讨论了一些有关状态管理和性能优化的问题，他安利了他写的 useModalStack Hooks，传入一个 Props 实现一个弹窗组件的创建和统一管理。

• 他给我看了他做的项目，使用状态管理优化的前后

  • 主要是通过开发工具的性能录制，观察脚本执行耗时，以及 React 重新渲染的频率
  • 很明显，优化后减少了大量不必要的 Diff 过程耗时
  • 他说看他写的 Jotai 几篇文章就能全部拿下了

• 我现在已经在用 Jotai 了，但遇到一个因此产生的新问题

  • 弹窗的 Visible 使用状态管理后，切换路由会出现交互 Bug

    • 准确来说就是当一个弹窗为打开状态时，切换两次路由，回来依旧是打开的状态

  • 如果存在多项数据依赖，不可能每一个 Atom 的状态分别重置吧，怎么解决

    • 我猜是使用 Jotai 的 Provider 管理，但如果这个弹窗存在于两个页面呢
    • 如果存在于两个页面，路由切换的时候它们都会显示成打开的效果

• 他说使用他写的 useModelStack Hooks 可以解决这个问题，改成命令式，而不是声明式

  • 他给我看了自己给 xLog 项目提交的 PR 记录 举例
  • 我起初以为 Props 或其他状态更新不会导致弹窗的内容更新
  • 主要是想着会不会出现类似 useEffects 的依赖闭包陷阱问题，他说我的担心是多余的
  • 这个 Hooks 的设计比较巧妙，由于每一次的状态变化都会造成 Hooks 重复执行，因此弹窗的内容是正常同步最新的
  • 仔细看了一遍实现，大概就是将组件作为参数复制挂载到另外一个 Provider 指定的位置存放
  • Antd 有一个类似的 API，但它的实现需要传入 key 来实现更新
  • 他这个 Hooks 就不需要，一个 Hooks 就是注册了一个弹窗实例给 Provider，所以非常巧妙
  • 这样组件销毁也能通过 Hooks 控制 Visible 状态，不会存在状态管理的这个问题

• 他问我是不是 4 年经验了，他才 1 年（不算实习时间）

  • 明显没有，而且我就是业务狗而已，代码设计还是没他厉害
  • 他问我公司招不招兼职，拉他进来优化代码
  • 我说得看老板愿不愿意了

• 我吐槽想要把公司项目的状态迁移到 Store 还挺困难，还需要拆离一部分业务逻辑

  • 公司项目需要考虑到产品设计问题，很难准确猜测正确执行的预期效果
  • 而如果是自己做的项目，自己就能搞清楚预期效果，不存在这个问题，大胆重构！

说些题外话，晚上收到了两条重磅评论，有关我之前写的 恋爱文章 的，比较正面向上，现实情况的确是这样比较多。