2019 年，React 开拓职员应该行使的 22 个神奇器材

我们傍边有些人也许不知道怎样用 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 是一个很好的更换要领。

（编辑：湖南网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!