日韩无码专区无码一级三级片|91人人爱网站中日韩无码电影|厨房大战丰满熟妇|AV高清无码在线免费观看|另类AV日韩少妇熟女|中文日本大黄一级黄色片|色情在线视频免费|亚洲成人特黄a片|黄片wwwav色图欧美|欧亚乱色一区二区三区

 
 
 
 
  
  
  
  
import React from 'react'  
  
  
  
  
import Button from '@material-ui/core/Button'  
  
  
  
  
const Child = (props) =>   
  
  
  
  
const Child2 = ({ children, ...props }) => (  
  
  
  
  
    
  
  
  
  
    {children}   
  
  
  
  
  

只有這樣做之后，我們的控制臺(tái)才會(huì)彈出令人難以置信的煩人警報(bào)：

但別誤會(huì)，請(qǐng)把它當(dāng)成一件好事。利用那些煩人的消息，我們就可以修復(fù)那些浪費(fèi)的重渲染。

4. Create React App

大家都知道 Create React App 是啟動(dòng)開發(fā) React 項(xiàng)目最快的方法（擁有開箱即用的現(xiàn)代功能）。

還有什么能比 npx create-react-app 更簡(jiǎn)單的呢？

我在 Medium 上的教程（以及 Dev.to）都是用 create-react-app 構(gòu)建 React 接口界面的，就因?yàn)樗挚煊趾?jiǎn)單。

我們當(dāng)中有些人可能不知道如何用 CRA 來(lái)創(chuàng)建一個(gè) TypeScript 項(xiàng)目。我們要做的就是在末尾加上 --typescript：

 
 
 
 
  
  
  
  
npx create-react-app  --typescript 
 
 
 

這會(huì)幫我們省去給 CRA 項(xiàng)目手工添加 TypeScript 的麻煩。

5. React-Lifecycle-Visualizer

React-Lifecycle-Visualizer 是一個(gè) npm 軟件包，用于跟蹤和可視化任意 React 組件的生命周期方法。

與 Why Did You Render 相似，我們可以選擇任何組件來(lái)啟動(dòng)生命周期可視化工具：

 
 
 
 
  
  
  
  
import React from 'react'  
  
  
  
  
import {  
  
  
  
  
  Log,  
  
  
  
  
  VisualizerProvider,  
  
  
  
  
  traceLifecycle,  
  
  
  
  
} from 'react-lifecycle-visualizer'  
  
  
  
  
class TracedComponent extends React.Component {  
  
  
  
  
  state = {  
  
  
  
  
    loaded: false,  
  
  
  
  
  }  
  
  
  
  
  componentDidMount() {  
  
  
  
  
    this.props.onMount()  
  
  
  
  
  }  
  
  
  
  
  render() {  
  
  
  
  
    return 
Traced Component
  
  
  
  
  
  }  
  
  
  
  
}  
  
  
  
  
const EnhancedTracedComponent = traceLifecycle(TracedComponent)  
  
  
  
  
const App = () => (  
  
  
  
  
    
  
  
  
  
      
  
  
  
  
      
  
  
  
  
    
  
  
  
  
) 
 
 
 

運(yùn)行結(jié)果，如下所示：

但是，其中一個(gè)缺點(diǎn)是它目前僅適用于類組件，因此尚不支持 Hook 。

6. Guppy

Guppy 是 React 的一個(gè)友好且免費(fèi)的應(yīng)用程序管理器和任務(wù)運(yùn)行器，可以在桌面上運(yùn)行且支持跨平臺(tái)，大家可以放心使用。

它提供了很多友好的圖形界面，為 React 開發(fā)人員的一些典型任務(wù)項(xiàng)目提供支持。例如創(chuàng)建新項(xiàng)目，執(zhí)行任務(wù)和管理依賴項(xiàng)。并在 2018 年 8 月添加支持 Windows，因此可以放心，它肯定是跨平臺(tái)的。

以下是 Guppy 使用時(shí)的樣子：

7. react-testing-library

我一直很喜歡 react-testing-library，因?yàn)樵诰帉憜卧獪y(cè)試時(shí)感覺(jué)不錯(cuò)。這個(gè)包提供了實(shí)用的 DOM 測(cè)試程序，鼓勵(lì)良好的測(cè)試實(shí)踐。

此解決方案旨在解決測(cè)試實(shí)施細(xì)節(jié)的問(wèn)題，就像用戶可以看到它們一樣，而不是測(cè)試 React 組件的輸入/輸出。

