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

11

前端快爆

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

image.png | left | 719x533

> 点评: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)。🔗

image.png | left | 600x212

> 点评:它强任它强,我用 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

动画切换.gif | center | 700x430

3d.gif | center | 719x458

专题:React 小辑

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

霍雍:对于新手来说,React + Redux 最困难的就是拆分得到处都是的reducer、state、action、effects……稍不留神,就会埋下 bug。而 TypeScript 基本扫清了所有可预见的低级错误,类型不对?参数不对?在编译阶段就可以发现,大大提升了高复杂度React项目的开发体验。TypeScript 的强类型与 React 的高复杂度组件化简直可以完美的配合,有了 TypeScript,不再需要 prop-types,TypeScript 天然的支持类型定义。让 React 组件的书写和重构方便到极致。
霍雍:TypeScript 官网的例子,只能用简单和简陋来形容。这里是一篇最全面的TypeScript Guide!
霍雍:redux-thunk 作为入门级的 side effects 处理框架,简单易用,但也问题重重。对于复杂的业务开发,小编推荐 redux-saga,它用来实现可测试可随时取消的异步过程及更好的异常处理。redux-saga 上手确实需要花费一些时间,但是和 RxJS 比起来,其实还算简单。官网也非常清晰和完善,推荐之。
霍雍:高复杂度的状态树计算可能产生效率问题,而 Reselect 提供了非常方便的接口实现了:计算衍生数据计算,让Redux存储尽可能少的状态;自动缓存状态计算,参数不变,结果不需要重算;可组合,不同的选择器 (Selector) 之间相互作为输入,增加了灵活性。
霍雍:复杂的业务需求中,经常会存在大量嵌套的 JSON。例如在返回的数据中,属性 aListbList 都可能会引用到相同的实体。为了保证高效的数据传输和操作,我们需要将冗余数据处理成唯一的 id -> entity 的键值对,而normalizr 可以帮助我们整理复杂的嵌套对象,将所有的实体替换成对应的 id。对于传输效率以及处理,都非常的方便。快来了解一下上万 stars 的结构神器吧,该项目作为 redux 官方推荐的工具,但又不只适用于 redux。
霍雍:我们需要大量书写的每一个接口请求,都逃不掉 request、success、failure “吉祥三宝”的折磨。而 redux-api-middleware 是对 ajax 的封装,提供了大量的配置定制。个人在一些业务项目中使用 redux-api-middleware 大大简化了 API 调用的工作。你还在自己写一大堆的 fetch 和 actions 吗?快来看看吧。

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

你可能感兴趣的

载入中...