很多时候，开发人员需要展示代码段，可能是用于演示，博客或者是摘要。那么有哪些程序代码的工具呢？1. Polacode[链接]如果你喜欢VS Code，那么这个适合你！ Polacode 是一个VS Code扩展，可以直接从 VSCode 获取漂亮的代码屏幕截图。2. carbon.now.sh[链接]创建并共享源代码的精美图片。开始输入或将文件拖入文本区域以...

作为一个码农，我们需要专注于功能和最佳实践，而不是一遍遍地编写样板代码。消除无用功，投入时间学习使用正确的工具或者懂得使用有用的资源可以极大的帮助我们节省时间。

基本每个开发者都需要考虑逻辑复用的问题，否则你的项目中将充斥着大量的重复代码。那么 React 是怎么复用组件逻辑的呢？本文将一一介绍 React 复用组件逻辑的几种方法，希望你读完之后能够有所收获。如果你对这些内容已经非常清楚，那么略过本文即可。

CafeMenu 组件用于存储可用饮料的列表，现在我们想要创建另一个可以显示一种饮料的组件。如果不对 props 进行解构，我们的代码将像下面这样:

是什么使得一个编程语言的新特性很棒？那就是当这个特性可以结合多个其它特性的时候。 ES2015 版本中引入的 for...of 语句就是这种情况。 for...of 可以迭代数组、类数组以及任何可以迭代的对象(maps、sets、DOM集合)，并且，for...of 的语句还很短。 在这篇文章中，我将会演示 for...of 的能力。 1. 数组迭代 for...of ...

带你深度解锁Webpack系列(基础篇)和带你深度解锁Webpack系列(进阶篇)，主要是讲解了 Webpack 的配置，但是随着项目越来越大，构建速度可能会越来越慢，构建出来的js的体积也越来越大，此时就需要对配置进行优化。

如果你还没有阅读《4W字长文带你深度解锁Webpack系列(基础篇)》，建议阅读之后，再继续阅读本篇文章。 本文会引入更多的 webpack 配置，如果文中有任何错误，欢迎在评论区指正，我会尽快修正。 webpack 优化部分放在了下一篇。 推荐大家参考本文一步一步进行配置，不要总是想着找什么最佳配置，你掌握了之后，根据自己的...

webpack 是一个现代 JavaScript 应用程序的静态模块打包器，当 webpack 处理应用程序时，会递归构建一个依赖关系图，其中包含应用程序需要的每个模块，然后将这些模块打包成一个或多个 bundle。

尽管我在VS Code中经常使用许多快捷方式，以下快捷方式可能会派上用场，但我经常忘记它们的存在。我制作了一些GIF，以便更好地记住它们。也许这里面也有一些快捷方式你也不记得了，但是却很有用。

2019年和以往的每一年都不一样，这一年，我离开了熟悉的南京，来到了北京的工作，成为了一名“进城务工人员”。每次从南京回北京的时候，我都笑称自己又要去进城务工了。

不过呢，还是想更进一步了解下，于是最近认真阅读了 Babel 的文档，外加不断编译验证，输出了本篇文章，为了更好的阅读体验，修修改改，最终算是以我个人比较喜欢的方式推进了每个知识点（每一个配置的引入都是有原因的），希望能够帮助你对 Babel 的各种配置有一个更清晰的认识 (已经很懂的小伙伴，无视本文) 。

本文中的实现借助了 snabbdom ，因此如果你的关注点是虚拟DOM的实现或是将虚拟DOM渲染到浏览器的底层实现，本篇文章中并不会涉及到。

初学者(也许一些有经验的开发者也是一样)在读完官方文档，想写一个项目练手的时候不知道做什么项目好，或是有想法，但是无从下手。那么这篇文章将会给你带来很大的帮助。

Refs 提供了一种方式，允许我们访问 DOM 节点或在 render 方法中创建的 React 元素。 Refs 使用场景 在某些情况下，我们需要在典型数据流之外强制修改子组件，被修改的子组件可能是一个 React 组件的实例，也可能是一个 DOM 元素，例如: 管理焦点，文本选择或媒体播放。 触发强制动画。 集成第三方 DOM 库。 设置 Refs 1...

react-redux 是 redux 官方 React 绑定库。它帮助我们连接UI层和数据层。本文目的不是介绍 react-redux 的使用，而是要动手实现一个简易的 react-redux，希望能够对你有所帮助。

