ComponentDebuggingTool写过Vue的读者一定用过官方的浏览器调试工具vue-devtool[1]，它支持在浏览器中调试某个组件时，点击相应的按钮打开你本地代码文件对应的组件.真的很好用，而且是Vue官网提供的。React有类似的工具吗？是的！今天推荐两款类似的调试工具：react-dev-inspector[2]和click-to-component[3]。react-dev-inspector连接本库后，在React应用页面按对应的快捷键可以开启两个功能：获取类似ChromeDevtool的元素检查能力，鼠标移至任意元素显示组件信息（component名称、组件对应文件路径、元素宽高）点击任意元素跳转到本地对应的代码窗口。整体效果如下：本工具目前支持：Vite2、next.js、create-react-app、umi3。click-to-component，顾名思义，点击后跳转至组件，和之前那个工具的功能差不多，不过相对来说，我可能更喜欢这个工具。click-to-component也是按快捷键开启点击跳转功能的功能，但是我们可以选择是跳转到当前点击的元素还是跳转到元素所在的组件。与react-dev-inspector相比，这个工具使用起来更加方便，直接在根目录导入组件即可，无需配置，开箱即用。从'react'导入React；从'react-dom/client'导入ReactDOM；从'./App'导入App；导入'./index.css'；+从'click-to-react-component导入{ClickToComponent}';ReactDOM.createRoot(document.getElementById('root')).render(+);看看完整的使用效果：动画工具我找到了一个非常不错的React动画库，配合react-router使用。用于路由跳转时页面间移出显示动画。非常酷~非常适合你的个人项目或者官方网页使用这个库的名字是react-page-transition[4]。使用起来非常简单。只需要在路由组件外面包裹一层，就可以自定义动画了/react-page-transition';import'./styles.css';constLinks=()=>(<>主页关于);constHome=props=>

首页

;constAbout=props=>

关于

;导出默认函数App(){return({return(++);}}/>);}这个库预设了很多很多很多动画（presets）供我们使用。至于有多少，一起来看看吧：预设简单看几部炫酷的动画，还不快点用起来吗？最近没看到工具好用的工具太多了，就简单推荐一个吧，也是日常生活中经常遇到的需求：复制文本到剪贴板，估计没人会自己原生写吧？毕竟兼容性这么差，大家都会选择使用Maturelibraries，一般我们使用copy-to-clipboard[5]，这是命令式编程的方式，而在React中，大家可能更习惯声明式编程，那么就可以使用react-copy-to-clipboard[6]，也是基于copy-to-clipboard封装的两者的区别如下：//copy-to-clipboardcopy('Text',{debug:true,message:'Press#{key}tocopy',});//react-copy-to-clipboardCopy最后，今天的分享到此结束，希望它可以帮助每个人。