真的不要錯過這幾個 React 工具，好嗎？
組件調試工具
寫過 Vue 的讀者一定用過官方提供的一個瀏覽器調試工具 vue-devtool[1]，它支持在瀏覽器中調試組件時，點擊對應的按鈕打開該組件對應你本地代碼的文件。
這真的非常實用，而且是 Vue 官網提供的。
那 React 有沒有類似的工具呢?有!今天給大家推薦兩個類似的調試工具：react-dev-inspector[2]、click-to-component[3]。
react-dev-inspector
接入這個庫以后，在 React 應用頁面按對應的快捷鍵可以開啟兩個功能：
- 獲得類似 Chrome Devtool 元素審查的能力，鼠標移入任意元素即可顯示組件信息(組件名、組件對應的文件路徑、元素寬高)
- 點擊任意元素即可跳轉到本地對應代碼窗口
整體效果如下：
而且這個工具目前已經支持了：Vite2、next.js、create-react-app、umi3。
click-to-component
顧名思義，點擊后跳轉到組件，跟上一個工具功能類似，不過相對而言，我可能更喜歡這個工具。
click-to-component 同樣是按快捷鍵開啟 點擊跳轉 的功能，不過可以由我們來選擇是跳轉當前點擊的這個元素還是跳轉到該元素所在的組件。
相比 react-dev-inspector，這個工具使用起來比較方便，直接在根目錄引入組件即可，不用配置東西，開箱即用。
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import './index.css';
+ import { ClickToComponent } from 'click-to-react-component';
ReactDOM.createRoot(document.getElementById('root')).render(
<React.StrictMode>
+ <ClickToComponent />
<App />
</React.StrictMode>
);
看下完整的使用效果：
動畫工具
看到一個挺不錯 React 動畫庫，是搭配 react-router 使用的，做的是路由跳轉時，各頁面之間的移出和展示動畫，非常炫酷~ 很適合大家的個人項目或官網頁來使用
這個庫的名字叫 react-page-transition[4]，使用方式非常簡單，在 router 組件外層包裹一層即可，并可以自定義設置動畫
import React from 'react';
import { BrowserRouter, Switch, Route, Link } from 'react-router-dom';
+ import { PageTransition } from '@steveeeie/react-page-transition';
import './styles.css';
const Links = () => (
<>
<Link to="/">Home</Link>
<Link to="/about">About</Link>
</>
);
const Home = props => <h1>Home</h1>;
const About = props => <h1>About</h1>;
export default function App() {
return (
<BrowserRouter>
<Links />
<Route
render={({ location }) => {
return (
+ <PageTransition
+ preset="moveToLeftFromRight"
+ transitionKey={location.pathname}
+ >
<Switch location={location}>
<Route exact path="/" component={Home} />
<Route exact path="/about" component={About} />
</Switch>
+ </PageTransition>
);
}}
/>
</BrowserRouter>
);
}
這個庫預設了很多很多很多動畫(preset)供我們使用，至于有多少嘛，給大家瞅一眼：
preset
簡單看幾個炫酷的動畫吧
還不趕緊用起來?
工具類
最近沒看到太多好用的工具，就簡單推薦一個吧，也是日常經常碰到的需求：復制文本到剪切板，我想應該沒人會自己原生手寫吧?畢竟兼容性那么差，大家都會選擇用成熟的庫，一般我們用的都是 copy-to-clipboard[5]，它是命令式編程的使用方式，然后在 React 里大家可能更習慣了聲明式編程，那就可以用 react-copy-to-clipboard[6]，它也是基于 copy-to-clipboard 封裝的。
兩者使用區別如下：
// copy-to-clipboard
copy('Text', {
debug: true,
message: 'Press #{key} to copy',
});
// react-copy-to-clipboard
<CopyToClipboard
onCopy={this.onCopy}
text={this.state.value}>
<button onClick={this.onClick}>復制</button>
</CopyToClipboard>
最后
好了，今天的分享到此結束，希望能幫助到大家。
