2019 年，React 开发人员应该使用的 22 个神奇工具(2)

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

npx create-react-app — typescript 

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

5. React Lifecycle Visualizer

React Lifecycle Visualizer 是一个 npm 包，用于跟踪和可视化任意 React 组件的生命周期方式。

与 Why Did You Render 类似，我们可以启用我们选择的任何组件来显示生命周期可视化器：

importReactfrom'react' 
import{ 
Log, 
VisualizerProvider, 
traceLifecycle, 
}from'react-lifecycle-visualizer' 
classTracedComponentextendsReact.Component{ 
state = { 
loaded:false, 
} 
componentDidMount() { 
this.props.onMount() 
} 
render() { 
return<h2>Traced Component</h2> 
} 
} 
constEnhancedTracedComponent = traceLifecycle(TracedComponent) 
constApp =()=>( 
<VisualizerProvider> 
<EnhancedTracedComponent/> 
<Log/> 
</VisualizerProvider> 
) 

}}constEnhancedTracedComponent = traceLifecycle(TracedComponent)constApp =()=>()

这将呈现可视化器，所示如下：

然而，这有个缺点，目前只能用于类组件，因此还不支持 Hooks。(问题是，它们能够做到吗?因为这跟生命周期有关。)

6. Guppy

Guppy 是一个友好且免费的 React 应用程序管理器和任务运行器，可以在桌面上运行。

它们似乎优先考虑那些 React 的开发新手。但是，对于高级开发人员也可能是有用的。

它提供了一种友好的图形化用户界面，用于 React 开发人员经常面对的很多典型任务，如：创建一个新项目、执行任务和管理依赖项。2018 年 8 月添加了对 Windows 的支持，因此，可以肯定它是跨平台的。以下是 Guppy 看起来的样子：

7. react-testing-library

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

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

测试实施细节并不是确保应用程序按预期工作的有效方法。

当然，对我们如何获取组件需要的数据、使用某种方法等等，我们能够更有信心。但是，如果我们必须改变我们的实现方法，以指向不同的数据库，那么，单元测试就会失败，因为它们是耦合逻辑的实现细节。

这是 react-testing-library 解决的一个问题，因为，理想情况下，我们只希望我们的用户接口界面能够正常工作，最终可以正确地呈现。

我们如何为这些组件获取数据真的无关紧要，只要它们仍然提供预期的输出即可。

以下是我们如何使用该库来进行测试的 示例代码 ：

// Hoist helper functions (but not vars) to reuse between test cases 
constrenderComponent =({ count }) => 
render( 
<StateMockstate={{count}}> 
<StatefulCounter/> 
</StateMock>, 
) 
it('renders initial count',async() => { 
// Render new instance in every test to prevent leaking state 
const{ getByText } = renderComponent({count:5}) 
awaitwaitForElement(()=>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')) 
awaitwaitForElement(()=>getByText(/clicked 6 times/i)) 
}) 

8. React Developer Tools

React Developer Tools 是一个扩展，它允许在 Chrome 和 Firefox Developer Tools 中查看 React 的组件层次结构。

这是在本列表中最常见的扩展，并仍然是 React 开发人员能够用于调试应用程序的最有帮助的工具之一。

9. Bit

在使用组件库(如 Material-UI 或 Semantic UI React )时， Bit 是一个很好的替代方法。

（编辑：ASP站长网）