奇舞周刊第 465 期： 一份详尽的 React re-render 指南

记得点击文章末尾的“ 阅读原文 ”查看哟~

下面先一起看下本期周刊 摘要 吧~

奇舞推荐

■ ■ ■

 一份详尽的 React re-render 指南

本文是一篇比较详尽的 React re-render 指南，会着重介绍和解答以下问题：什么是 re-render、哪些是必要或非必要的 re-render、什么条件能够触发 React 组件 re-render。除此之外，还会介绍一些避免 re-render 的重要开发模式，以及引起不必要 re-render 的反模式。并且针对每种模式和反模式都提供了示例图。

 彻底搞懂 Webpack 的 sourcemap 配置原理

用过 webpack 的都知道，webpack 的 sourcemap 配置是比较麻烦的，本文教你彻底搞懂 sourcemap 配置

 一个案例学会 VSCode Snippets，极大提高开发效率

教你怎么编写自己的 VSCode Snippets，开发效率 up up

 前端切图仔可以看懂的自动化测试入门文章

一直以来对于前端同学来说，自动化测试都是一个比较特殊的命题，但是很多人都对它知之甚少或者是只是停留在理论的基础上，但实际上，自动化测试在前端工程中也是相当重要的一部分。即使是快速迭代的活动页面，也会有通用的工具函数与 SDK，对这一部分的代码进行测试用例的完善是有必要且意义重大的，而对于某些流量巨大且长期存在的页面，我们甚至需要进行多种测试场景的保障。

技术实践

■ ■ ■

 还在用定时器吗？借助 CSS 来监听事件

平时工作中很多场合都要用到定时器，比如延迟加载、定时查询等等，但定时器的控制有时候会有些许麻烦，比如鼠标移入停止、移出再重新开始。这次介绍几个借助 CSS 来更好的控制定时器的方法，一起了解一下吧，相信可以带来不一样的体验

 使用 FLIP 技术让编写动画事半功倍

本文将简要介绍 FLIP 动画，是一种高性能的动画方案，它适用于动画的初始态或最终态不明确的情况，使用 FLIP 技术，能够大大减少动画的开发成本。

 前端运维部署那些事

聊到运维，很长一段时间我觉得跟前端就是毫无关联的玩意，应该说半毛钱关系都木。但随着前端工程化的发展，前端基本运维部署相关知识甚至也逐步被重视，如果你公司的运维部门很强大，那么你也可以完全忽略运维相关的，如果你想更多了解前端架构，还是需要具备一定的运维相关知识储备

拓展边界

■ ■ ■

 以 QUIC 为例，聊聊如何学习网络协议

对于大部分互联网从业者来说，虽然大家每天都在跟网络打交道，但很少有人会 (需要) 关心 HTTP 之下的网络协议的细节，大部分时候，了解个大概，知道如何使用就可以了。但是如果你就是要详尽地了解一下 QUIC 的知识，该如何入手呢？

 精读《State of CSS 2022》

本周读一读 State of CSS 2022 介绍的 CSS 特性。

关于奇舞团

奇舞团是 360 集团最大的大前端团队，代表集团参与 W3C 和 ECMA 会员（TC39）工作。奇舞团非常重视人才培养，有工程师、讲师、翻译官、业务接口人、团队 Leader 等多种发展方向供员工选择，并辅以提供相应的技术力、专业力、通用力、领导力等培训课程。奇舞团以开放和求贤的心态欢迎各种优秀人才关注和加入奇舞团。