业务知识点.md

新手引导组件

通过包裹业务组件，获取被包裹子组件的 dom，进而获取到位置信息。然后执行不同的渲染函数，显示不同的引导内容。

使用到的主要 api：

• React.useRef、React.forwardRef：获取子组件的引用
• React.findDOMNode：获取对应子组件的 dom
• getBoundingClientRect：获取 dom 的位置信息

使用方式：

<FirstGuide
  visible={guideVisible}
  overlay={(rect: DOMRect | null) => (
    // 不同的引导内容组件，接收位置信息和相关事件
    <TimingPublish
      rect={rect}
      onClose={() => {
        setGuideVisible(false);
      }}
    />
  )}
>
  <div>业务内容</div>
</FirstGuide>

因为需要获取到子组件的dom，所以被包裹组件若是函数组件，也需要使用React.forwardRef。

项目优化点

• 使用webpack插入优化一段代码，代码里使用caches拦截缓存了不常变化的js和css。只在生成环境使用。
• 图片裁剪
• lodash替换成lodash-es

排查线上问题

• sourceMap
• 监控系统
• 用户提供复现视频
• 定位用户的机型，地理位置，系统版本等