Redux 是 JavaScript 状态容器，提供可预测化的状态管理。Redux 除了和 React 一起用外，还支持其它界面库。Redux 体小精悍，仅有 2KB。这里我们需要明确一点：Redux 和 React 之间，没有强绑定的关系。本文旨在理解和实现一个 Redux，但是不会涉及 react-redux(一次深入理解一个知识点即可，react-redux 将出现在下一篇...

翻译：刘小夕原文链接：[链接] 因水平有限，文中部分翻译可能不够准确，如果你有更好的想法，欢迎在评论区指出。 更多文章可戳: [链接] 任何一种编程语言都具有超出基本用法的功能，它得益于成功的设计和试图去解决广泛问题。 JavaScript 中有一个这样的函数: Array.from：允许在 JavaScript 集合(如: 数组、类数组对象...

尽管 组合、复用 和 纯组件 三个准则阅读量不高，不过本着有始有终的原则，当然我个人始终还是觉得此篇文章非常优质，还是坚持翻译完了。本篇是最后 可靠React组件设计 的最后一篇，希望对你的组件设计有所帮助。

原文的篇幅非常长，不过内容太过于吸引我，还是忍不住要翻译出来。此篇文章对编写可重用和可维护的React组件非常有帮助。但因为篇幅实在太长，我对文章进行了分割，本篇文章重点阐述 组合和复用。因水平有限，文中部分翻译可能不够准确，如果你有更好的想法，欢迎在评论区指出。

原文的篇幅非常长，不过内容太过于吸引我，还是忍不住要翻译出来。此篇文章对编写可重用和可维护的React组件非常有帮助。但因为篇幅实在太长，我对文章进行了分割，本篇文章重点阐述 封装。因本人水平有限，文中部分翻译可能不够准确，如果您有更好的想法，欢迎在评论区指出。

原文的篇幅非常长，不过内容太过于吸引我，还是忍不住要翻译出来。此篇文章对编写可重用和可维护的React组件非常有帮助。但因为篇幅实在太长，我不得不进行了分割，本篇文章重点阐述 SRP，即单一职责原则。

这两段代码在功能上是等价的，都是数组中所有数字的总和，但是它们之间有一些理念差异。让我们先研究一下 reducer，因为它们功能强大，而且在编程中很重要。有成百上千篇关于 reducer 的文章，最后我会链接我喜欢的文章。

通常，当谈到JavaScript语言时，我们讨论的是ES6标准提供的新特性，本文也不例外。 我们将讨论JavaScript代理以及它们的作用，但在我们深入研究之前，我们先来看一下Proxy的定义是什么。

vue-cli, create-react-app、react-native-cli 等都是非常优秀的脚手架，通过脚手架，我们可以快速初始化一个项目，无需自己从零开始一步步配置，有效提升开发体验。尽管这些脚手架非常优秀，但是未必是符合我们的实际应用的，我们可以定制一个属于自己的脚手架(或公司通用脚手架)，来提升自己的开发效率。

本周面试题一览: 实现一个 JSON.stringify 实现一个 JSON.parse 实现一个观察者模式 使用CSS让一个元素水平垂直居中有哪些方式 ES6模块和CommonJS模块有哪些差异？ 更多优质文章可戳: [链接] 31. 实现一个 JSON.stringify JSON.stringify([, replacer [, space]) 方法是将一个JavaScript值(对象或者数组)转换为一个 JSON...

本周面试题一览: 原型链继承的基本思路是什么？有什么优缺点？ 借用构造函数和组合继承基本思路是什么？有什么优缺点？ 原型式继承的基本思路是什么？有什么优缺点？ 寄生式继承的基本思路是什么？有什么优缺点？ 寄生组合式继承的基本思路是什么？有什么优缺点？ 本周是继承专题，在开始之前，需要先了解构造函数、原型...

本文挑选了20到大厂面试题，大家在阅读时，建议不要先看我的答案，而是自己先思考一番。尽管，本文所有的答案，都是我在翻阅各种资料，思考并验证之后，才给出的。但因水平有限，本人的答案未必是最优的，如果您有更好的答案，欢迎给我留言。

本周面试题一览: 实现 Promise.race 方法 JSONP 原理及简单实现 实现一个数组去重的方法 清楚浮动的方法有哪些 编写一个通用的柯里化函数 currying 更多优质文章可戳: [链接] 20. 实现 Promise.race 方法 在实现 Promise.race 方法之前，我们首先要知道 Promise.race 的功能和特点，因为在清楚了 Promise.race 功能和特...

本周面试题一览: 什么是闭包？闭包的作用是什么？ 实现 Promise.all 方法 异步加载 js 脚本的方法有哪些？ 请实现一个 flattenDeep 函数，把嵌套的数组扁平化 可迭代对象有什么特点？ 更多优质文章可戳: [链接] 15. 什么是闭包？闭包的作用是什么？ 什么是闭包？ 闭包是指有权访问另一个函数作用域中的变量的函数，创建...

本周面试题一览: 什么是XSS攻击，XSS 攻击可以分为哪几类？我们如何防范XSS攻击？ 如何隐藏页面中的某个元素？ 浏览器事件代理机制的原理是什么？ setTimeout 倒计时为什么会出现误差？ 11. 什么是XSS攻击，XSS攻击可以分为哪几类？我们如何防范XSS攻击？ 1. XSS攻击 XSS(Cross-Site Scripting，跨站脚本攻击)是一种代码...