測(cè)試實(shí)施細(xì)節(jié)并不是確保應(yīng)用按預(yù)期運(yùn)行的有效方法。當(dāng)然，我們能夠更清楚的了解如何獲取組件所需的數(shù)據(jù)，使用哪種排序方法等。但是，如果我們必須更改實(shí)現(xiàn)方式以指向另一個(gè)數(shù)據(jù)庫(kù)的話，單元測(cè)試就會(huì)失敗，因?yàn)檫@些是耦合邏輯的實(shí)現(xiàn)細(xì)節(jié)。

這是 react-testing-library 解決的一個(gè)問(wèn)題，因?yàn)槔硐肭闆r下，我們只希望我們的用戶界面能夠正常工作并最終正確顯示。只要這些組件能夠提供預(yù)期的輸出，數(shù)據(jù)如何獲取到這些組件實(shí)際上并不重要。

以下是使用此庫(kù)進(jìn)行測(cè)試的示例代碼：

 
 
 
 
  
  
  
  
// Hoist helper functions (but not vars) to reuse between test cases  
  
  
  
  
const renderComponent = ({ count }) =>  
  
  
  
  
  render(  
  
  
  
  
      
  
  
  
  
        
  
  
  
  
    ,  
  
  
  
  
  )  
  
  
  
  
it('renders initial count', async () => {  
  
  
  
  
  // Render new instance in every test to prevent leaking state  
  
  
  
  
  const { getByText } = renderComponent({ count: 5 })  
  
  
  
  
  await waitForElement(() => getByText(/clicked 5 times/i))  
  
  
  
  
})  
  
  
  
  
it('increments count', async () => {  
  
  
  
  
  // Render new instance in every test to prevent leaking state  
  
  
  
  
  const { getByText } = renderComponent({ count: 5 })  
  
  
  
  
  fireEvent.click(getByText('+1'))  
  
  
  
  
  await waitForElement(() => getByText(/clicked 6 times/i))  
  
  
  
  
}) 
 
 
 

8. React Developer Tools

React Developer Tools 是一個(gè)擴(kuò)展插件，它允許在 Chrome 和 Firefox 開發(fā)人員工具中查看 React 組件層次結(jié)構(gòu)。

這是 React 開發(fā)中最常見的擴(kuò)展插件，并且是 React 開發(fā)人員用來(lái)調(diào)試其應(yīng)用程序的最有用的工具之一。

9. Bit

在使用諸如 material-ui 或 semantic-ui-react 之類的組件庫(kù)時(shí)，Bit 是一個(gè)很好的替代方案。它可以讓我們探索數(shù)千個(gè)開源組件，并使用它們來(lái)構(gòu)建項(xiàng)目。

有很多不同的 React 組件，可供任何人使用，包括選項(xiàng)卡、按鈕、圖表、表格、導(dǎo)航條、下拉菜單、加載旋轉(zhuǎn)器、日期選擇器、面包屑導(dǎo)航（breadcrumbs）、圖標(biāo)、布局等等。

這些是由其他 React 開發(fā)人員上傳的，這些開發(fā)人員就跟你我一樣。

但是，也有一些可用的實(shí)用程序，如格式化日期之間的距離。

10. Storybook

如果大家還不了解 Storybook，并且希望能夠輕松地構(gòu)建 UI 組件，我強(qiáng)烈建議你立即使用它。該工具啟動(dòng)了支持熱重載的實(shí)時(shí)開發(fā)服務(wù)器，讓我們可以在其中獨(dú)立地實(shí)時(shí)開發(fā) React 組件。

另一個(gè)很棒的事情是，我們可以使用現(xiàn)有的開源插件，將我們的開發(fā)經(jīng)驗(yàn)提升到一個(gè)全新的水平。例如，利用 Storybook README 包，我們可以在同一頁(yè)面上創(chuàng)建 README 文檔，同時(shí)開發(fā)供生產(chǎn)使用的 React 組件。這足以作為常規(guī)文檔頁(yè)面了：

11. React Sight

大家有沒(méi)有想過(guò)自己的應(yīng)用程序在流程圖中看起來(lái)是什么樣的？React -sight 可以讓整個(gè)應(yīng)用程序以樹狀圖的形式展示層次結(jié)構(gòu)，清楚查看我們的 React 應(yīng)用程序。它還支持 React Router，Redux 和 React Fibre。

