前端技术周刊 2018-02-02

前端技术周刊 2018-02-02

新闻

上新

1. 一系列 ECMAScript 提案进入 stage 4 阶段，这意味着相关语法将进入 ES2018 规范。它们包括：Promise.prototype.finally pr、对象解构{...obj} pr、正则逆向断言(?<=...)及(? pr、正则\p{…}形式 unicode 转义 pr。
2. Chrome 64 这次 DevTools 更新的主要内容包括：实时性能监控、控制台侧边栏、控制台消息自动分组。附赠中文解说视频一枚。?
3. Blink 意图实现 Picture-in-Picture（画中画规范），该规范可以在浏览器中弹出一个小窗口播放视频。此前 Safari 已经实现了私有 API。?
4. 为了更好的帮助大家调试 CSS 布局，Firefox 已经推出了非常强大的 Grid 可视化调试工具，现在有意图实现 Flexbox 的可视化调试。这里有一个小调查，希望前端同学都填一下，帮助我们自己有更好用的调试工具。?
5. Vue Devtools 发布了 4.0 版本，新版本更新包括：可修改的组件数据，在编辑器中打开组件源文件，可直接在界面上右击检验组件，可按组件过滤事件等功能。?
6. 新兴打包工具 Parcel 上线了一个大更新 1.5.0，提供了 SourceMap 支持、WebAssembly 支持、环境配置文件.env和更快的小项目编译性能。?
7. dialog-polyfill 是由谷歌开源的，HTML 5.2 中定义的 dialog 元素的 polyfill。?

数据

Rollbar 为我们带来了很有趣的统计数据：JavaScript 监控到的异常的前十名，包括空引用系列异常：Cannot read property \_\_ of undefined、undefined is not an object、null is not an object、undefined is not a function、Cannot read property 'length' of undefined、Cannot set property \_\_ of undefined、\_\_ is not defined；跨域异常：Script error；IE专属异常：Object doesn’t support property；溢出：Maximum call stack。?

Blink 与 V8 团队推出了 Speedometer 2.0 以衡量网页在各框架下的响应时间。新版主要针对最近三年崛起的新库 React、Vue 和 Ember 书写了更新的用例，并覆盖到了 Babel 编译等场景。由此工具可以得到一些性能提升的结论，如 Chrome 更新了Function.prototype.bind的内部实现，使得 React 的 TodoMVC 应用响应性能提升了一倍多。?

专题：React

React 实践

• React Component 的八个选择

Cory House 分享了他在推特上进行的 React 开发相关的调查：开发环境大家更倾向于使用 create-react-app；类型限制更倾向于 prop-types；样式方案少数人会采用 CSS Modules 或 CSS-in-JS 的方案。除此以外，文章作者针对各个选择都有总结，包括 createClass()还是 ES Class、State 选择、this 绑定等。（墙外）

• 使用有限自动状态机实现鲁棒性强的 React UI

性能

• 针对 Airbnb 清单页的 React 性能优化
• 如何大幅提升 React App 性能（墙外）

React Fiber

• React 16 Fiber 源码速览
• React Fiber 初探
• 完全理解 React Fiber

---

本期由不会耍贱的 humphry 编辑，由池冰校对，由龙笛审阅