2019年，React开发人员应该掌握的22种神奇工具

只有这样做之后，我们的控制台才会弹出令人难以置信的烦人警报：

但别误会，请把它当成一件好事。利用那些烦人的消息，我们就可以修复那些浪费的重渲染。

4. Create React App

大家都知道 Create React App 是启动开发 React 项目最快的方法（拥有开箱即用的现代功能）。

还有什么能比 npx create-react-app <name> 更简单的呢？

我在 Medium 上的教程（以及 Dev.to）都是用 create-react-app 构建 React 接口界面的，就因为它又快又简单。

我们当中有些人可能不知道如何用 CRA 来创建一个 TypeScript 项目。我们要做的就是在末尾加上 --typescript：

npx create-react-app <name> --typescript 

这会帮我们省去给 CRA 项目手工添加 TypeScript 的麻烦。

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

（编辑：宿州站长网）

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