使用此工具，我們可以將鼠標(biāo)懸停在節(jié)點(diǎn)上，這些節(jié)點(diǎn)是指向樹中與它們直接相關(guān)的組件的鏈接。

如果大家在查看結(jié)果時(shí)遇到問(wèn)題，可以在地址欄上輸入 chrome:extensions，找到 React Sight

框并單擊 Allow access to file URLs 開關(guān)，如下所示：

12. React-cosmos

React-cosmos 是用于創(chuàng)建可重復(fù)使用 React 組件的開發(fā)工具。

它會(huì)掃描項(xiàng)目中的組件，并且可以實(shí)現(xiàn)以下功能：

•  用屬性、上下文和狀態(tài)的任意組合下渲染組件
•  模擬每個(gè)外部依賴項(xiàng)（例如 API 響應(yīng)、localStorage 等）
•  與正在運(yùn)行的實(shí)例進(jìn)行交互時(shí)，查看應(yīng)用程序狀態(tài)的實(shí)時(shí)變化

13. CodeSandbox

這是本次推薦中最好的可用工具之一，它可以讓我們手動(dòng)使用 React 的速度比眨眼還快（好吧，也許也沒(méi)那么快）。

這個(gè)稱為 CodeSandbox的工具是一個(gè)在線編輯器，我們從創(chuàng)建原型到 Web 應(yīng)用程序部署 - 都可以在這個(gè)網(wǎng)站實(shí)現(xiàn)！

在早期，Codesandbox 僅支持 React，但現(xiàn)在已經(jīng)擴(kuò)展到 Vue 和 Angular 等庫(kù)。他們還支持常見的靜態(tài)站點(diǎn)生成器（如 gatsby 或 nextjs ）創(chuàng)建項(xiàng)目來(lái)啟動(dòng)下一個(gè) React Web 項(xiàng)目。

關(guān)于 codesandbox，它不僅活躍，還有很多有意思的事情可以討論。

如果大家需要探索一下人們?yōu)榉奖愦蠹移鹨娬跇?gòu)建的一些項(xiàng)目，那么單擊 explore 就可以輕松訪問(wèn)到大量代碼示例，來(lái)幫助大家更新下一個(gè)項(xiàng)目：

大家一旦開始編輯項(xiàng)目，就會(huì)意識(shí)到，實(shí)際上要使用的是個(gè)功能強(qiáng)大的 VSCode 編輯器。

我很想寫一篇完整的文章，介紹我們今天在 codeandbox 上可以使用的所有功能，不過(guò)，現(xiàn)在看起來(lái)工作已經(jīng)完成了。

14. React bits

React bits 是 React 模式、技術(shù)、技巧和竅門的集合，所有這些都以類似在線文檔的格式編寫，大家可以在同一個(gè)選項(xiàng)卡上快速訪問(wèn)不同的設(shè)計(jì)模式和技術(shù)、反模式、樣式、UX 變體以及其他有用的與 React 相關(guān)的材料。

他們有一個(gè) GitHub 存儲(chǔ)庫(kù)，目前有 10437 星。

一些示例包括諸如道具代理，在不同場(chǎng)景下處理各種 UX 的組合之類的概念，甚至還提示了每個(gè)開發(fā)人員應(yīng)該避免的一些陷阱。

這是他們頁(yè)面上的樣子，如大家在左側(cè)的菜單上看到的那樣，有很多信息：）

15. Folderize

Folderize 是一個(gè) VSCode 擴(kuò)展。它可以讓我們將組件文件轉(zhuǎn)換為組件文件夾結(jié)構(gòu)。轉(zhuǎn)換后的 React 組件仍將是一個(gè)組件，只是現(xiàn)在已轉(zhuǎn)換為一個(gè)目錄。

例如，假設(shè)我們正在創(chuàng)建一個(gè) React 組件，它把文件作為屬性以顯示有用的信息，比如它們的元數(shù)據(jù)。元數(shù)據(jù)組件的邏輯占用了很多行，因此我們決定將其拆分為一個(gè)單獨(dú)的文件。但是，當(dāng)我們決定這樣做時(shí)，我們就有了兩個(gè)相互關(guān)聯(lián)的文件。

因此，如果我們的目錄如下所示：

