21个让React 开拓更高效更风趣的器材

下列器材中的重要性与排序无关。

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办理的一个题目，由于抱负环境下，你只但愿您的用户界面可以或许正常事变，并最终正确地渲染出来。

怎样将数据获取到这些组件并不重要，只要它们如故提供预期的输出即可。

（编辑：湖南网）

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