Zhou Cong
Zhou Cong
``` // App.tsx ``` 
> 原文地址：[https://medium.com/teamsubchannel/react-component-patterns-e7fb75be7bb0](https://medium.com/teamsubchannel/react-component-patterns-e7fb75be7bb0) 作者：[William Whatley](https://medium.com/@wwwhatley) 摘要：本文介绍了4种组件类型：容器组件、展示组件、高阶组件和渲染回调。  今天，我想花一点时间来分享我学习React组件模式的经验。这个想法来源于一次聚会时的技术交流。组件是React的核心，因此有必要去理解如何使用它们。 以下的例子都脱胎于[Michael Chan gave on React component patterns](https://www.youtube.com/watch?v=YaZg8wg39QQ&t=662s)这个视频的思想。我非常推荐你们看一看。 # 什么是组件？ [reactjs.org](reactjs.org)上说：“组件能够将你的界面分割成独立且可复用的小块，而这些小组件都是互相独立的。” 当你第一次执行`npm install react`命令的时候，你得到了一个组件以及相关的API。与JS的函数类似，一个组件接收输入，叫做`props`。然后返回React元素，作用是描述UI界面的样式。这就是React作为声明式API的表现形式，因为你只需要告诉它你想要展示的UI，剩下的React都会帮你完成。 对于声明式API的概念，你可以想象成滴滴打车的场景——告诉司机你的目的地，接着让他来完成开车的工作。而命令式API不同，你将完成所有任务，既是乘客，也是司机。 # 组件API 当你在安装好React后，得到了5类API：  * render * state *...
> 原文地址：[https://hackernoon.com/javascript-async-await-the-good-part-pitfalls-and-how-to-use-9b759ca21cda](https://hackernoon.com/javascript-async-await-the-good-part-pitfalls-and-how-to-use-9b759ca21cda) 作者：[Charlee Li](https://hackernoon.com/@charleeli) 摘要：本文介绍了使用async/await后能够将异步操作以同步的代码风格表现出来，同时也有部分陷阱需要开发者注意。因此作者总结了自己理解的正确使用async/await的方式。  ES7为JS异步编程带来了一个梦幻特性：`async/await`。它能够在不阻塞主线程的情况下，让开发者使用同步编码风格异步获取网络资源。不过要完全掌握它是有一点技术门槛的。本文将带你从不同层面去探索async/await的特性，并且向你演示如何正确高效地使用它。 # async/await的优点 async/await带来的最大好处就是能让我们使用同步的代码风格。看看下面的例子吧。 ```js // async/await async getBooksByAuthorWithAwait(authorId) { const books = await bookModel.fetchAll(); return books.filter(b => b.authorId === authorId); } // promise...
身体原因，心理原因，从4月后欠更11篇（按每周一篇计算）。 近期调养状态良好，所以决定恢复更新，每周2-3篇，每篇保证按Medium阅读时间7min以上。
> 原文地址：[https://blog.logrocket.com/infinite-scroll-techniques-in-react-adcfd7ff32bd](https://blog.logrocket.com/infinite-scroll-techniques-in-react-adcfd7ff32bd) 作者：[Ogundipe Samuel](https://blog.logrocket.com/@ogundipesamuel) 摘要：本文先讲了如何独立完成一个简单的无限滚动组件，之后讲了如何使用第三方库`React-infinite-scroller`来实现相同的功能，最后介绍了LogRocket插件，它可以帮助开发者远程复现bug。  # 前言 无限滚动是目前Web网页广泛运用的一项技术，它让网页能够在用户滚动屏幕时动态加载内容，省去了分页的麻烦。 动态加载的内容往往是通过向服务器异步发送请求得到的。这样也能够极大地提升用户体验。 然而世上无绝对，凡事皆有例外。 无限滚动的实现原理是在window对象或滚动的div元素上绑定一个`scroll`事件处理，当滚动条滚动到元素的底部时触发事件，执行相应的动作。 我将讲述两种React中实现无限滚动的方法： 1. 第一种方法是不依赖于第三方库，从零开始实现一个组件； 2. 第二种方法是使用一个已有的无限滚动库。 **以下内容需要读者有一定的React的经验** # 从零开始 前文已经说过，无限滚动就是绑定一个事件函数来监听滚动条是否已经滑动到指定元素的底部。 看看下面这个组件的render方法： ```js render() { return ( Welcome to React...
> 原文地址：[https://blog.pragmatists.com/how-to-debug-front-end-optimising-network-assets-c0bfcad29b40](https://blog.pragmatists.com/how-to-debug-front-end-optimising-network-assets-c0bfcad29b40) 作者：[Michał Witkowski](https://blog.pragmatists.com/@WitkowskiMichau) 摘要：本文从性能监控、图片、网络字体和JS代码优化以及如何提升渲染阻塞资源的加载速度等方面列举了常见的前端优化方法。 性能是决定我们Web应用成功与否的重要因素。一开始，我们的Web应用体积较小，几乎没有开发者会关注于持续监控用户接收的数据大小以及所需时间。 如果你不曾做过性能监控，那么你的网站性能很可能还有提升的余地。这时就出现了一个问题，为了让用户能够感知到性能的提升，你应该做出哪些努力呢？ 在下面的研究中，你可以了解到如何让用户感觉到加载时间发生了明显的变化，并且你至少要完成20%的任务，才能让用户注意到你为此付出的努力。[更多资料](https://www.smashingmagazine.com/2015/09/why-performance-matters-the-perception-of-time/#the-need-for-performance-optimization-the-20-rule) 接下来的文章分为6个部分： * 通过Chrome Devtool Audit检查性能 * 图片优化 * 网络字体优化 * JavaScript优化 * 渲染阻塞资源的加载提速 * 检查性能的其他程序或插件 如果你还有其他问题，请在评论中告知。我们的团队和读者们很乐意帮助你。 **这篇文章是前端调试清单系列的一部分** * [How to debug Front-end:...
因为今天要上班，以及个人身体原因，本周无翻译。 作为补偿，下周末如果不加班，更新一篇10min左右的翻译，一篇抵过去两篇。 另外，希望大家注意身体，经常锻炼，不要熬夜，养成良好的生活习惯。 毕竟一旦生病，检查、开药的成本太高了，而且还会影响到心理健康。
> 原文地址：[https://medium.freecodecamp.org/google-publishes-a-javascript-style-guide-here-are-some-key-lessons-1810b8ad050b](https://medium.freecodecamp.org/google-publishes-a-javascript-style-guide-here-are-some-key-lessons-1810b8ad050b) 作者：[Daniel Simmons](https://medium.freecodecamp.org/@dsimmons_23530) 摘要：本文总结了Google发布的JavaScript代码规范中比较重要的部分，适合想要养成良好代码规范的读者借鉴。  Google为了那些还不熟悉代码规范的人发布了一个[JS代码规范](https://google.github.io/styleguide/jsguide.html)。其中列出了编写简洁易懂的代码所应该做的最佳实践。 代码规范并不是一种编写正确JavaScript代码的规则，而是为了保持源代码编写模式一致的一种选择。对于JavaScript语言尤其如此，因为它灵活并且约束较少，允许开发者使用许多不同的编码样式。 Google和Airbnb各自占据着当前最流行的编码规范的半壁江山。如果你会在编写JS代码上投入很长时间的话，我强烈推荐你通读一遍这两家公司的编码规范。 接下来要写的是我个人认为在Google的代码规范中，与日常开发密切相关的十三条规则。 它们处理的问题都非常具有争议性，包括tab与空格、是否强制使用分号等等。还有一些令我感到惊讶的规则，往往最后都改变了我编写JS代码的习惯。 对于每一条规则，我都会先给出规范的摘要，然后引用规范中的详细说明。我还会举一些适当的反例论证遵守这些规则的重要性。 # 使用空格代替tab > 除了每一行的终止符序列，ASCII水平空格符（0x20）是唯一一个可以出现在源文件中任意位置的空格字符。这也意味着，tab字符不应该被使用，以及被用来控制缩进。 规范随后指出应该使用2个，而不是4个空格带实现缩进。 ```js // bad function foo() { ∙∙∙∙let name; } //...
> 原文地址：[https://medium.freecodecamp.org/check-out-these-useful-ecmascript-2015-es6-tips-and-tricks-6db105590377](https://medium.freecodecamp.org/check-out-these-useful-ecmascript-2015-es6-tips-and-tricks-6db105590377) 作者：[rajaraodv](https://medium.freecodecamp.org/@rajaraodv) 摘要：总结ES6新特性：默认参数、reduce、解构赋值和Set在使用时的一些小技巧。 ES6出来已经有好几年了，同时很多新特性可以被巧妙地运用在项目中。我想要列下其中一些，希望它们对你有用。 如果你还知道其他一些小技巧，欢迎留言。我很高兴把它们补充进来。 # 1. 强制要求参数 ES6提供了默认参数值机制，允许你为参数设置默认值，防止在函数被调用时没有传入这些参数。 在下面的例子中，我们写了一个`required()`函数作为参数a和b的默认值。这意味着如果a或b其中有一个参数没有在调用时传值，会默认`required()`函数，然后抛出错误。 ```js const required = () => {throw new Error('Missing parameter')}; const add = (a = required(), b = required())...
> 原文地址：[https://medium.com/dailyjs/data-visualization-with-react-vis-bd2587fe1660](https://medium.com/dailyjs/data-visualization-with-react-vis-bd2587fe1660) 作者：[Shyianovska Nataliia](https://medium.com/@shyianovska) 摘要：react-vis是Uber公司开源的数据可视化库，能够制作折线图、饼状图等常用图表。本文将简单介绍如何使用它。  ## 什么是react-vis？ [React-vis](http://uber.github.io/react-vis/documentation/welcome-to-react-vis)是一个React框架下的可视化库。它的开源者是Uber公司。你可以用它轻松地创建折线图、饼状图、柱状图和树形图等常见图表。 之所以推荐React-vis是因为它有以下三个优点： * 简单 * 灵活 * 整合了React 在这篇文章中，我想要向你展示如何使用react-vis来创建一个折线图。 ## 安装 首先，你需要在你的项目中安装react-vis。我使用`create-react-app`来创建demo项目。 输入`npm install react-vis --save-dev`来安装react-vis。 ## 示例 假设现在你希望可视化一些数据。在我的demo中，我使用的是Github统计每种语言有多少个pull request得到的[数据集](https://nataliia-radina.github.io/react-vis-example/)。 接着，我在componentDidMount方法中接收数据，然后给我的应用设置state并将它当作props传给子组件。由于我只对JavaScript的数据感兴趣，所以我还对结果进行了过滤。 ```js...