真的不要錯(cuò)過這幾個(gè) React 工具，好嗎？
組件調(diào)試工具
寫過 Vue 的讀者一定用過官方提供的一個(gè)瀏覽器調(diào)試工具 vue-devtool[1]，它支持在瀏覽器中調(diào)試組件時(shí)，點(diǎn)擊對應(yīng)的按鈕打開該組件對應(yīng)你本地代碼的文件。
這真的非常實(shí)用，而且是 Vue 官網(wǎng)提供的。
那 React 有沒有類似的工具呢?有!今天給大家推薦兩個(gè)類似的調(diào)試工具：react-dev-inspector[2]、click-to-component[3]。
react-dev-inspector
接入這個(gè)庫以后，在 React 應(yīng)用頁面按對應(yīng)的快捷鍵可以開啟兩個(gè)功能：
- 獲得類似 Chrome Devtool 元素審查的能力，鼠標(biāo)移入任意元素即可顯示組件信息(組件名、組件對應(yīng)的文件路徑、元素寬高)
- 點(diǎn)擊任意元素即可跳轉(zhuǎn)到本地對應(yīng)代碼窗口
整體效果如下：
而且這個(gè)工具目前已經(jīng)支持了：Vite2、next.js、create-react-app、umi3。
click-to-component
顧名思義，點(diǎn)擊后跳轉(zhuǎn)到組件，跟上一個(gè)工具功能類似，不過相對而言，我可能更喜歡這個(gè)工具。
click-to-component 同樣是按快捷鍵開啟 點(diǎn)擊跳轉(zhuǎn) 的功能，不過可以由我們來選擇是跳轉(zhuǎn)當(dāng)前點(diǎn)擊的這個(gè)元素還是跳轉(zhuǎn)到該元素所在的組件。
相比 react-dev-inspector，這個(gè)工具使用起來比較方便，直接在根目錄引入組件即可，不用配置東西，開箱即用。
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>
);
看下完整的使用效果：
動畫工具
看到一個(gè)挺不錯(cuò) React 動畫庫，是搭配 react-router 使用的，做的是路由跳轉(zhuǎn)時(shí)，各頁面之間的移出和展示動畫，非常炫酷~ 很適合大家的個(gè)人項(xiàng)目或官網(wǎng)頁來使用
這個(gè)庫的名字叫 react-page-transition[4]，使用方式非常簡單，在 router 組件外層包裹一層即可，并可以自定義設(shè)置動畫
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>
);
}
這個(gè)庫預(yù)設(shè)了很多很多很多動畫(preset)供我們使用，至于有多少嘛，給大家瞅一眼：
preset
簡單看幾個(gè)炫酷的動畫吧
還不趕緊用起來?
工具類
最近沒看到太多好用的工具，就簡單推薦一個(gè)吧，也是日常經(jīng)常碰到的需求：復(fù)制文本到剪切板，我想應(yīng)該沒人會自己原生手寫吧?畢竟兼容性那么差，大家都會選擇用成熟的庫，一般我們用的都是 copy-to-clipboard[5]，它是命令式編程的使用方式，然后在 React 里大家可能更習(xí)慣了聲明式編程，那就可以用 react-copy-to-clipboard[6]，它也是基于 copy-to-clipboard 封裝的。
兩者使用區(qū)別如下：
// 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}>復(fù)制</button>
</CopyToClipboard>
最后
好了，今天的分享到此結(jié)束，希望能幫助到大家。
