本周学习关键字

  • 组件
    • Message全局提示组件
    • Popover气泡组件
    • onBoarding引导组件
    • Upload拖拽上传组件
  • 拖拽高级组件
    • dnd
  • 状态库
    • Zustand
    • Jotai
  • 路由
    • ReactTouter
    • keepalive
  • 基础知识

    • imuutable

    • immer

      • 不可变数据

    • history api ：

      • length：history 的条数
      • forward：前进一个
      • back：后退一个
      • go：前进或者后退 n 个
      • pushState：添加一个 history
      • replaceState：替换当前 history
      • scrollRestoration：保存 scroll 位置，取值为 auto 或者 manual，manual 的话就要自己设置 scroll 位置了

    • popstate 事件可以监听到 history.go、history.back、history.forward 的导航，拿到最新的 location

      • （go、back、forward）可以触发 popstate，而修改 history （push、replace）不能触发。
  • 库
    • click-to-react-component：定位组件

ReactContext性能缺点和解决方案

context 在跨层传递数据方面很好用，在组件库里用的很多，但是它也有一些性能方面的缺点。

context 中如果是一个对象，不管任意属性变了，都会导致依赖其它属性的组件跟着重新渲染。

解决这个问题有几种方案：

  • 拆分 context，每种数据放在一个 context 里
  • 用 zustand 等状态管理库，因为它们不是用 context 实现的，自然没有这种问题
  • 用 memo 包裹子组件，它会对比新旧 props，没变就不会重新渲染