21个让React 开发更高效更有趣的工具

阿里云最近在作活动，低至2折，有兴趣能够看看：
https://promotion.aliyun.com/...

---

为了保证的可读性，本文采用意译而非直译。

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

1.Webpack Bundle Analyzer

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

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

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

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

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

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

2. React-Proto

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

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

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

该应用程序彷佛更适合Mac用户，但它仍适用于Windows用户。

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

随着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

这样作以后，在控制台才会打印使人恼人冗长警告：

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

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>
)

运行结果，以下所示：

可是，其中一个缺点是它目前仅适用于类组件，所以尚不支持 Hook。

6. Guppy

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

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

Guppy 启动后的的样子

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能够看到数以千计的开源组件，并容许还可使用它们来构建项目。

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

10. Storybook

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

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

11. React Sight

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

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

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

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

12. React Cosmos

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

它扫描项目中的组件，并使你可以:

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

13. CodeSandbox

CodeSandbox一个在线编辑器，能够在上面建立Web应用程序并实行运行。

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

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

14. React Bits

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

GitHub repo，目前有10083颗星星。

15. folderize

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

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

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

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

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

这就是folderize为我们所作的，这样组件们就能够获得一个相似的结构

16. React Starter Projects

React starter projects 是一个依赖库列表，能够在上面快速你须要要的依赖库的名称并能够跳转对应的 github 上。

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

可是，并非全部的依赖库都是经过克隆使用，由于其中一些库须要经过安装形式，才能成为项目的依赖项。

17. Highlight Updates

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

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

18. React Diff Viewer

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

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 包。

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

交流

干货系列文章汇总以下，以为不错点个Star，欢迎 加群 互相学习。

https://github.com/qq44924588...

我是小智，公众号「大迁世界」做者，对前端技术保持学习爱好者。我会常常分享本身所学所看的干货，在进阶的路上，共勉！

关注公众号，后台回复福利，便可看到福利，你懂的。