关于react.js:开发了一款能让你的-React-项目开发效率提升-10-的工具-🚀🚀🚀

背景

随着 React 我的项目越来越大，在本地开发时常常会遇到这样一个场景，想改页面上的一个组件，然而比拟难去定位到这个组件在源码中对应的地位。react1s 就是一个能够反对 Option+Click 一键点击页面元素间接跳转到编辑器对应 React 组件的 Chrome 浏览器插件。

个性

• 无需任何配置，不须要在我的项目中减少一行配置代码
• 反对任何脚手架，Webpack、Vite等等都行
• 响应快，毫秒级，命名为 react1s 就是意味着在 1 秒内实现全副动作

预览图

应用

装置地址：Chrome 利用商店 react1s

github地址：react1s

实现原理

外围原理就是借助 @babel/plugin-transform-react-jsx-source（ps：这个 babel 插件曾经蕴含在了@babel/preset-react 内，所以个别不须要额定配置） ，它的作用就是给 JSX 元素生成一个 source 属性，咱们能够这个属性获取元素对应的本地文件名以及行列数。

例子：

从 React Fiber 源码 中能够看出，咱们能够从 Fiber 节点 debugSource 里的拿到这个 source 属性：

而后，咱们遍历对应元素，来拿到它的 Fiber 节点信息：

for (const key in element) {
    if (key.startsWith("__reactInternalInstance") || key.startsWith("__reactFiber$")) {
        fiberNodeInstance = element[key]
    }
}

咱们能够从 Fiber 节点信息中拿到 fileName、columnNumber、lineNumber：

以 VS Code 为例，咱们只须要拼接以上三个地位信息值，即可实现跳转到编辑器中对应的 React 组件：

const path = `vscode://file/${fileName}:${lineNumber}:${columnNumber}`
window.location.assign(path)

结语

实现原理非常简单，本文次要是给大家介绍一款无需任何配置而且能切实进步 React 我的项目开发效率的工具，大家有什么问题和想法的话能够在 github react1s 提 issue 或者 pr，如果可能帮忙到各位大佬，能够给一个 star。