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

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

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

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

（编辑：核心网）

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