查看原文
其他

2019年,React 开发者应该掌握的 22 种神奇工具

点击“开发者技术前线”,选择“星标🔝”
13:21 在看|星标|留言,  真爱



众所周知,React JavaScript 库,用于构建出色的用户界面。但是,并不是每个人都在使用相同的工具或都知道所有有用的工具,这些工具有助于使 React 开发体验更有趣,更主动。


以下是 2019 年大家可以用来构建 React 应用程序的 22 个工具(该列表没有按它们的重要性排序)
1. webpack-bundle-analyzer


大家有没有想过自己的应用程序哪些包或哪部分占用了全部空间?好了,我们可以用 webpack-bundle-analyzer(https://url.leanapp.cn/kIPVmmv)来查看,它将帮助我们识别出占用最多空间的输出文件。
它将创建一个实时服务器,并向您提供捆绑包内容的交互式树图可视化。借助此工具包,您可以查看所显示文件的位置,它们的 gzip 大小,解析后的大小及其所属的父子级之间的的详情。
好处是什么呢?您可以根据自己看到的来优化您的 React 应用!
这是它的屏幕截图:


您可以清楚地看到 pdf 软件包在应用程序中占据了最大的空间。它还占据了最大屏幕。这非常有用。
但是,屏幕截图非常小。我们还可以传递有用的选项以查看更多详细信息,如 generateStatsFile: true ,并且还可以选择生成静态 HTML 文件,保存在开发环境之外的某个地方,以备后用。
2. React-Proto
React-Proto(https://url.leanapp.cn/uijD5K7)是面向开发人员和设计人员的原型制作工具。这是一个桌面软件,因此在使用之前,我们需要先下载安装。
这是此软件的使用示例:



该应用程序允许我们声明属性及其类型,在树状图中查看组件,导入背景图像,将其定义为有状态或无状态,定义其父组件,放大/缩小,以及将原型导出到一个新的或现有的项目中。
该应用程序似乎更适合 Mac 用户,不过,它也支持 Windows。
当我们完成用户界面映射后,可以选择导出到现有项目或新项目中。如果您选择导出到现有项目并选择根目录,则将其导出到 ./src/components,如下所示:


以下是在示例中我们使用组件之一的例子:



React-Proto 在 GitHub 上获得了 2,000 个星标。
3. Why Did You Render
Why Did You Render(https://url.leanapp.cn/m9ZNIA2)猴子补丁?React 通知我们可以避免重渲染。这不仅非常有用,还可以指导我们进行项目的性能修复,并帮助我们了解响应工作的方式。而且,当我们对 React 工作原理有更多的了解时,这也能使我们成为更好的 React 开发人员。
猴子补丁: 这个叫法起源于 Zope 框架,大家在修正 Zope 的 Bug 的时候经常在程序后面追加更新部分,这些被称作是“杂牌军补丁(guerilla patch)”,后来 guerilla 就渐渐的写成了 gorllia(猩猩),再后来就写了monkey(猴子),所以猴子补丁的叫法是这么莫名其妙的得来的。
我们可以通过声明一个额外的静态属性 why Did You Render,并将其值设置为 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(https://url.leanapp.cn/Q1JbLRB)是启动开发 React 项目最快的方法(拥有开箱即用的现代功能)。
还有什么能比 npx create-react-app 更简单的呢?
我在 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(https://url.leanapp.cn/7WKDMBe)是一个 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(https://url.leanapp.cn/UOsByMC)是 React 的一个友好且免费的应用程序管理器和任务运行器,可以在桌面上运行且支持跨平台,我们可以放心用。
它提供了很多友好的图形界面,为 React 开发人员的一些典型任务项目提供支持。例如创建新项目,执行任务和管理依赖项。并在 2018 年 8 月添加支持 Windows,因此可以放心,它肯定是跨平台的。
以下是 Guppy 使用时的样子:


7. react-testing-library
我一直很喜欢 react-testing-library(https://url.leanapp.cn/AAWrJhu),因为在编写单元测试时感觉不错。这个包提供了 DOM 测试实用程序,鼓励良好的测试实践。
此解决方案旨在解决测试实施细节的问题,就像用户可以看到它们一样,而不是测试 React 组件的输入/输出。
测试实施细节并不是确保应用按预期运行的有效方法。当然,我们能够更清楚的了解如何获取组件所需的数据,使用哪种排序方法等。但是,如果我们必须更改实现方式以指向另一个数据库的话,单元测试就会失败,因为这些是耦合逻辑的实现细节。
这是 react-testing-library 解决的一个问题,因为理想情况下,我们只希望我们的用户界面能够正常工作并最终正确显示。只要这些组件能够提供预期的输出,数据如何获取到这些组件实际上并不重要。
以下是使用此库进行测试的示例代码:
// Hoist helper functions (but not vars) to reuse between test casesconst renderComponent = ({ count }) => render( <StateMock state={{ count }}> <StatefulCounter /> </StateMock>, )
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))})


8. React  Developer Tools
React Developer Tools(https://url.leanapp.cn/bO2m1ju)是一个扩展,它允许在Chrome 和 Firefox  开发人员工具中查看 React 组件层次结构。
这是 React 开发中最常见的扩展插件,并且是 React 开发人员用来调试其应用程序的最有用的工具之一。
9. Bit
在使用诸如 material-ui 或 semantic-ui-react 之类的组件库时,Bit (https://bit.dev/)是一个很好的替代方案。它可以让我们探索数千个开源组件,并使用它们来构建项目。



有很多不同的 React 组件,可供任何人使用,包括选项卡、按钮、图表、表格、导航条、下拉菜单、加载旋转器、日期选择器、面包屑导航(breadcrumbs)、图标、布局等等。
10. Storybook
如果你还不了解 Storybook(https://storybook.js.org/),并且希望能够轻松地构建 UI 组件,我强烈建议你立即使用它。该工具启动了支持热重载的实时开发服务器,让我们可以在其中独立地实时开发 React 组件。
另一个很棒的事情是,我们可以使用现有的开源插件,将我们的开发经验提升到一个全新的水平。
例如,利用 Storybook README 包,我们可以在同一页面上创建 README 文档,同时开发供生产使用的 React 组件。这足以作为常规文档页面:


11. React Sight
你是否想过自己的应用程序在流程图中看起来是什么样的?


React -sight(https://www.reactsight.com/)可以让整个应用程序以树状图的形式展示层次结构,清楚查看我们的 React 应用程序。它还支持 React Router,Redux 和 React Fibre。
使用此工具,您可以将鼠标悬停在节点上,这些节点是指向树中与它们直接相关的组件的链接。
如果您在查看结果时遇到问题,可以在 地址栏上输入 chrome:extensions,找到 React Sight 框并单击 Allow access to file URLs 开关,如下所示:


12. React-cosmos
React-cosmos(https://url.leanapp.cn/x60eDHB)是用于创建可重复使用 React 组件的开发工具。
它会扫描项目中的组件,并且可以实现以下功能:
  • 用属性、上下文和状态的任意组合下渲染组件

  • 模拟每个外部依赖项(例如 API 响应、localStorage 等)

  • 与正在运行的实例进行交互时,查看应用程序状态的实时变化


13. CodeSandbox
这是本次推荐中最好的可用工具之一,它可以让我们手动使用 React 的速度比眨眼还快(好吧,也许也没那么快)。
这个称为 CodeSandbox(https://codesandbox.io/)的工具是一个在线编辑器,我们从创建原型到 Web 应用程序部署 - 都可以在这个网站实现!
在早期,Codesandbox 仅支持 React,但现在已经扩展到 Vue 和 Angular 等库的其他入门模板。他们还支持常见的静态站点生成器(如 gatsby 或 nextjs )创建项目来启动下一个 React Web 项目。
关于 codesandbox,它不仅活跃,还有很多有意思的事情可以讨论。
如果大家需要探索一下人们为方便大家起见正在构建的一些项目,那么简单地点击一下 explore 就可以访问一大堆代码示例,来帮助大家更新下一个项目:




14. React bits
React bits(https://vasanthk.gitbooks.io/react-bits/)是 React 模式、技术、技巧和窍门的集合,所有这些都以类似在线文档的格式编写,大家可以在同一个选项卡上快速访问不同的设计模式和技术、反模式、样式、UX  变体以及其他有用的与 React 相关的材料。
他们有一个 GitHub 存储库,目前有 10437  星。
一些示例包括诸如道具代理,在不同场景下处理各种 UX 的组合之类的概念,甚至还提示了每个开发人员应该避免的一些陷阱。
这是他们页面上的样子,如大家在左侧的菜单上看到的那样,有很多信息:


15. Folderize
Folderize(https://url.leanapp.cn/CJDTdfQ)是一个 VSCode 扩展。它可以让我们将组件文件转换为组件文件夹结构。转换后 React 组件仍将是一个组件,只是现在转换为一个目录而已。
例如,假设我们正在创建一个 React 组件,它把文件作为属性以显示有用的信息,比如它们的元数据。元数据组件的逻辑占用了很多行,因此我们决定将其拆分为一个单独的文件。但是,当我们决定这样做时,我们就有了两个相互关联的文件。
因此,如果我们的目录如下所示:


我们可能想把 FileView.js 和 FileMetadata.js 抽象到目录结构中,像 Apples- 那样,特别是如果我们希望添加更多与文件相关的组件,比如 FileScanner.js 。这就是 folderize 可以为我们做的事情,这样它们就可以具有以下类似结构:


import React from 'react'import FileView from './src/components/FileView'
const App = (props) => <FileView {...props} />
export default App


16. React Starter Projects
React Starter Projects(https://url.leanapp.cn/DUi8AFk)是一个很棒的依赖库列表,我们可以在一个页面中查看全部项目。因此,如果我们觉得能同时快速查看到大量选项是非常有用的,那么这个很适合我们。
一旦看到喜欢的入门项目后,我们就可以简单克隆存储库,根据开发中的应用需要进行简单修改。但是,并非所有的库都用来克隆存储库,因为其中一些库需要通过安装形式,才能成为项目的依赖项。这样可以更轻松地获取更新并保持项目整洁。
以下是该页面看起来的样子:


17. Highlight Updates
可以说,这个是每个开发者工具包里都应该有的重要工具。Highlight Updates 是 React DevTools 的一项扩展功能,可以查看页面中的哪些组件正在不必要地重新渲染。


它们会用橙色/红色标出严重的重渲染问题,帮助我们在开发页面时更容易的发现一些性能问题。
除非我们的目标是构建平庸的应用程序,否则为什么不试试这个在我们身边的好东西。
18. React Diff Viewer


React Diff Viewer(https://url.leanapp.cn/s0QPrMa)是使用 Diff 和 React 制作的简单美观的文本差异查看器。支持多种功能,如:分屏视图,内联视图,单词差异,行高亮显示等。
如果我们想将此功能嵌入记事本(如 Boostnote)和自定义至应用程序(比如主题颜色、故事演示文档组合等),那么,它将非常有用。


19. JS.coach
JS.coach(https://url.leanapp.cn/6uPqXJp)是我经常用来查找 React 相关材料的网站。我不确定为什么提到这个网站的人不多,但在这个页面我发现了几乎所有我需要的信息,它快捷、方便,并不断更新,总是能为我所有的项目提供所需的结果。
最近,他们添加了 React VR 选项卡,这真是太好了!
20. Awesome React
Awesome React(https://url.leanapp.cn/6uPqXJp)开源库是一个与 React 相关的并非常棒的列表。
我可能会忘记其他网站只从从这个链接学习 React 。因为可以在此找到大量有用的资源,这些资源肯定会帮助我们构建出色的 React 应用程序!
21. Proton Native
Proton Native(https://url.leanapp.cn/cLIGRY8)为大家提供了一个 React 环境来构建跨平台的本机桌面应用程序。
它是 Electron 的替代产品,只有一些简洁的功能,包括:
  • 与 React Native 相同的语法

  • 适用于现存的 React 库,例如 Redux

  • 跨平台

  • 原生组件,不再有 Electron

  • 与所有正常的 Node.js 包兼容


有兴趣了解更多吗?请阅读他们的文档(https://proton-native.js.org/#/)。
22. Devhints React.js Cheatsheet
一个不错的 React 速查表(https://devhints.io/react),尽管它缺少 React Hooks。不用担心,我将为 Reactv16.8 + 创建速查表,请继续关注。
结论


以上就是本次分享的全部工具。希望能为大家提供帮助。

https://segmentfault.com/a/1190000020860324
END好文点个在看吧!

    您可能也对以下帖子感兴趣

    文章有问题?点此查看未经处理的缓存