我們可能想把 FileView.js 和 FileMetadata.js 抽象到目錄結(jié)構(gòu)中，像 Apples- 那樣，特別是如果我們希望添加更多與文件相關(guān)的組件，比如 FileScanner.js 。這就是 folderize 可以為我們做的事情，這樣它們就可以具有以下類似結(jié)構(gòu)：

 
 
 
 
  
  
  
  
import React from 'react'  
  
  
  
  
import FileView from './src/components/FileView'  
  
  
  
  
const App = (props) =>   
  
  
  
  
export default App 
 
 
 

16. React Starter Projects

React Starter Projects 是一個(gè)很棒的依賴庫(kù)列表，我們可以在一個(gè)頁(yè)面中查看全部項(xiàng)目。因此，如果我們覺(jué)得能同時(shí)快速查看到大量選項(xiàng)是非常有用的，那么這個(gè)很適合我們。

一旦看到喜歡的入門項(xiàng)目后，我們就可以簡(jiǎn)單克隆存儲(chǔ)庫(kù)，根據(jù)開發(fā)中的應(yīng)用需要進(jìn)行簡(jiǎn)單修改。但是，并非所有的庫(kù)都用來(lái)克隆存儲(chǔ)庫(kù)，因?yàn)槠渲幸恍?kù)需要通過(guò)安裝形式，才能成為項(xiàng)目的依賴項(xiàng)。這樣可以更輕松地獲取更新并保持項(xiàng)目整潔。

以下是該頁(yè)面看起來(lái)的樣子：

17. Highlight Updates

可以說(shuō)，這是每個(gè)開發(fā)者工具包里都應(yīng)該有的重要工具。Highlight Updates 是 React DevTools 的一項(xiàng)擴(kuò)展功能，可以查看頁(yè)面中的哪些組件正在不必要地重渲染。

它們會(huì)用橙色/紅色標(biāo)出嚴(yán)重的重渲染問(wèn)題，幫助我們?cè)陂_發(fā)頁(yè)面時(shí)更容易的發(fā)現(xiàn)一些性能問(wèn)題。

除非我們的目標(biāo)是構(gòu)建平庸的應(yīng)用程序，否則為什么不試試這個(gè)在我們身邊的好東西。

18. React Diff Viewer

React Diff Viewer 是使用 Diff 和 React 制作的簡(jiǎn)單美觀的文本差異查看器。支持多種功能，如：分屏視圖，內(nèi)聯(lián)視圖，單詞差異，行高亮顯示等。

如果我們想將此功能嵌入記事本（如 Boostnote）和自定義至應(yīng)用程序（比如主題顏色、故事演示文檔組合等），那么，它將非常有用。

19. JS.coach

JS.coach 是我經(jīng)常用來(lái)查找 React 相關(guān)材料的網(wǎng)站。我不知道為什么提到這個(gè)網(wǎng)站的人不多，但在這個(gè)頁(yè)面我發(fā)現(xiàn)了幾乎所有我需要的信息，它快捷、方便，并不斷更新，總是能為我所有的項(xiàng)目提供所需的結(jié)果。

最近，他們添加了 React VR 選項(xiàng)卡，這真是太好了！

20. Awesome React

Awesome React 開源庫(kù)是一個(gè)與 React 相關(guān)的并非常棒的列表。

這讓我可能會(huì)忘記其他網(wǎng)站只從這個(gè)鏈接學(xué)習(xí) React 。因?yàn)榭梢栽诖苏业酱罅坑杏玫馁Y源，這些資源肯定會(huì)幫助我們構(gòu)建出色的 React 應(yīng)用程序！

21. Proton Native

Proton Native 為大家提供了一個(gè) React 環(huán)境來(lái)構(gòu)建跨平臺(tái)的本機(jī)桌面應(yīng)用程序。

它是 Electron 的替代產(chǎn)品，只有一些簡(jiǎn)潔的功能，包括：

•  與 React Native 相同的語(yǔ)法
•  適用于現(xiàn)存的 React 庫(kù)，例如 Redux
•  跨平臺(tái)
•  原生組件，不再有 Electron
•  與所有正常的 Node.js 包兼容

有興趣了解更多嗎？請(qǐng)閱讀他們的文檔。

22. Devhints React.js Cheatsheet

一個(gè)不錯(cuò)的 React 速查表，盡管它缺少 React Hooks。不用擔(dān)心，我將為 Reactv16.8 + 創(chuàng)建速查表，請(qǐng)繼續(xù)關(guān)注。

結(jié)論

以上就是本次分享的全部工具。

希望大家在這里找到了有價(jià)值的信息。