项目里如何快速定位组件源码
学习目标
- 理解并掌握 项目里如何快速定位组件源码 的核心原理与工程实践
总结
对于业务代码来说，快速定位源码是很重要的。
因为改动可能很简单，但是项目大了定位在哪里改就比较麻烦了。
我们也可以通过搜索文案、className 的方式，但对于用了 styled-component、做了国际化的项目来说，这种方式也不行。
所以更推荐用 click-to-react-component 来快速定位源码。
只要在页面上 option + 单击，或者 option + 右键单击然后选一个组件，就可以直接打开对应组件源码的行列。
我们看了下它的原理，dom 元素有 __reactFiber$ 属性可以拿到对应 fiber 节点，然后 _debugOwner 拿到父节点 fiber。_debugSource 拿到源码文件路径和行列号。
然后通过 vscode://file/xxx 的方式直接 vscode 打开对应文件行列号。
这样就完成了点击页面元素，打开对应源码的功能。
这里的 _debugSource 是 babel 插件做的，在 @babel/preset-env 里，每个项目会都自动引入这个插件。
然后加上用 dataset.xx 定义属性和对应的 className，用 @floating-ui 实现 popover。
这就是 click-to-react-component 的实现原理了。
这个小组件还是很有用的，感觉是每个 react 项目必备，可以在项目里引入下试试。