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) =>  
  
  
  const Child2 = ({ children, ...props }) => ( 
  
  
    
  
  
   {children}

)

Child2.whyDidYouRender = true

const App = () => {

const [state, setState] = React.useState({})

return (

{JSON.stringify(state, null, 2)}

setState({ hello: 'hi' })}>

Submit

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
Traced Component
}
}
const EnhancedTracedComponent = traceLifecycle(TracedComponent)
const App = () => (
)

// Hoist helper functions (but not vars) to reuse between test cases
const renderComponent = ({ count }) =>
render(
,
)
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))
})

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

Traced Component