真的不要錯過這幾個 React 工具好嗎？

大家好，我是零一，今天是 React 實用小工具專場，主要為大家分享一些看到的比較有意思、提升效率的工具，大家可以按需了解使用

組件調(diào)試工具
寫過 Vue 的讀者一定用過官方提供的一個瀏覽器調(diào)試工具 vue-devtool[1]，它支持在瀏覽器中調(diào)試組件時，點擊對應(yīng)的按鈕打開該組件對應(yīng)你本地代碼的文件


這真的非常實用，而且是 Vue 官網(wǎng)提供的

那 React 有沒有類似的工具呢？有！今天給大家推薦兩個類似的調(diào)試工具：react-dev-inspector[2]、click-to-component[3]

react-dev-inspector
接入這個庫以后，在 React 應(yīng)用頁面按對應(yīng)的快捷鍵可以開啟兩個功能：

獲得類似 Chrome Devtool 元素審查的能力，鼠標移入任意元素即可顯示組件信息（組件名、組件對應(yīng)的文件路徑、元素寬高）
點擊任意元素即可跳轉(zhuǎn)到本地對應(yīng)代碼窗口
整體效果如下：


而且這個工具目前已經(jīng)支持了：Vite2、next.js、create-react-app、umi3

click-to-component
顧名思義，點擊后跳轉(zhuǎn)到組件，跟上一個工具功能類似，不過相對而言，我可能更喜歡這個工具

click-to-component 同樣是按快捷鍵開啟 點擊跳轉(zhuǎn) 的功能，不過可以由我們來選擇是跳轉(zhuǎn)當前點擊的這個元素還是跳轉(zhuǎn)到該元素所在的組件


相比 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 使用的，做的是路由跳轉(zhuǎn)時，各頁面之間的移出和展示動畫，非常炫酷~ 很適合大家的個人項目或官網(wǎng)頁來使用

這個庫的名字叫 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>
  );
}
這個庫預設(shè)了很多很多很多動畫（preset）供我們使用，至于有多少嘛，給大家瞅一眼：


preset
簡單看幾個炫酷的動畫吧



還不趕緊用起來？

工具類
最近沒看到太多好用的工具，就簡單推薦一個吧，也是日常經(jīng)常碰到的需求：復制文本到剪切板，我想應(yīng)該沒人會自己原生手寫吧？畢竟兼容性那么差，大家都會選擇用成熟的庫，一般我們用的都是 copy-to-clipboard[5]，它是命令式編程的使用方式，然后在 React 里大家可能更習慣了聲明式編程，那就可以用 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}>復制</button>
</CopyToClipboard>
最后
好了，今天的分享到此結(jié)束，希望能幫助到大家~


作者：零一


歡迎關(guān)注微信公眾號 ：前端印象