21个React开发神器

﹏ヽ暗。殇╰゛Y 2021-10-23 12:16 398阅读 0赞

**摘要：** React开发神器。

*  原文：[22 Miraculous Tools for React Developers in 2019][]
 *  译者：前端小智

下列工具中的重要性与排序无关。

### 1.Webpack Bundle Analyzer ###

有没有想过你的应用程序的哪些包或哪部分代码所占总大小的多少? [Webpack Bundle Analyzer][]可以帮助咱们分析。

[Webpack Bundle Analyzer][]创建一个实时服务器，并提供依赖包交互式树形图可视化。 通过这个工具包，可以看到所渲染文件的位置，gzip大小，解析大小以及所父子级之间详情。

这个工具的好处是，可以根据你所看到来优化你的React应用。

收下是它生成的一个分析图：

![aHR0cHM6Ly9pbWFnZS5mdW5kZWJ1Zy5jb20vMjAxOS0wOC0xMy0wMS5wbmc][]

可以清楚地看到`pdf`包大小占用应用程序是最多的，同时也是占用分析图片最大比例，这对于咱们来说是所看即所得效果。

然而，生成分析图空间有限，你还可以传递一些有用的选项来更详细地查看它，比如`generateStatsFile: true`，还可以选择生成一个静态`HTML`文件，可以将其保存在开发环境之外的某个地方，以供以后使用。

### 2. React-Proto ###

[React-Proto][] 是一个面向开发人员和设计人员的原型工具。这是一个桌面软件，所以在使用之前你必须下载并安装这个软件。

以下是使用方式一个简单演示：

![aHR0cHM6Ly9pbWFnZS5mdW5kZWJ1Zy5jb20vMjAxOS0wOC0xMy0wMi5wbmc][]

该应用程序允许你声明`props`及其`types`，在树中查看组件，导入背景图像，将它们定义为有状态或无状态，定义其父组件将是什么，放大/缩小，以及将原型导出到新的或现有项目。

该应用程序似乎更适合`Mac`用户，但它仍适用于`Windows`用户。

完成用户界面后，可以选择导出到现有项目或新项目。 如果你选择导出到现有项目并选择根目录，它会将它们导出到`./src/components`，如下所示：

![aHR0cHM6Ly9pbWFnZS5mdW5kZWJ1Zy5jb20vMjAxOS0wOC0xMy0wMy5wbmc][]

随着`React hook`的发布，这个应用程序需要更新做更多的工作。当然，开源是这个应用程序的好处，因为它使它有可能成为未来流行的开源存储库列表。

### 3. Why Did You Render ###

[Why Did You Render][] 猴子补丁React通知你有关可避免的重新渲染的信息。

> 猴子补丁: 这个叫法起源于Zope框架，大家在修正Zope的Bug的时候经常在程序后面追加更新部分，这些被称作是“杂牌军补丁(guerilla patch)”，后来guerilla就渐渐的写成了gorllia((猩猩)，再后来就写了monkey(猴子)，所以猴子补丁的叫法是这么莫名其妙的得来的。

猴子补丁主要有以下几个用处：

*  在运行时替换方法、属性等
 *  在不修改第三方代码的情况下增加原来不支持的功能
 *  在运行时为内存中的对象增加patch而不是在磁盘的源代码中增加

这非常有用，不仅可以指导咱们修复项目的性能，还可以帮助你理解`React`是如何工作的。而且，当你更好地理解`React`的工作原理时，你就会成为更好的`React`开发人员。

通过声明一个额外的静态属性`whyDidYouRender`并将其值设置为`true`，可以将侦听器附加到任何自定义组件

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

这样做之后，在控制台才会打印令人恼人冗长警告：

![aHR0cHM6Ly9pbWFnZS5mdW5kZWJ1Zy5jb20vMjAxOS0wOC0xMy0wNC5wbmc][]

不要认为这是错误的提示，把它当成一件好事。 利用那些烦人的消息，这样你就可以修复那些浪费的重新渲染。

### 4. Create React App ###

大家都知道，[Create React App][]是创建 React项目的最快方式（开箱即用）。

还有什么比 `npx create-react-app <name>`更简单的呢

咱们还有些人可能不知道的是如何使用CRA创建`TypeScript`项目，这个也很简单，只需要在末尾添加`--typescript` 即可：

npx create-react-app <name> — typescript

这样可以省去手动将`TypeScript`添加到CRA创建项目中的麻烦。

### 5. React Lifecycle Visualizer ###

[React Lifecycle Visualizer][]是一个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>
        )

运行结果，如下所示：

![aHR0cHM6Ly9pbWFnZS5mdW5kZWJ1Zy5jb20vMjAxOS0wOC0xMy0wNS5wbmc][]

但是，其中一个缺点是它目前仅适用于**类组件**，因此尚不支持 **Hook**。

