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

发布时间：2019-08-12 23:13:08 所属栏目：评测来源：程序员新视界

导读：下列工具中的重要性与排序无关。 1.Webpack Bundle Analyzer 有没有想过你的应用程序的哪些包或哪部分代码所占总大小的多少? Webpack Bundle Analyzer可以帮助咱们分析。 Webpack Bundle Analyzer创建一个实时服务器，并提供依赖包交互式树形图可视化。通

副标题[/!--empirenews.page--]

下列工具中的重要性与排序无关。

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> 
)