import React from 'react'import Button from '@material-ui/core/Button'
const Child = (props) => <div {...props} />
const Child2 = ({ children, ...props }) => ( <div {...props}> {children} <Child /> </div>)
Child2.whyDidYouRender = true
const App = () => { const [state, setState] = React.useState({})
return ( <div> <Child>{JSON.stringify(state, null, 2)}</Child> <div> <Button type="button" onClick={() => setState({ hello: 'hi' })}> Submit </Button> </div> <Child2>Child #2</Child2> </div> )}
export default App只有這樣做之後，我們的控制臺才會彈出令人難以置信的討厭警報：但請不要誤會。把它當成一件好事。利用那些煩人的消息，這樣我們就可以修復那些浪費的重渲染。（https://url.leanapp.cn/Q1JbLRB）是啟動開發 React 項目最快的方法（擁有開箱即用的現代功能）。還有什麼能比 npx create-react-app 更簡單的呢？我在 Medium 上的教程（以及 Dev.to）都是用 create-react-app 構建 React 接口界面的，只是因為它又快又簡單。我們當中有些人可能不知道如何用 CRA 來創建一個 TypeScript 項目。我們要做的就是在末尾加上 typescript：npx create-react-app <name> 這會幫我們省去給 CRA 項目手工添加 TypeScript 的麻煩。5. React-Lifecycle-VisualizerReact-Lifecycle-Visualizer（https://url.leanapp.cn/7WKDMBe）是一個 npm 軟體包，用於跟蹤和可視化任意 React 組件的生命周期方法。與 Why Did You Render 相似，我們可以選擇任何組件來啟動生命周期可視化工具：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 <h2>Traced Component</h2> }}
const EnhancedTracedComponent = traceLifecycle(TracedComponent)
const App = () => ( <VisualizerProvider> <EnhancedTracedComponent /> <Log /> </VisualizerProvider>)但是，其中一個缺點是它目前僅適用於類組件，因此尚不支持 Hook 。Guppy（https://url.leanapp.cn/UOsByMC）是 React 的一個友好且免費的應用程式管理器和任務運行器，可以在桌面上運行且支持跨平臺，我們可以放心用。它提供了很多友好的圖形界面，為 React 開發人員的一些典型任務項目提供支持。例如創建新項目，執行任務和管理依賴項。並在 2018 年 8 月添加支持 Windows，因此可以放心，它肯定是跨平臺的。我一直很喜歡 react-testing-library（https://url.leanapp.cn/AAWrJhu），因為在編寫單元測試時感覺不錯。這個包提供了 DOM 測試實用程序，鼓勵良好的測試實踐。此解決方案旨在解決測試實施細節的問題，就像用戶可以看到它們一樣，而不是測試 React 組件的輸入/輸出。測試實施細節並不是確保應用按預期運行的有效方法。當然，我們能夠更清楚的了解如何獲取組件所需的數據，使用哪種排序方法等。但是，如果我們必須更改實現方式以指向另一個資料庫的話，單元測試就會失敗，因為這些是耦合邏輯的實現細節。這是 react-testing-library 解決的一個問題，因為理想情況下，我們只希望我們的用戶界面能夠正常工作並最終正確顯示。只要這些組件能夠提供預期的輸出，數據如何獲取到這些組件實際上並不重要。
const renderComponent = ({ count }) => render( <StateMock state={{ count }}> <StatefulCounter /> </StateMock>, )
it('renders initial count', async () => { const { getByText } = renderComponent({ count: 5 })
await waitForElement(() => getByText(/clicked 5 times/i))})
it('increments count', async () => { const { getByText } = renderComponent({ count: 5 })
fireEvent.click(getByText('+1')) await waitForElement(() => getByText(/clicked 6 times/i))})8. React Developer Tools（https://url.leanapp.cn/bO2m1ju）是一個擴展，它允許在Chrome 和 Firefox 開發人員工具中查看 React 組件層次結構。這是 React 開發中最常見的擴展插件，並且是 React 開發人員用來調試其應用程式的最有用的工具之一。在使用諸如 material-ui 或 semantic-ui-react 之類的組件庫時，Bit （https://bit.dev/）是一個很好的替代方案。它可以讓我們探索數千個開源組件，並使用它們來構建項目。有很多不同的 React 組件，可供任何人使用，包括選項卡、按鈕、圖表、表格、導航條、下拉菜單、加載旋轉器、日期選擇器、麵包屑導航（breadcrumbs）、圖標、布局等等。如果你還不了解 Storybook（https://storybook.js.org/），並且希望能夠輕鬆地構建 UI 組件，我強烈建議你立即使用它。該工具啟動了支持熱重載的實時開發伺服器，讓我們可以在其中獨立地實時開發 React 組件。另一個很棒的事情是，我們可以使用現有的開源插件，將我們的開發經驗提升到一個全新的水平。例如，利用 Storybook README 包，我們可以在同一頁面上創建 README 文檔，同時開發供生產使用的 React 組件。這足以作為常規文檔頁面：你是否想過自己的應用程式在流程圖中看起來是什麼樣的？React -sight（https://www.reactsight.com/）可以讓整個應用程式以樹狀圖的形式展示層次結構，清楚查看我們的 React 應用程式。它還支持 React Router，Redux 和 React Fibre。使用此工具，您可以將滑鼠懸停在節點上，這些節點是指向樹中與它們直接相關的組件的連結。如果您在查看結果時遇到問題，可以在 地址欄上輸入 chrome:extensions，找到 React Sight 框並單擊 Allow access to file URLs 開關，如下所示：（https://url.leanapp.cn/x60eDHB）是用於創建可重複使用 React 組件的開發工具。這是本次推薦中最好的可用工具之一，它可以讓我們手動使用 React 的速度比眨眼還快（好吧，也許也沒那麼快）。（https://codesandbox.io/）的工具是一個在線編輯器，我們從創建原型到 Web 應用程式部署 - 都可以在這個網站實現！在早期，Codesandbox 僅支持 React，但現在已經擴展到 Vue 和 Angular 等庫的其他入門模板。他們還支持常見的靜態站點生成器（如 gatsby 或 nextjs ）創建項目來啟動下一個 React Web 項目。關於 codesandbox，它不僅活躍，還有很多有意思的事情可以討論。如果大家需要探索一下人們為方便大家起見正在構建的一些項目，那麼簡單地點擊一下 explore 就可以訪問一大堆代碼示例，來幫助大家更新下一個項目：React bits（https://vasanthk.gitbooks.io/react-bits/）是 React 模式、技術、技巧和竅門的集合，所有這些都以類似在線文檔的格式編寫，大家可以在同一個選項卡上快速訪問不同的設計模式和技術、反模式、樣式、UX 變體以及其他有用的與 React 相關的材料。他們有一個 GitHub 存儲庫，目前有 10437 星。一些示例包括諸如道具代理，在不同場景下處理各種 UX 的組合之類的概念，甚至還提示了每個開發人員應該避免的一些陷阱。這是他們頁面上的樣子，如大家在左側的菜單上看到的那樣，有很多信息：）Folderize（https://url.leanapp.cn/CJDTdfQ）是一個 VSCode 擴展。它可以讓我們將組件文件轉換為組件文件夾結構。轉換後 React 組件仍將是一個組件，只是現在轉換為一個目錄而已。例如，假設我們正在創建一個 React 組件，它把文件作為屬性以顯示有用的信息，比如它們的元數據。元數據組件的邏輯佔用了很多行，因此我們決定將其拆分為一個單獨的文件。但是，當我們決定這樣做時，我們就有了兩個相互關聯的文件。我們可能想把 FileView.js 和 FileMetadata.js 抽象到目錄結構中，像 Apples- 那樣，特別是如果我們希望添加更多與文件相關的組件，比如 FileScanner.js 。這就是 folderize 可以為我們做的事情，這樣它們就可以具有以下類似結構：import React from 'react'import FileView from './src/components/FileView'
const App = (props) => <FileView {...props} />
export default App16. React Starter Projects（https://url.leanapp.cn/DUi8AFk）是一個很棒的依賴庫列表，我們可以在一個頁面中查看全部項目。因此，如果我們覺得能同時快速查看到大量選項是非常有用的，那麼這個很適合我們。一旦看到喜歡的入門項目後，我們就可以簡單克隆存儲庫，根據開發中的應用需要進行簡單修改。但是，並非所有的庫都用來克隆存儲庫，因為其中一些庫需要通過安裝形式，才能成為項目的依賴項。這樣可以更輕鬆地獲取更新並保持項目整潔。可以說，這個是每個開發者工具包裡都應該有的重要工具。Highlight Updates 是 React DevTools 的一項擴展功能，可以查看頁面中的哪些組件正在不必要地重新渲染。它們會用橙色/紅色標出嚴重的重渲染問題，幫助我們在開發頁面時更容易的發現一些性能問題。除非我們的目標是構建平庸的應用程式，否則為什麼不試試這個在我們身邊的好東西。（https://url.leanapp.cn/s0QPrMa）是使用 Diff 和 React 製作的簡單美觀的文本差異查看器。支持多種功能，如：分屏視圖，內聯視圖，單詞差異，行高亮顯示等。如果我們想將此功能嵌入記事本（如 Boostnote）和自定義至應用程式（比如主題顏色、故事演示文檔組合等），那麼，它將非常有用。JS.coach（https://url.leanapp.cn/6uPqXJp）是我經常用來查找 React 相關材料的網站。我不確定為什麼提到這個網站的人不多，但在這個頁面我發現了幾乎所有我需要的信息，它快捷、方便，並不斷更新，總是能為我所有的項目提供所需的結果。最近，他們添加了 React VR 選項卡，這真是太好了！（https://url.leanapp.cn/6uPqXJp）開源庫是一個與 React 相關的並非常棒的列表。我可能會忘記其他網站只從從這個連結學習 React 。因為可以在此找到大量有用的資源，這些資源肯定會幫助我們構建出色的 React 應用程式！（https://url.leanapp.cn/cLIGRY8）為大家提供了一個 React 環境來構建跨平臺的本機桌面應用程式。它是 Electron 的替代產品，只有一些簡潔的功能，包括：與 React Native 相同的語法
適用於現存的 React 庫，例如 Redux
跨平臺
原生組件，不再有 Electron
與所有正常的 Node.js 包兼容
有興趣了解更多嗎？請閱讀他們的文檔（https://proton-native.js.org/#/）。22. Devhints React.js Cheatsheet一個不錯的 React 速查表（https://devhints.io/react），儘管它缺少 React Hooks。不用擔心，我將為 Reactv16.8 + 創建速查表，請繼續關注。本文經原作者 Jsmanifest 授權 LeanCloud 翻譯轉載，原文有部分刪減。