### 6. Guppy ###

[Guppy][] 是`React`的一个友好且免费的应用程序管理器和任务运行器，它在桌面上运行且跨平台的，你可以放心用。

它为开发人员经常面临的许多典型任务(如创建新项目、执行任务和管理依赖项)提供了友好的图形用户界面。

**Guppy** 启动后的的样子

![aHR0cHM6Ly9pbWFnZS5mdW5kZWJ1Zy5jb20vMjAxOS0wOC0xMy0wNi5wbmc][]

### 7. react-testing-library ###

[react-testing-library][] 是一个很棒的测试库，编写单元测试时，它会让你感觉很好。这个包提供了**React DOM**测试实用程序，鼓励良好的测试实践。

此解决方案旨在解决测试实现细节的问题，而不是测试React组件的输入/输出，就像用户会看到它们一样。

这是`react-test -library`解决的一个问题，因为理想情况下，你只希望您的用户界面能够正常工作，并最终正确地渲染出来。

如何将数据获取到这些组件并不重要，只要它们仍然提供预期的输出即可。

以下是使用此库进行测试的示例代码：

// Hoist helper functions (but not vars) to reuse between test cases
        const renderComponent = ({  count }) =>
          render(
            <StateMock state={ {  count }}>
              <StatefulCounter />
            </StateMock>,
          )
        
        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][]是一个扩展插件，允许在`Chrome`和`Firefox Developer Tools`中检查React的组件层次结构。

这是`React`开发中最常见的扩展插件，并且是`React`开发人员可以用来调试其应用程序的最有用的工具之一。

### 9. Bit ###

通过[Bit][]可以看到数以千计的开源组件，并允许还可以使用它们来构建项目。

![aHR0cHM6Ly9pbWFnZS5mdW5kZWJ1Zy5jb20vMjAxOS0wOC0xMy0wNy5naWY][]

列表中有很多很多React组件可供咱们使用，包括选项卡，按钮，图表，表格，导航栏，下拉列表，加载微调器，日期选择器，面包屑，图标，布局等。

### 10. Storybook ###

[Storybook][] 是一个轻松地构建UI组件的库。该工具启动一个实时开发服务器，支持开箱即用的热重载，你可以在其中独立地实时开发**React**组件。

这足以作为普通文档页面：

![aHR0cHM6Ly9pbWFnZS5mdW5kZWJ1Zy5jb20vMjAxOS0wOC0xMy0wOC5wbmc][]

**代码部署后可能存在的BUG没法实时知道，事后为了解决这些BUG，花了大量的时间进行log 调试，这边顺便给大家推荐一个好用的BUG监控工具 [Fundebug][]。**

### 11. React Sight ###

你有没有想过你的应用程序在流程图中的样子？ [React Sight][]允许你通过展示整个应用程序的实时组件层次结构树来可视化React应用程序。

它还支持**react-router**，**Redux**以及**React Fiber**。

使用此工具，您可以将鼠标悬停在节点上，这些节点是指向与树中组件直接相关的组件的链接。

如果在查看结果时遇到问题，可以在地址栏中输入`chrome:extensions` ，查找“React Sight”框，然后单击`“Allow access to file URLs”`开关，如下所示：

![aHR0cHM6Ly9pbWFnZS5mdW5kZWJ1Zy5jb20vMjAxOS0wOC0xMy0wOS5wbmc][]

### 12. React Cosmos ###

[React Cosmos][]是一个用于创建可重用React组件的开发工具。

它扫描项目中的组件，并使你能够:

*  通过 props，context和state任意组合来渲染组件。
 *  模拟每个外部依赖项(API响应、`localStorage`等)。
 *  查看应用程序状态在与运行实例交互时的实时演变。

### 13. CodeSandbox ###

[CodeSandbox][]一个在线编辑器，可以在上面创建Web应用程序并实行运行。

CodeSandbox 最初只在早期阶段支持**React**，但它们现在已经扩展到**Vue**和**Angular**等库的其他入门模板。

他们还支持使用常见的静态站点生成器（如[Gatsby][]或[Next.js][]）创建项目来启动React Web项目。

![aHR0cHM6Ly9pbWFnZS5mdW5kZWJ1Zy5jb20vMjAxOS0wOC0xMy0xMC5wbmc][]

### 14. React Bits ###

[React Bits][]是一个React模式、技术、技巧和技巧的集合，所有这些都以类似于在线文档的格式编写，你可以在同一个选项卡上快速访问不同的设计模式和技术、反模式、样式、UX变体以及其他与React相关的有用材料。

[GitHub repo][]，目前有10083颗星星。

![aHR0cHM6Ly9pbWFnZS5mdW5kZWJ1Zy5jb20vMjAxOS0wOC0xMy0xMS5wbmc][]

### 15. folderize ###

