目前公司产品有关 react 的工具版本普遍较低，其中 react router 版本为 3.x(是的，没有看错，3.x 的版本)。而最新的 react router 已经到了 6.x 版本。

我们在日常的项目开发中往往会把页面拆分成一个个的组件，通过拼装的方式来实现整体的页面效果，所以与其说去优化 React，不如聚焦在现有的组件中，思考🤔如何去设计一个组件才能提高他的性能，从而提高整个项目的性能以及交互的流畅性。

前段时间分享了《搭建自动化 Web 页面性能检测系统 —— 设计篇》，我们提到了性能检测的一些名词和自研性能检测系统的原因，也简单介绍了一下系统的设计。在这里我们书接上篇记录下是如何实现一个性能检测系统的。

业务中会有一些需要实现拖拽的场景，尤其是偏视觉方向以及移动端较多。拖拽在一定程度上能让交互更加便捷，能大大提升用户体验。以业务中心子产品配置功能为例，产品模块通过拖拽来调整顺序，的确会更加方便一些。

数栈作为云原⽣⼀站式⼤数据开发平台，从2016年发布第⼀个版本开始，数栈就始终坚持着以技术为核⼼、安全为底线、提效为⽬标、中台为战略的思想，坚定不移地⾛国产化信创路线，不断推进产品功能迭代、技术创新、服务细化、性能升级。

我们是袋鼠云数栈 UED 团队，致力于打造优秀的一站式数据中台产品。我们始终保持工匠精神，探索前端道路，为社区积累并传播经验价值。本文作者：正则

随着企业的发展，一个大型系统里可能包含 n 多子系统, 用户在操作不同的系统时，需要多次登录，很麻烦，我们需要一种全新的登录方式来实现多系统应用群的登录，这就是单点登录。

Iterator 提供了一种统一的接口机制，为各种不同数据结构提供统一的访问机制。定义 Iterator 就是提供一个具有 next() 方法的对象，每次调用 next() 都会返回一个结果对象，该结果对象有两个属性，value 表示当前的值，done 表示遍历是否结束。

本篇文章主要介绍的是关于CSS Sandbox的一些事情，为什么要介绍这个呢？在我们日常的开发中，样式问题其实一直是一个比较耗时的事情，一方面我们根据 UI 稿不断的去调整，另一方面随着项目越来越大可能哪一次开发就发现——诶，我的样式怎么不起作用了，亦或是怎么被另一个样式所覆盖了。原因可能有很多：

如今的前端是一个涉猎领域很广的职业。作为一名前端，我们不仅要开发管理系统、数据中台、还要应对年报开发、节日活动等场景。不仅要会增删改查，编写表单，还要具备开发动画、H5 游戏等能力。能做出很 Cool 的动画效果，也是一种前端特有的成就感。所以，我们从动画的实现方法入手，了解浏览器的渲染，以及如何提升动画...

进程（Process），进程是计算机中的程序关于某数据集合上的一次运行活动，是系统进行资源分配和调度的基本单位，是操作系统结构的基础，进程是线程的容器。

这是开发人耳熟能详的 KISS 原则，也像是一句有调侃意味的善意提醒，提醒每个前端人，简洁易懂的用户体验和删繁就简的搭建逻辑就是前端开发的至简大道。

作者：霜序校稿：袋鼠云数栈前端团队运营小组该文章包含如下内容受控与非受控组件非受控组件受控组件受控和非受控组件边界反模式解决方案前言在 HTML 中，表单元素(<input>/<textarea>/<select>)，通常自己会维护 state，并根据用户的输入进行更新 {代码...} 在这个 HTML 中，我们可以在 input 中随意...

这篇文章旨在总结 React Hooks 的使用技巧以及在使用过程中需要注意的问题，其中会附加一些问题产生的原因以及解决方式。但是请注意，文章中所给出的解决方式并不一定完全适用，解决问题的方案有很多种，也许你所在的团队针对这些问题已经给出了对应的规范，亦或是你已经对这些问题的解决方式形成了更好的认知。所以你的...

Molecule 是一个受 VS Code 启发，使用 React.js 构建的 Web IDE UI 框架。通过一种类似 VS Code 扩展机制（Extension），可快速、轻松搭建一个高度抽象的 Web IDE UI 系统。同时基于 Monaco Editor，内置集成了 QuickAccess 和 Keybinding 等功能，并提供了简单的 API 以供使用。

    欢迎阅读如何使用 TypeScript, React, ANTLR4, Monaco Editor 创建一个自定义 Web 编辑器系列的第二章节, 在这之前建议您阅读使用 TypeScript, React, ANTLR4, Monaco Editor 创建一个自定义 Web 编辑器(一)

以大家开发常用的 chrome 浏览器或 Node 举例，我们的 JavaScript 代码是通过 V8 运行的。但 V8 是怎么执行代码的呢？当我们输入 const foo = {foo:'foo'} 时 V8 又做了什么？笔者先抛出以上问题，我们接着往下看。

依赖注入定义为组件之间依赖关系由容器在运行期决定，形象的说即由容器动态的将某个依赖关系注入到组件之中在面向对象编程中，我们经常处理的问题就是解耦，控制反转(IoC)就是常用的面向对象编程的设计原则，其中依赖注入是控制反转最常用的实现。目标解决当前类不负责被依赖类实例的创建和初始化。

之前笔者一直想了解一些关于谷歌插件的相关知识，通过这个谷歌插件也可以更好的认识到这个谷歌的调试工具，正好最近需要进行分享，这两个星期去学习和了解了谷歌插件，然后写了这一篇文章，把本人所了解的和一些思考点写了下来。同时，也想着可以使用谷歌插件去写一些小工具，既学习了新的东西，又有一定的趣味性。当然...

序言：在用 babel-plugin 实现按需加载一文中笔者用作用域链思路实现了按需加载组件。此思路是统一式处理，进入 ImportDeclaration 后，收集依赖，生成新节点，最后利用作用域( scope )链直接替换了被修改的 specifiers[] 绑定的所有引用名。同样是利用作用域链，可以知晓某一节点是否在上下文中被引用，如果没有引用就...