前端技术周刊 2018-07-16：React 小辑

前端快爆

• 最近有国外大牛把 Vim 移植到了 WebAssembly，从而可以在浏览器里面使用性能更好的 Vim 了。🔗

> 点评：WebAssembly 潜能无限。

• Chrome 69 开始支持 AV1 视频编码格式，<span data-type="color" style="color:rgb(26, 26, 26)"><span data-type="background" style="background-color:rgb(255, 255, 255)">它的定位是取代 Google 的 VP9 并与现在的 HEVC 标准竞争。虽然最初的AV1 实现将吸收 Daala 和 Thor 的一些特色，但是它的大部分代码来自于 VP10，其目标是使 AV1 的压缩性能比 VP9/HEVC 提高50%。此前 </span></span>Firefox 55<span data-type="color" style="color:rgb(26, 26, 26)"><span data-type="background" style="background-color:rgb(255, 255, 255)"> 已经率先支持，不过需要开启 </span></span>media.av1.enabled<span data-type="color" style="color:rgb(26, 26, 26)"><span data-type="background" style="background-color:rgb(255, 255, 255)"> flag</span></span>。🔗

  点评：不用担心视频源，自家亲儿子 YouTube 应该很快就会全面部署了。

• 好消息，CSS 原生嵌套语法即将纳入规范。CSS WG 近日决定把 Tab Atkins 提出的 CSS Nesting Module Level 3 添加为编辑草案（Editor’s Draft）。🔗

> 点评：它强任它强，我用 Sass 来翱翔，详见文章：[《不用预编译，CSS 直接写嵌套的日子就要到了》](https://github.com/anjia/blog/issues/1)。

• 7月12日，eslint-scope 作者的 npm 账号被攻击者登录并发布了版本 3.7.2，并利用 postinstall 脚本尝试获取更多用户的 npm access token。此包影响了大概 4500 个 npm 用户的账号，此后 npm 取消了这些账号的 access token，并建议开发者们启用两步校验功能。更详细的报告见此。 🔗

  点评：屋漏偏逢连夜雨，npm 也是多事之秋。

优秀 Demo

• 动画切换预览效果

• Canvas 实现的 3D 几何图形

专题：React 小辑

本期由与 React 搏斗极长时间的健美前端、社区红人 @霍雍 带来的 React 小辑。React 庞大的生态链总让我们头晕、眼花、手心冒汗，而它随心所欲的用法则让人担忧项目的维护成本和技术债务，来看看过来人是怎么为我们配齐清热解毒、清凉止咳的药方吧：）

• Microsoft 给的 Typescript React Starter Pack

霍雍：对于新手来说，React + Redux 最困难的就是拆分得到处都是的reducer、state、action、effects……稍不留神，就会埋下 bug。而 TypeScript 基本扫清了所有可预见的低级错误，类型不对？参数不对？在编译阶段就可以发现，大大提升了高复杂度React项目的开发体验。TypeScript 的强类型与 React 的高复杂度组件化简直可以完美的配合，有了 TypeScript，不再需要 prop-types，TypeScript 天然的支持类型定义。让 React 组件的书写和重构方便到极致。

• TypeScript + React + Redux 全面的 Guide

霍雍：TypeScript 官网的例子，只能用简单和简陋来形容。这里是一篇最全面的TypeScript Guide！

• Redux-saga 健壮的异步处理神器 & repo

霍雍：redux-thunk 作为入门级的 side effects 处理框架，简单易用，但也问题重重。对于复杂的业务开发，小编推荐 redux-saga，它用来实现可测试可随时取消的异步过程及更好的异常处理。redux-saga 上手确实需要花费一些时间，但是和 RxJS 比起来，其实还算简单。官网也非常清晰和完善，推荐之。

• Redux 数据计算缓存层 Reselect & repo

霍雍：高复杂度的状态树计算可能产生效率问题，而 Reselect 提供了非常方便的接口实现了：计算衍生数据计算，让Redux存储尽可能少的状态；自动缓存状态计算，参数不变，结果不需要重算；可组合，不同的选择器 (Selector) 之间相互作为输入，增加了灵活性。

• Redux 搭配 Normalizr 构建低空间占用的数据 & repo

霍雍：复杂的业务需求中，经常会存在大量嵌套的 JSON。例如在返回的数据中，属性 aList 和 bList 都可能会引用到相同的实体。为了保证高效的数据传输和操作，我们需要将冗余数据处理成唯一的 id -> entity 的键值对，而normalizr 可以帮助我们整理复杂的嵌套对象，将所有的实体替换成对应的 id。对于传输效率以及处理，都非常的方便。快来了解一下上万 stars 的结构神器吧，该项目作为 redux 官方推荐的工具，但又不只适用于 redux。

• Fetch API 封装之 redux-api-middleware & repo

霍雍：我们需要大量书写的每一个接口请求，都逃不掉 request、success、failure “吉祥三宝”的折磨。而 redux-api-middleware 是对 ajax 的封装，提供了大量的配置定制。个人在一些业务项目中使用 redux-api-middleware 大大简化了 API 调用的工作。你还在自己写一大堆的 fetch 和 actions 吗？快来看看吧。

---

本期编辑：@壹丝，审阅：@承虎(humphry)，专题供稿：@霍雍