[folderize][]是一个VS Code 扩展。 它允许您将组件文件转换为组件文件夹结构。 React 组件仍然是一个组件，只是转换为一个目录。

例如，假设正在创建一个React组件，该组件将文件作为`props`来显示有用的信息，如元数据

元数据组件的逻辑占用了大量的行，因此咱们决定将其拆分为单独的文件。 但是，当这样做时，咱们就有两个相互关联的文件。

所以，就有有一个大概如下所示的目录：

![aHR0cHM6Ly9pbWFnZS5mdW5kZWJ1Zy5jb20vMjAxOS0wOC0xMy0xMi5wbmc][]

咱们可能想要将`FileView.js`和`filemetada.js`抽象到目录结构中，就像`Apple`一样，尤其是考虑添加更多与`FileScanner.js`等文件相关的组件时。

这就是`folderize`为咱们所做的，这样组件们就可以得到一个类似的结构

![aHR0cHM6Ly9pbWFnZS5mdW5kZWJ1Zy5jb20vMjAxOS0wOC0xMy0xMy5wbmc][]

### 16. React Starter Projects ###

[React starter projects][] 是一个依赖库列表，可以在上面快速你需要要的依赖库的名称并可以跳转对应的 `github` 上。

一旦看到一个你喜欢的入门项目，你就可以简单地克隆这个库，并根据你的需要进行修改。

但是，并不是所有的依赖库都是通过克隆使用，因为其中一些库需要通过安装形式，才能成为项目的依赖项。

![aHR0cHM6Ly9pbWFnZS5mdW5kZWJ1Zy5jb20vMjAxOS0wOC0xMy0xNC5wbmc][]

### 17. Highlight Updates ###

这可能是开发工具包中最重要的工具。 [Highlight Updates][]是**React DevTools**扩展的一个特性，可以查看页面中的哪些组件正在不必要地重新渲染。

![aHR0cHM6Ly9pbWFnZS5mdW5kZWJ1Zy5jb20vMjAxOS0wOC0xMy0xNS5naWY][]

它可以帮助你在开发页面时是更容易发现一些性能问题，因为它们会使用橙色或红色对严重的重新渲染问题进行着色。

### 18. React Diff Viewer ###

[React Diff Viewer][]是一个简单而美观的文本差异对比工具 这支持分割视图，内嵌视图，字符差异，线条突出显示等功能。

![aHR0cHM6Ly9pbWFnZS5mdW5kZWJ1Zy5jb20vMjAxOS0wOC0xMy0xNi5wbmc][]

### 19. JS.coach ###

[JS.coach][] 是我最常用来与 React 有需要的库的网站。从这个页面可以找到需要的任何东西。

它快速、简单、不断更新，并且总是能给我所有项目所需的结果。最近还添加了React VR，非常棒。

### 20. Awesome React ###

[Awesome React][]开源库是一个与React相关的很棒的列表。

我可能会忘记其他网站并单独从这个链接学习React。 因为可以在此找到批量有用的资源，这些资源肯定会帮助我们构建出色的React应用程序！

### 21. Proton Native ###

[Proton Native][]为咱们提供了一个React环境来构建跨平台的本机桌面应用程序。

它是[Electron][]的替代产品，具有一些简洁的功能，包括：

*  与React Native语法相同。
 *  适用于现有的React库，例如 Redux。
 *  兼容所有正常的 Node.js 包。

### 关于Fundebug ###

[Fundebug][Fundebug 1]专注于JavaScript、微信小程序、微信小游戏、支付宝小程序、React Native、Node.js和Java线上应用实时BUG监控。 自从2016年双十一正式上线，Fundebug累计处理了20亿+错误事件，付费客户有阳光保险、核桃编程、荔枝FM、掌门1对1、微脉、青团社等众多品牌企业。欢迎大家[免费试用][Link 1]！

