收藏！送给React研发人员的22款超强工具

众所周知，React是一个JavaScript 库，用来建立强大的用户接口。然而，并不是每个人都在用相同的工具，都知道那些能让 React 研发体验变得更有趣、更积极主动的超棒工具。

盐山网站建设公司创新互联公司,盐山网站设计制作，有大型网站制作公司丰富经验。已为盐山1000+提供企业网站建设服务。企业网站搭建\外贸网站建设要多少钱，请找那个售后服务好的盐山做网站的公司定做！

这里有22款工具，2019年用它们打造 React 应用程序吧!(列表不按重要性排名)

1. Webpack Bundle Analyzer

https://github.com/webpack-contrib/webpack-bundle-analyzer

有没有想过是什么程序包或应用程序的零件占用了所有空间?Webpack Bundle Analyzer 可以帮你找到答案。这款程序包可帮助用户识别那些占用了大部分空间的输出文件。

它会创建一个实况服务器，以交互式树图这一可视化方式显示软件集的内容。软件包中有了它，就可以看见显示文件的位置、其压缩文件的大小、解析文件大小以及其源文件/衍生文件。

好处是什么?基于所见优化 React 程序!

这是该应用程序的截图：

显而易见， pdf 程序包在应用程序中占用了大部分空间。但它也占用了屏幕上的大部分空间。这真的很有用。

然而，这个截屏是最小化的，还可以浏览一些有用的选项查看更多细节，比如 generateStatsFile: true，并且也可以选择生成静态的 HTML 文件，将其保存到研发环境外以备用。

2. React-Proto

https://github.com/React-Proto/react-proto

React-Proto 是一款提供给研发人员和设计人员的原型化工具。这是一款桌面软件，所以在使用前必须进行下载和安装。

这是该软件使用实例：

这款应用程序允许用户申报小道具及其类型，在树形图中查看组件，输入背景图像，定义其有无状态，明确其父组件是什么，进行缩放，将原型输出到一个新的或已存在的项目中。

这款程序看上去更像是为 Mac 用户量身定制，然而，对 Windows 用户来说，它还是很好用。

已经完成用户接口绘制时，就可以选择输出到一个现存的项目还是一个新项目中。如果选择输出到现存的项目并选择了根目录，就会像这样输出到 ./src/components：

此处为实例中存在的组件之一的样例：

React-Proto 在 GitHub 获得了2,000多星的好评。

然而，就笔者个人而言，这款应用程序仍需更新改进，尤其是 React Hooks 的发行。

而且它无法缩小，除非存在可见的背景图像。换言之，如果输入一个背景图像，缩小，然后删除背景图像，那将无法再次放大图像，因为按钮会变成灰色。

重新放大的唯一途径就是重新输入背景图像，并在重新放大后再将其移除。这一瑕疵改变了笔者对这款应用的看法，但它仍位列前22款工具之中，因为如此开源的确独此一家。

开源是该应用程序的优势，因为它为在未来形成趋向开源的代码库列表中提供了各类可能性。(其优势很重要，但似乎缺少人力资源支持。)

3. Why Did You Render

https://github.com/welldone-software/why-did-you-render

这款Why Did You Render 修补程序通过告知研发人员一些可避免的刷新来修复 React。

这太有用了，不仅指导了项目的修复工作，还帮助研发人员了解 React 的运作过程。对 React的运作有了更好的理解后，React 研发人员将大获成功。

通过显示值为 true的额外静态性能 whyDidYouRender 给任意一个自定义组件附加一个收听器：

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

收藏！送给React研发人员的22款超强工具

Traced Component