2019年，React开发人员应该掌握的22种神奇工具(2)

只有这样做之后，我们的控制台才会弹出令人难以置信的烦人警报：

但别误会，请把它当成一件好事。利用那些烦人的消息，我们就可以修复那些浪费的重渲染。

4. Create React App

大家都知道 Create React App 是启动开发 React 项目最快的方法（拥有开箱即用的现代功能）。

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

我在 Medium 上的教程（以及 Dev.to）都是用 create-react-app 构建 React 接口界面的，就因为它又快又简单。

我们当中有些人可能不知道如何用 CRA 来创建一个 TypeScript 项目。我们要做的就是在末尾加上 --typescript：

npx create-react-app <name> --typescript 

这会帮我们省去给 CRA 项目手工添加 TypeScript 的麻烦。

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 的一个友好且免费的应用程序管理器和任务运行器，可以在桌面上运行且支持跨平台，大家可以放心使用。

它提供了很多友好的图形界面，为 React 开发人员的一些典型任务项目提供支持。例如创建新项目，执行任务和管理依赖项。并在 2018 年 8 月添加支持 Windows，因此可以放心，它肯定是跨平台的。

以下是 Guppy 使用时的样子：

7. react-testing-library

我一直很喜欢 react-testing-library，因为在编写单元测试时感觉不错。这个包提供了实用的 DOM 测试程序，鼓励良好的测试实践。

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

测试实施细节并不是确保应用按预期运行的有效方法。当然，我们能够更清楚的了解如何获取组件所需的数据，使用哪种排序方法等。但是，如果我们必须更改实现方式以指向另一个数据库的话，单元测试就会失败，因为这些是耦合逻辑的实现细节。

这是 react-testing-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 开发人员工具中查看 React 组件层次结构。

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

9. Bit

（编辑：ASP站长网）