[22 Miraculous Tools for React Developers in 2019]: https://medium.com/better-programming/22-miraculous-tools-for-react-developers-in-2019-7d72054e2306
[Webpack Bundle Analyzer]: https://github.com/webpack-contrib/webpack-bundle-analyzer
[aHR0cHM6Ly9pbWFnZS5mdW5kZWJ1Zy5jb20vMjAxOS0wOC0xMy0wMS5wbmc]: /images/20211023/56017f92f89f47ba9a1ef1c9feeb15f6.png
[React-Proto]: https://github.com/React-Proto/react-proto
[aHR0cHM6Ly9pbWFnZS5mdW5kZWJ1Zy5jb20vMjAxOS0wOC0xMy0wMi5wbmc]: /images/20211023/9baf875d2a3d42fb9bd02c75c703060b.png
[aHR0cHM6Ly9pbWFnZS5mdW5kZWJ1Zy5jb20vMjAxOS0wOC0xMy0wMy5wbmc]: /images/20211023/05006e1be508464dbd4f979b9f78de47.png
[Why Did You Render]: https://github.com/welldone-software/why-did-you-render
[aHR0cHM6Ly9pbWFnZS5mdW5kZWJ1Zy5jb20vMjAxOS0wOC0xMy0wNC5wbmc]: /images/20211023/dca23d8647844cfa8220c6a09d49ed10.png
[Create React App]: https://github.com/facebook/create-react-app
[React Lifecycle Visualizer]: https://github.com/Oblosys/react-lifecycle-visualizer
[aHR0cHM6Ly9pbWFnZS5mdW5kZWJ1Zy5jb20vMjAxOS0wOC0xMy0wNS5wbmc]: /images/20211023/7943f6b844a74e689f67bea904e8dd06.png
[Guppy]: https://github.com/joshwcomeau/guppy
[aHR0cHM6Ly9pbWFnZS5mdW5kZWJ1Zy5jb20vMjAxOS0wOC0xMy0wNi5wbmc]: /images/20211023/7ac88654961e42c984a5c11968fbcab3.png
[react-testing-library]: https://github.com/testing-library/react-testing-library
[React Developer Tools]: https://github.com/facebook/react-devtools
[Bit]: https://bit.dev/
[aHR0cHM6Ly9pbWFnZS5mdW5kZWJ1Zy5jb20vMjAxOS0wOC0xMy0wNy5naWY]: /images/20211023/48bc708bd97249fb86e55808e277f54c.png
[Storybook]: https://storybook.js.org/
[aHR0cHM6Ly9pbWFnZS5mdW5kZWJ1Zy5jb20vMjAxOS0wOC0xMy0wOC5wbmc]: /images/20211023/a24f77b7bacf44a8b62ef0e14c9953b4.png
[Fundebug]: https://www.fundebug.com/?utm_source=xiaozhi
[React Sight]: https://www.reactsight.com/
[aHR0cHM6Ly9pbWFnZS5mdW5kZWJ1Zy5jb20vMjAxOS0wOC0xMy0wOS5wbmc]: /images/20211023/5715e6c0ae7747f68580eaccea0f36b2.png
[React Cosmos]: https://github.com/react-cosmos/react-cosmos
[CodeSandbox]: https://codesandbox.io/
[Gatsby]: https://www.gatsbyjs.org/
[Next.js]: https://nextjs.org/
[aHR0cHM6Ly9pbWFnZS5mdW5kZWJ1Zy5jb20vMjAxOS0wOC0xMy0xMC5wbmc]: /images/20211023/b57a799e47274b7f87fe881c185f7811.png
[React Bits]: https://vasanthk.gitbooks.io/react-bits/
[GitHub repo]: https://github.com/vasanthk/react-bits
[aHR0cHM6Ly9pbWFnZS5mdW5kZWJ1Zy5jb20vMjAxOS0wOC0xMy0xMS5wbmc]: /images/20211023/c32fc7eeb7094b96881897d09625a4b6.png
[folderize]: https://marketplace.visualstudio.com/items?itemName=ee92.folderize
[aHR0cHM6Ly9pbWFnZS5mdW5kZWJ1Zy5jb20vMjAxOS0wOC0xMy0xMi5wbmc]: /images/20211023/fd5d9f1b18d040cf8d800c81b1c23707.png
[aHR0cHM6Ly9pbWFnZS5mdW5kZWJ1Zy5jb20vMjAxOS0wOC0xMy0xMy5wbmc]: /images/20211023/612b1ae90bc54b539c620d4681879f8c.png
[React starter projects]: https://www.javascriptstuff.com/react-starter-projects/#react%20dev
[aHR0cHM6Ly9pbWFnZS5mdW5kZWJ1Zy5jb20vMjAxOS0wOC0xMy0xNC5wbmc]: /images/20211023/479c8c5812064661a788b951006f667b.png
[Highlight Updates]: https://reactjs.org/docs/optimizing-performance.html
[aHR0cHM6Ly9pbWFnZS5mdW5kZWJ1Zy5jb20vMjAxOS0wOC0xMy0xNS5naWY]: /images/20211023/751917b2995d4f7a8804b82d15a6f8c6.png
[React Diff Viewer]: https://praneshravi.in/react-diff-viewer/
[aHR0cHM6Ly9pbWFnZS5mdW5kZWJ1Zy5jb20vMjAxOS0wOC0xMy0xNi5wbmc]: /images/20211023/bb9f8b529584435caa198585b6a153c9.png
[JS.coach]: https://js.coach/?collection=React
[Awesome React]: https://github.com/enaqx/awesome-react
[Proton Native]: https://github.com/kusti8/proton-native
[Electron]: https://electronjs.org/
[Fundebug 1]: https://www.fundebug.com/
[Link 1]: https://www.fundebug.com/team/create